Skip to content

Commit fa5393b

Browse files
celestepanchromium-wpt-export-bot
celestepan
authored and
chromium-wpt-export-bot
committed
[Masonry] Don't move auto-placement cursor after placing explicitly placed items
We resolved in the CSSWG that we do not want to move the auto-placement cursor after placing explicitly-placed items [1]. This change implements that behavior and fixes a couple of test references that assumed the old behavior. For most of the tests, the changes involved explicitly placing non-important items in the test files, and for others, they involved updating the test references to match the expected behavior now that explicitly-placed items don't move the auto-placement cursor. [1] w3c/csswg-drafts#13987 (comment) Bug: 343257585, 542961411 Change-Id: I757b8fc68c0cf085f4041639a5b4ea40161b1bce Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8266931 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Celeste Pan <celestepan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1684322}
1 parent 19acabc commit fa5393b

17 files changed

Lines changed: 86 additions & 82 deletions

‎css/css-gaps/grid-lanes/column-gap-decorations-014-ref.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,12 @@
3232
<div>7</div>
3333
<div class="sp alt">8 (span 2)</div>
3434
</div>
35-
<div class="col-rule" style="left: 65px; top: 0; height: 206px;"></div>
36-
<div class="col-rule" style="left: 137px; top: 108px; height: 44px;"></div>
37-
<div class="col-rule" style="left: 209px; top: 0; height: 206px;"></div>
35+
<div class="col-rule" style="left: 65px; top: 0; height: 152px;"></div>
36+
<div class="col-rule" style="left: 209px; top: 0; height: 152px;"></div>
3837
<div class="row-rule" style="top: 47px; left: 0; width: 62px;"></div>
3938
<div class="row-rule" style="top: 47px; left: 72px; width: 62px;"></div>
4039
<div class="row-rule" style="top: 47px; left: 144px; width: 62px;"></div>
41-
<div class="row-rule" style="top: 101px; left: 72px; width: 62px;"></div>
42-
<div class="row-rule" style="top: 155px; left: 72px; width: 62px;"></div>
43-
<div class="row-rule" style="top: 155px; left: 144px; width: 62px;"></div>
4440
<div class="row-rule" style="top: 47px; left: 216px; width: 62px;"></div>
41+
<div class="row-rule" style="top: 101px; left: 0; width: 62px;"></div>
42+
<div class="row-rule" style="top: 101px; left: 72px; width: 62px;"></div>
43+
<div class="row-rule" style="top: 101px; left: 144px; width: 62px;"></div>

‎css/css-grid/grid-lanes/item-placement/dense-packing/column-fill-reverse-dense-packing-definite-size-001-ref.html‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -25,34 +25,34 @@
2525
</head>
2626
<body>
2727
<div class="container">
28-
<!-- Column 1: block, spanner, block, spanner -->
28+
<!-- Column 1: block, spanner, Item 6, spanner -->
2929
<div class="column">
3030
<div style="background-color: lightcoral; height: 100px;">block</div>
3131
<div style="background-color: lightcoral; height: 10px; width: 430px;">spanner</div>
32-
<div style="background-color: lightcoral; height: 100px;">block</div>
32+
<div style="background-color: lightblue; height: 100px;">Item 6</div>
3333
<div style="background-color: lightcoral; height: 10px; width: 430px;">spanner</div>
3434
</div>
35-
<!-- Column 2: Item 1, Item 5, Item 8, [spanner gap], Item 9, Item 10 -->
35+
<!-- Column 2: Item 1, Item 5, Item 8, [spanner gap], block -->
3636
<div class="column">
3737
<div style="background-color: lightgreen; height: 30px;">Item 1</div>
3838
<div style="background-color: lightgreen; height: 30px;">Item 5</div>
3939
<div style="background-color: lightblue; height: 15px;">Item 8</div>
40-
<div style="height: 10px;"></div><!-- spanner space -->
41-
<div style="background-color: lightblue; height: 40px; margin-bottom: 5px;">Item 9</div>
42-
<div style="background-color: steelblue; height: 45px;">Item 10</div>
40+
<div style="height: 15px;"></div><!-- spanner space -->
41+
<div style="background-color: lightcoral; height: 100px;">block</div>
4342
</div>
4443
<!-- Column 3: Item 2, [spanner gap], Item 4 -->
4544
<div class="column">
4645
<div style="background-color: lightblue; height: 100px;">Item 2</div>
4746
<div style="height: 10px;"></div><!-- spanner space -->
4847
<div style="background-color: lightblue; height: 90px;">Item 4</div>
4948
</div>
50-
<!-- Column 4: Item 3, [spanner gap], Item 7, Item 6, [spanner gap] -->
49+
<!-- Column 4: Item 3, Item 7, [spanner gap], Item 9, Item 10, [spanner gap] -->
5150
<div class="column">
5251
<div style="background-color: lightgreen; height: 30px;">Item 3</div>
5352
<div style="background-color: lightgreen; height: 30px;">Item 7</div>
54-
<div style="background-color: lightblue; height: 100px; margin-bottom: 50px;">Item 6</div>
55-
<div style="height: 20px;"></div><!-- spanner space -->
53+
<div style="background-color: lightblue; height: 40px; margin-bottom: 50px;">Item 9</div>
54+
<div style="background-color: steelblue; height: 45px;">Item 10</div>
55+
<div style="height: 15px;"></div><!-- spanner space -->
5656
</div>
5757
</div>
5858
</body>

