Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-grid/placement/grid-placement-negative-position-resolution-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="assert" content="Negative line numbers, named lines (with and without an integer) and spans resolve correctly, and placements outside the explicit grid create implicit tracks before or after it.">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/fonts/ahem.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<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>
<body onload="document.fonts.ready.then(() => { 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>