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-negative-line-placement-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: placement with negative grid line numbers</title>
<link rel="author" title="Sammy Gill" href="mailto:sammy.gill@apple.com">
<meta name="assert" content="A negative grid line counts backwards from the end of the explicit grid, so -1 is its last line. The two edges of a placement may name the same track through lines of different signs. A negative line that counts past the start edge of the explicit grid generates leading implicit tracks, which take their sizes from grid-auto-columns/grid-auto-rows applied backwards from the explicit grid.">
<style>
.grid {
display: grid;
position: relative;
grid-auto-columns: 30px;
grid-auto-rows: 20px;
/* Sizes the grid to its tracks, so tracks added before the explicit grid are observable. */
width: max-content;
}
.oneColumn { grid-template-columns: 50px; }
.twoColumns { grid-template-columns: 50px 50px; }
.threeColumns { grid-template-columns: 50px 50px 50px; }
.oneRow { grid-template-rows: 40px; }
.twoRows { grid-template-rows: 40px 40px; }
.cyclingColumns { grid-auto-columns: 30px 10px; }
.columnGap { column-gap: 10px; }
.grid > div { background: silver; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<body onload="checkLayout('.grid')">
<div id="log"></div>
<!-- Negative lines naming tracks inside the explicit grid: on three columns, -4 is line 1 and -1 is line 4. -->
<div class="grid threeColumns twoRows">
<div style="grid-column: -4 / -3; grid-row: -3 / -2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">i1</div>
<div style="grid-column: -3 / -2; grid-row: -3 / -2" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="40">i2</div>
<div style="grid-column: -2 / -1; grid-row: -2 / -1" data-offset-x="100" data-offset-y="40" data-expected-width="50" data-expected-height="40">i3</div>
</div>
<!-- The two edges may name the same track through lines of different signs. -->
<div class="grid threeColumns twoRows">
<div style="grid-column: 3 / -1; grid-row: 1 / -2" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="40">i1</div>
<div style="grid-column: -4 / 2; grid-row: -3 / 2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">i2</div>
</div>
<!-- A negative row start with an auto row end still locks the item to that row, so it is placed
before the item that is auto-positioned in both axes. -->
<div class="grid threeColumns twoRows">
<div style="grid-row: -2" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">i1</div>
<div data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">i2</div>
</div>
<!-- A line that counts one past the start edge adds a single leading implicit column, sized by
grid-auto-columns, which shifts the explicit columns over by its width. -->
<div class="grid threeColumns oneRow">
<div style="grid-column: -5 / -4; grid-row: 1 / 2" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="40">i1</div>
<div style="grid-column: 1 / 2; grid-row: 1 / 2" data-offset-x="30" data-offset-y="0" data-expected-width="50" data-expected-height="40">i2</div>
<div style="grid-column: 3 / 4; grid-row: 1 / 2" data-offset-x="130" data-offset-y="0" data-expected-width="50" data-expected-height="40">i3</div>
</div>
<!-- Two leading implicit columns take grid-auto-columns backwards from the explicit grid: the
track nearest the explicit grid gets the last size (10px) and the one before it gets 30px. -->
<div class="grid oneColumn oneRow cyclingColumns">
<div style="grid-column: -4 / -3; grid-row: 1 / 2" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="40">i1</div>
<div style="grid-column: -3 / -2; grid-row: 1 / 2" data-offset-x="30" data-offset-y="0" data-expected-width="10" data-expected-height="40">i2</div>
<div style="grid-column: 1 / 2; grid-row: 1 / 2" data-offset-x="40" data-offset-y="0" data-expected-width="50" data-expected-height="40">i3</div>
</div>
<!-- The same thing in the block axis: a leading implicit row sized by grid-auto-rows. -->
<div class="grid threeColumns oneRow">
<div style="grid-row: -3 / -2; grid-column: 1 / 2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">i1</div>
<div style="grid-row: 1 / 2; grid-column: 1 / 2" data-offset-x="0" data-offset-y="20" data-expected-width="50" data-expected-height="40">i2</div>
</div>
<!-- A leading implicit column is separated from the explicit grid by the column gap. -->
<div class="grid twoColumns oneRow columnGap">
<div style="grid-column: -4 / -3; grid-row: 1 / 2" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="40">i1</div>
<div style="grid-column: 1 / 2; grid-row: 1 / 2" data-offset-x="40" data-offset-y="0" data-expected-width="50" data-expected-height="40">i2</div>
<div style="grid-column: 2 / 3; grid-row: 1 / 2" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="40">i3</div>
</div>
</body>