‎css/css-grid/grid-lanes/item-placement/dense-packing/column-fill-reverse-dense-packing-definite-size-001.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@
3838
<div style="grid-column: span 4; background-color: lightcoral; height: 10px;">spanner</div>
3939
<div style="background-color: lightgreen; height: 30px;">Item 7</div>
4040
<div style="background-color: lightblue; height: 15px;">Item 8</div>
41-
<div style="background-color: lightblue; grid-column: 2; height: 40px;">Item 9</div>
42-
<div style="background-color: steelblue; grid-column: 2; height: 45px;">Item 10</div>
41+
<div style="background-color: lightblue; grid-column: 4; height: 40px;">Item 9</div>
42+
<div style="background-color: steelblue; grid-column: 4; height: 45px;">Item 10</div>
4343
</div>
4444
</body>
4545
</html>

‎css/css-grid/grid-lanes/item-placement/dense-packing/column-fill-reverse-dense-packing-indefinite-size-001-ref.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,34 @@
2424
</head>
2525
<body>
2626
<div class="container">
27-
<!-- Column 1: block, spanner, block2, spanner -->
27+
<!-- Column 1: block, spanner, Item 6, spanner -->
2828
<div class="col">
2929
<div style="background-color: lightcoral; height: 100px;">block</div>
3030
<div style="background-color: lightcoral; height: 10px; width: 430px;">spanner</div>
31-
<div style="background-color: lightcoral; height: 100px;">block</div>
31+
<div style="background-color: lightblue; height: 100px;">Item 6</div>
3232
<div style="background-color: lightcoral; height: 10px; width: 430px;">spanner</div>
3333
</div>
34-
<!-- Column 2: Item 1, Item 5, Item 8, [spanner gap], Item 9, Item 10 -->
34+
<!-- Column 2: Item 1, Item 5, Item 8, [spanner gap], block -->
3535
<div class="col">
3636
<div style="background-color: lightgreen; height: 30px;">Item 1</div>
3737
<div style="background-color: lightgreen; height: 30px;">Item 5</div>
3838
<div style="background-color: lightblue; height: 15px;">Item 8</div>
39-
<div style="height: 10px;"></div><!-- spanner space -->
40-
<div style="background-color: lightblue; height: 40px; margin-bottom: 5px;">Item 9</div>
41-
<div style="background-color: steelblue; height: 45px;">Item 10</div>
39+
<div style="height: 15px;"></div><!-- spanner space -->
40+
<div style="background-color: lightcoral; height: 100px;">block</div>
4241
</div>
4342
<!-- Column 3: Item 2, [spanner gap], Item 4 -->
4443
<div class="col">
4544
<div style="background-color: lightblue; height: 100px;">Item 2</div>
4645
<div style="height: 10px;"></div><!-- spanner space -->
4746
<div style="background-color: lightblue; height: 90px;">Item 4</div>
4847
</div>
49-
<!-- Column 4: Item 3, Item 7, [spanner gap], Item 6 -->
48+
<!-- Column 4: Item 3, Item 7, [spanner gap], Item 9, Item 10, [spanner gap] -->
5049
<div class="col">
5150
<div style="background-color: lightgreen; height: 30px;">Item 3</div>
5251
<div style="background-color: lightgreen; height: 30px;">Item 7</div>
53-
<div style="background-color: lightblue; height: 100px; margin-bottom: 50px;">Item 6</div>
52+
<div style="background-color: lightblue; height: 40px; margin-bottom: 50px;">Item 9</div>
53+
<div style="background-color: steelblue; height: 45px;">Item 10</div>
54+
<div style="height: 15px;"></div><!-- spanner space -->
5455
</div>
5556
</div>
5657
</body>

