<!DOCTYPE html>
<html>
<link href="resources/grid.css" rel="stylesheet">
<style>
.grid {
grid-template-columns: [first] 50px [middle] 100px [last];
grid-template-rows: [first] 50px [middle] 100px [last];
/* To detect how much we extend the grid. */
grid-auto-columns: 200px;
grid-auto-rows: 200px;
/* Make the grid shrink-to-fit. */
position: absolute;
}
.negativeStartPositionGrowGridInColumnDirection {
grid-column: -1 / auto;
grid-row: 1;
}
.negativeStartPositionGrowGridInRowDirection {
grid-column: 1;
grid-row: -1 / auto;
}
.lastNamedGridLineStartPositionGrowGridInRowDirection {
grid-column: 1;
grid-row: -1 / auto;
}
.lastNamedGridLineStartPositionGrowGridInColumnDirection {
grid-column: last / auto;
grid-row: 1;
}
.negativeStartPositionGrowGridInRowDirection {
grid-column: 1;
grid-row: last / auto;
}
.endSpanGrowGridInColumnDirection {
grid-column: -2 / span 3;
grid-row: 1;
}
.endSpanGrowGridInRowDirection {
grid-column: 1;
grid-row: -2 / span 3;
}
.namedEndSpanGrowGridInColumnDirection {
grid-column: -1 middle / span 3;
grid-row: 1;
}
.namedEndSpanGrowGridInRowDirection {
grid-column: 1;
grid-row: 2 middle / span 3;
}
.negativeEndPositionStartSpanInColumnDirection {
grid-column: span / -1;
grid-row: 1;
}
.negativeEndPositionStartSpanInRowDirection {
grid-column: 1;
grid-row: span 5 / -1;
}
.negativeNamedGridLineEndPositionStartSpanInColumnDirection {
grid-column: span / last;
grid-row: 1;
}
.negativeNamedGridLineEndPositionStartSpanInRowDirection {
grid-column: 1;
grid-row: span 5 / last;
}
.negativeEndPositionStartNegativeInColumnDirection {
grid-column: -3 / -1;
grid-row: 1;
}
.negativeEndPositionStartNegativeInRowDirection {
grid-column: -5 / -2;
grid-row: 1;
}
.namedGridLineEndPositionStartNegativeInColumnDirection {
grid-column: -3 / 10 last;
grid-row: 1;
}
.namedGridLineEndPositionStartNegativeInRowDirection {
grid-column: -5 / -2 middle;
grid-row: 1;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">
<p>Test that negative grid positions are correctly resolved.</p>
<div style="position: relative">
<div class="grid" data-expected-width="350" data-expected-height="150">
<div class="sizedToGridArea negativeStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="350">
<div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInRowDirection" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="350" data-expected-height="150">
<div class="sizedToGridArea lastNamedGridLineStartPositionGrowGridInColumnDirection" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="350">
<div class="sizedToGridArea negativeStartPositionGrowGridInRowDirection" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
<div class="sizedToGridArea endSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="550">
<div class="sizedToGridArea endSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="500"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
<div class="sizedToGridArea namedEndSpanGrowGridInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="500" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="950">
<div class="sizedToGridArea namedEndSpanGrowGridInRowDirection" data-offset-x="0" data-offset-y="350" data-expected-width="50" data-expected-height="600"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
<div class="sizedToGridArea negativeEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="750">
<div class="sizedToGridArea negativeEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="750"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
<div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInColumnDirection" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="750">
<div class="sizedToGridArea negativeNamedGridLineEndPositionStartSpanInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="750"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="150" data-expected-height="150">
<div class="sizedToGridArea negativeEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
<div class="sizedToGridArea negativeEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="450" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="1950" data-expected-height="150">
<div class="sizedToGridArea namedGridLineEndPositionStartNegativeInColumnDirection" data-offset-x="0" data-offset-y="0" data-expected-width="1950" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
<div class="grid" data-expected-width="550" data-expected-height="150">
<div class="sizedToGridArea namedGridLineEndPositionStartNegativeInRowDirection" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>
</body>
</html>