204 lines
6.8 KiB
HTML
204 lines
6.8 KiB
HTML
<!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 / -1;
|
|
grid-row: 1;
|
|
}
|
|
|
|
.negativeEndPositionStartSpanInRowDirection {
|
|
grid-column: 1;
|
|
grid-row: span 5 / -1;
|
|
}
|
|
|
|
.negativeNamedGridLineEndPositionStartSpanInColumnDirection {
|
|
grid-column: span 1 / 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>
|