‎css/css-grid/grid-lanes/item-placement/dense-packing/column-fill-reverse-dense-packing-indefinite-size-001.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
<div style="grid-column: span 4; background-color: lightcoral; height: 10px;">spanner</div>
3838
<div style="background-color: lightgreen; height: 30px;">Item 7</div>
3939
<div style="background-color: lightblue; height: 15px;">Item 8</div>
40-
<div style="background-color: lightblue; grid-column: 2; height: 40px;">Item 9</div>
41-
<div style="background-color: steelblue; grid-column: 2; height: 45px;">Item 10</div>
40+
<div style="background-color: lightblue; grid-column: 4; height: 40px;">Item 9</div>
41+
<div style="background-color: steelblue; grid-column: 4; height: 45px;">Item 10</div>
4242
</div>
4343
</body>
4444
</html>

‎css/css-grid/grid-lanes/item-placement/dense-packing/row-fill-reverse-dense-packing-definite-size-001-ref.html‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,34 @@
2424
</head>
2525
<body>
2626
<div class="container">
27-
<!-- Row 1: block, spanner, block2, spanner -->
27+
<!-- Row 1: block, spanner, Item 6, spanner -->
2828
<div class="row">
2929
<div style="background-color: lightcoral; width: 100px;">block</div>
3030
<div style="background-color: lightcoral; width: 10px; height: 430px;">spanner</div>
31-
<div style="background-color: lightcoral; width: 100px;">block</div>
32-
<div style="background-color: lightcoral; width: 10px; height: 430px;">spanner</div>
31+
<div style="background-color: lightblue; width: 100px;">Item 6</div>
32+
<div style="background-color: lightcoral; width: 10px; height: 430px; z-index: 1;">spanner</div>
3333
</div>
34-
<!-- Row 2: Item 1, Item 5, Item 8, [spanner gap], Item 9, Item 10 -->
34+
<!-- Row 2: Item 1, Item 5, Item 8, [spanner gap], block -->
3535
<div class="row">
3636
<div style="background-color: lightgreen; width: 30px;">Item 1</div>
3737
<div style="background-color: lightgreen; width: 30px;">Item 5</div>
3838
<div style="background-color: lightblue; width: 15px;">Item 8</div>
39-
<div style="width: 10px;"></div><!-- spanner space -->
40-
<div style="background-color: lightblue; width: 40px; margin-right: 5px;">Item 9</div>
41-
<div style="background-color: steelblue; width: 45px;">Item 10</div>
39+
<div style="width: 15px;"></div><!-- spanner space -->
40+
<div style="background-color: lightcoral; width: 100px;">block</div>
4241
</div>
4342
<!-- Row 3: Item 2, [spanner gap], Item 4 -->
4443
<div class="row">
4544
<div style="background-color: lightblue; width: 100px;">Item 2</div>
4645
<div style="width: 10px;"></div><!-- spanner space -->
4746
<div style="background-color: lightblue; width: 90px;">Item 4</div>
4847
</div>
49-
<!-- Row 4: Item 3, Item 7, [spanner gap], Item 6 -->
48+
<!-- Row 4: Item 3, Item 7, [spanner gap], Item 9, Item 10, [spanner gap] -->
5049
<div class="row">
5150
<div style="background-color: lightgreen; width: 30px;">Item 3</div>
5251
<div style="background-color: lightgreen; width: 30px;">Item 7</div>
53-
<div style="background-color: lightblue; width: 100px; margin-right: 50px;">Item 6</div>
52+
<div style="background-color: lightblue; width: 40px; margin-right: 50px;">Item 9</div>
53+
<div style="background-color: steelblue; width: 45px;">Item 10</div>
54+
<div style="width: 15px;"></div><!-- spanner space -->
5455
</div>
5556
</div>
5657
</body>

‎css/css-grid/grid-lanes/item-placement/dense-packing/row-fill-reverse-dense-packing-definite-size-001.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
<div style="grid-row: span 4; background-color: lightcoral; width: 10px;">spanner</div>
3838
<div style="background-color: lightgreen; width: 30px;">Item 7</div>
3939
<div style="background-color: lightblue; width: 15px;">Item 8</div>
40-
<div style="background-color: lightblue; grid-row: 2; width: 40px;">Item 9</div>
41-
<div style="background-color: steelblue; grid-row: 2; width: 45px;">Item 10</div>
40+
<div style="background-color: lightblue; grid-row: 4; width: 40px;">Item 9</div>
41+
<div style="background-color: steelblue; grid-row: 4; width: 45px;">Item 10</div>
4242
</div>
4343
</body>
4444
</html>

