commit 03c0bb9babfe8dc83d608a189d5bc5927e095964 parent 8dc97da852916cba738547313b684e6b24208712 Author: Celeste Pan <celestepan@microsoft.com> Date: Thu, 6 Nov 2025 21:32:12 +0000 Bug 1996949 [wpt PR 55731] - [Masonry] Add support for column|row-reverse item placement, a=testonly Automatic update from web-platform-tests [Masonry] Add support for column|row-reverse item placement This CL adds the ability to place items in the opposite of the default direction in column (right-to-left) and row (bottom-to-top), triggered by `column-reverse` or `row-reverse`. The style which triggers this reversed placement may change based on how https://github.com/w3c/csswg-drafts/issues/12803 resolves. There will be a follow-up change to support reverse placement in dense-packing. Bug: 343257585 Change-Id: I01a1f80d34da9672310e5ca40fa761ac43bc39c7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7043283 Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Celeste Pan <celestepan@microsoft.com> Reviewed-by: Alison Maher <almaher@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1538132} -- wpt-commits: 9caa2d95be9cb57919d589495f923c4440db220a wpt-pr: 55731 Diffstat:
12 files changed, 311 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(3, 50px); + gap: 10px; +} +</style> +<body> + <p>Test that masonry items with reverse auto placement and explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div style="background: lightgreen; height: 20px;">3</div> + <div style="background: lightskyblue; height: 20px;">2</div> + <div style="background: lavender; height: 20px;">1</div> + <div style="background: lavender; height: 20px;">5</div> + <div style="background: lightpink; grid-column: span 2; height: 20px;">4</div> + <div style="background: lightskyblue; height: 20px; grid-column: 3;">6</div> + <div style="background: lightgreen; height: 20px; grid-column: 2; grid-row: 3;">7</div> + <div style="background: lightpink; grid-column: 2 / span 2; height: 20px;">implicit</div> + <div style="background: lightpink; grid-column: 1 / span 2; height: 20px;">explicit</div> + <div style="background: lavender; height: 20px;">9</div> + <div style="background: lavender; height: 30px;">11</div> + <div style="background: lightskyblue; height: 20px;">10</div> + <div style="background: lightskyblue; height: 40px;">12</div> + <div style="background: lightgreen; height: 10px; transform: translateY(-10px);">14</div> + <div style="background: lightgreen; height: 50px; transform: translateY(-20px);">13</div> + <div style="background: lightskyblue; height: 40px;">15</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, 50px); + gap: 10px; + masonry-direction: column-reverse; +} +</style> +<body> + <p>Test that masonry items with reverse auto placement and explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div style="background: lavender; height: 20px;">1</div> + <div style="background: lightskyblue; height: 20px;">2</div> + <div style="background: lightgreen; height: 20px;">3</div> + <div style="background: lightpink; grid-column: span 2; height: 20px;">4</div> + <div style="background: lavender; height: 20px;">5</div> + <div style="background: lightskyblue; height: 20px;">6</div> + <div style="background: lightgreen; height: 20px;">7</div> + <div style="background: lightpink; grid-column: span 2; height: 20px;">implicit</div> + <div style="background: lightpink; grid-column: 1 / span 2; height: 20px;">explicit</div> + <div style="background: lavender; height: 20px;">9</div> + <div style="background: lightskyblue; height: 20px;">10</div> + <div style="background: lavender; height: 30px;">11</div> + <div style="background: lightskyblue; height: 40px;">12</div> + <div style="background: lightgreen; height: 50px;">13</div> + <div style="background: lightgreen; height: 10px;">14</div> + <div style="background: lightskyblue; height: 40px;">15</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, auto); + gap: 10px; + masonry-direction: column; +} +</style> +<body> + <p>Test that track sizing is performed correctly with auto-sized tracks in the reverse direction.</p> + <div class="masonry"> + <div style="background: lightgreen; width: min-content;">The cat still cannot be separated from milk</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lavender;">Some larger words in this sentence</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, auto); + gap: 10px; + masonry-direction: column-reverse; +} +</style> +<body> + <p>Test that track sizing is performed correctly with auto-sized tracks in the reverse direction.</p> + <div class="masonry"> + <div style="background: lavender;">Some larger words in this sentence</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lightgreen; width: min-content;">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-003-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, min-content); + gap: 10px; + direction: rtl; +} +</style> +<body> + <p>The CSS property `direction` is correctly applied on top of `masonry-direction`</p> + <div class="masonry"> + <div style="background: lightgreen; width: min-content;">The cat still cannot be separated from milk</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lavender;">Some larger words in this sentence</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-reverse-003.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-columns: repeat(3, min-content); + gap: 10px; + masonry-direction: column-reverse; + direction: rtl; +} +</style> +<body> + <p>The CSS property `direction` is correctly applied on top of `masonry-direction`</p> + <div class="masonry"> + <div style="background: lavender;">Some larger words in this sentence</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lightgreen; width: min-content;">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(3, 50px); + grid-template-columns: repeat(4, 20px) min-content min-content; + gap: 10px; + grid-auto-flow: column; +} +</style> +<body> + <p>Test that masonry items with reverse auto placement and explicit placement are correctly positioned within the grid axis.</p> + <div class="grid"> + <div style="background: lightgreen; width: 20px;">3</div> + <div style="background: lightskyblue; width: 20px;">2</div> + <div style="background: lavender; width: 20px;">1</div> + <div style="background: lavender; width: 20px;">5</div> + <div style="background: lightpink; grid-row: span 2; width: 20px;">4</div> + <div style="background: lightgreen; width: 20px; grid-row: 2;">7</div> + <div style="background: lightskyblue; width: 20px;">6</div> + <div style="background: lightpink; grid-row: 1 / span 2; width: 20px;">8</div> + <div style="background: lavender; width: 20px;">9</div> + <div style="background: lavender; width: 30px;">11</div> + <div style="background: lightskyblue; width: 20px;">10</div> + <div style="background: lightskyblue; width: 40px;">12</div> + <div style="background: lightgreen; width: 10px; transform: translateX(-10px);">14</div> + <div style="background: lightgreen; width: 50px; transform: translateX(-20px);">13</div> + <div style="background: lightskyblue; width: 40px; grid-row: 3;">15</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-rows: repeat(3, 50px); + gap: 10px; + masonry-direction: row-reverse; +} +</style> +<body> + <p>Test that masonry items with reverse auto placement and explicit placement are correctly positioned within the grid axis.</p> + <div class="masonry"> + <div style="background: lavender; width: 20px;">1</div> + <div style="background: lightskyblue; width: 20px;">2</div> + <div style="background: lightgreen; width: 20px;">3</div> + <div style="background: lightpink; grid-row: span 2; width: 20px;">4</div> + <div style="background: lavender; width: 20px;">5</div> + <div style="background: lightskyblue; width: 20px;">6</div> + <div style="background: lightgreen; width: 20px;">7</div> + <div style="background: lightpink; grid-row: 1 / span 2; width: 20px;">8</div> + <div style="background: lavender; width: 20px;">9</div> + <div style="background: lightskyblue; width: 20px;">10</div> + <div style="background: lavender; width: 30px;">11</div> + <div style="background: lightskyblue; width: 40px;">12</div> + <div style="background: lightgreen; width: 50px;">13</div> + <div style="background: lightgreen; width: 10px;">14</div> + <div style="background: lightskyblue; width: 40px;">15</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-002-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-002-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-rows: repeat(3, auto); + gap: 10px; + masonry-direction: row; +} +</style> +<body> + <p>Test that track sizing is performed correctly with auto-sized tracks in the reverse direction.</p> + <div class="masonry"> + <div style="background: lightgreen; width: min-content;">The cat still cannot be separated from milk</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lavender;">Some larger words in this sentence</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-002.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-002.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-rows: repeat(3, auto); + gap: 10px; + masonry-direction: row-reverse; +} +</style> +<body> + <p>Test that track sizing is performed correctly with auto-sized tracks in the reverse direction.</p> + <div class="masonry"> + <div style="background: lavender;">Some larger words in this sentence</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lightgreen; width: min-content;">The cat still cannot be separated from milk</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-003-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-003-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-rows: repeat(3, 50px); + masonry-direction: row; + direction: rtl; + gap: 10px; +} +</style> +<body> + <p>The CSS property `direction` is correctly applied on top of `masonry-direction`</p> + <div class="masonry"> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lightgreen; width: min-content;">milk</div> + <div style="background: lavender;">Some larger words in this sentence</div> + <div style="background: lavender;">Some larger words in this sentence</div> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-003.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-reverse-003.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.masonry { + display: masonry; + item-tolerance: 0; + grid-template-rows: repeat(3, 50px); + gap: 10px; + masonry-direction: row-reverse; + direction: rtl; +} +</style> +<body> + <p>The CSS property `direction` is correctly applied on top of `masonry-direction`</p> + <div class="masonry"> + <div style="background: lavender;">Some larger words in this sentence</div> + <div style="background: lightgreen; width: min-content;">milk</div> + <div style="background: lightskyblue;">The cat cannot be separated from milk</div> + <div style="background: lavender;">Some larger words in this sentence</div> + </div> +</body> +</html>