‎css/css-grid/grid-lanes/item-placement/dense-packing/row-fill-reverse-dense-packing-indefinite-size-001-ref.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,33 +24,34 @@
2424
</head>
2525
<body>
2626
<div class="container">
27-
<!-- Row 1: block, spanner, block2, spanner -->
27+
<!-- Row 1: block, spanner, Item 6, spanner -->
2828
<div class="row">
2929
<div style="background-color: lightcoral; width: 100px;">block</div>
3030
<div style="background-color: lightcoral; width: 10px; height: 430px;"></div>
31-
<div style="background-color: lightcoral; width: 100px;">block</div>
31+
<div style="background-color: lightblue; width: 100px;">Item 6</div>
3232
<div style="background-color: lightcoral; width: 10px; height: 430px;"></div>
3333
</div>
34-
<!-- Row 2: Item 1, Item 5, Item 8, [spanner gap], Item 9, Item 10 -->
34+
<!-- Row 2: Item 1, Item 5, Item 8, [spanner gap], block -->
3535
<div class="row">
3636
<div style="background-color: lightgreen; width: 30px;">Item 1</div>
3737
<div style="background-color: lightgreen; width: 30px;">Item 5</div>
3838
<div style="background-color: lightblue; width: 15px;">Item 8</div>
39-
<div style="width: 10px;"></div><!-- spanner space -->
40-
<div style="background-color: lightblue; width: 40px; margin-right: 5px;">Item 9</div>
41-
<div style="background-color: steelblue; width: 45px;">Item 10</div>
39+
<div style="width: 15px;"></div><!-- spanner space -->
40+
<div style="background-color: lightcoral; width: 100px;">block</div>
4241
</div>
4342
<!-- Row 3: Item 2, [spanner gap], Item 4 -->
4443
<div class="row">
4544
<div style="background-color: lightblue; width: 100px;">Item 2</div>
4645
<div style="width: 10px;"></div><!-- spanner space -->
4746
<div style="background-color: lightblue; width: 90px;">Item 4</div>
4847
</div>
49-
<!-- Row 4: Item 3, Item 7, [spanner gap], Item 6 -->
48+
<!-- Row 4: Item 3, Item 7, [spanner gap], Item 9, Item 10, [spanner gap] -->
5049
<div class="row">
5150
<div style="background-color: lightgreen; width: 30px;">Item 3</div>
5251
<div style="background-color: lightgreen; width: 30px;">Item 7</div>
53-
<div style="background-color: lightblue; width: 100px; margin-right: 50px;">Item 6</div>
52+
<div style="background-color: lightblue; width: 40px; margin-right: 50px;">Item 9</div>
53+
<div style="background-color: steelblue; width: 45px;">Item 10</div>
54+
<div style="width: 15px;"></div><!-- spanner space -->
5455
</div>
5556
</div>
5657
</body>

‎css/css-grid/grid-lanes/item-placement/dense-packing/row-fill-reverse-dense-packing-indefinite-size-001.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
<div style="grid-row: span 4; background-color: lightcoral; width: 10px;"></div>
3737
<div style="background-color: lightgreen; width: 30px;">Item 7</div>
3838
<div style="background-color: lightblue; width: 15px;">Item 8</div>
39-
<div style="background-color: lightblue; grid-row: 2; width: 40px;">Item 9</div>
40-
<div style="background-color: steelblue; grid-row: 2; width: 45px;">Item 10</div>
39+
<div style="background-color: lightblue; grid-row: 4; width: 40px;">Item 9</div>
40+
<div style="background-color: steelblue; grid-row: 4; width: 45px;">Item 10</div>
4141
</div>
4242
</body>
4343
</html>

‎css/css-grid/grid-lanes/item-placement/grid-lanes-item-placement-002-ref.html‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,11 @@
3535

3636
<grid>
3737
<item style="grid-column:1/-1">1</item>
38-
<item>2</item>
39-
<x></x>
40-
<item>3</item>
41-
<item>5</item>
42-
<item style="grid-column:1/-2">4</item>
43-
<item>6</item>
38+
<item style="grid-column:1; grid-row:2">2</item>
39+
<item style="grid-column:3; grid-row:2">3</item>
40+
<item style="grid-column:2/-1; grid-row:3">4</item>
41+
<item style="grid-column:1; grid-row:3">5</item>
42+
<item style="grid-column:2; grid-row:4">6</item>
4443
</grid>
4544

4645
</body>

0 commit comments

Comments
 (0)