commit 39f2dd2772148a0d670da6d6f42136ee3d59aa31 parent e26eaecf3958b8685d1fcaa0bd4a86826722bbea Author: Celeste Pan <celestepan@microsoft.com> Date: Thu, 27 Nov 2025 15:28:30 +0000 Bug 2002712 [wpt PR 56314] - [Masonry] Support column|row-reverse for dense-packing, a=testonly Automatic update from web-platform-tests [Masonry] Support column|row-reverse for dense-packing This change adds support for reverse item placement when dense-packing is enabled. This change fixes a previously existing bug in `RunningPositionsIterator` constructor where `end_index_` was not correctly calculated. This was caught by multiple fuzzer tests as well (listed in the Bug section), and tests were added in this change to cover for this case. The optimization in `GetMaxPositionsForAllTracks` where a vector `span_size` smaller than `running_positions_` is return has been removed to allow for cleaner more readable code in `RunningPositionsIterator`. The optimization should only be significant when placing an item with a very large span size. Some changes were made to `RunningPositionsIterator` as we want to make it usable for both the regular reverse placement case and the dense-packing reverse placement case: 1) The `RunningPositionsIterator` constructor has been updated to take in a `max_index_` (highest possible index we can access safely) value, as opposed to calculating the value within the class, given that the calculations of what the `max_index_` would be vary across different usages of the iterator. 2) The pre-increment operator for `RunningPositionsIterator` was removed, and we now use a post-increment operator, which is needed if we wish to use `wtf_size_t` (unsigned values) for our indices, maintain an infinite looping capability, and check if the iterator has returned to its starting index. Bug: 343257585, 458993338, 463029154 Change-Id: If68752ca4cf7125a286d31c0578754e8dad02a96 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7092762 Reviewed-by: Alison Maher <almaher@microsoft.com> Commit-Queue: Celeste Pan <celestepan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1550779} -- wpt-commits: c475581acd4cd11712f522079fdc362cf0a7959a wpt-pr: 56314 Diffstat:
24 files changed, 792 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-001-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-columns: repeat(4, 50px) 15px; + gap: 10px; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that grid-lanes items with reverse auto placement and explicit placement are correctly positioned within the grid axis during dense-packing.</p> +<div class="grid"> + <div style="background: lavender; height: 60px; grid-column: 3;"> + 1 + </div> + <div style="background: lightgreen; height: 60px; grid-column: 1;"> + 2 + </div> + <div style="background: lightpink; grid-column: 2 / span 4; height: 10px;"> + 3 + </div> + <div style="grid-column: 4;"> + <div style="background: yellow; height: 20px;"> + 4 + </div> + <div style="background: yellow; height: 10px; margin-top: 10px; grid-column: 4;"> + 5 + </div> + </div> + <div style="background: yellow; height: 10px; grid-column: 2;"> + 6 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-columns: repeat(4, 50px) 15px; + gap: 10px; + grid-lanes-direction: column-reverse; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that grid-lanes items with reverse auto placement and explicit placement are correctly positioned within the grid axis during dense-packing.</p> +<div class="grid-lanes"> + <div style="background: lavender; height: 60px; grid-column: 3;"> + 1 + </div> + <div style="background: lightgreen; height: 60px; grid-column: 1;"> + 2 + </div> + <div style="background: lightpink; grid-column: span 4; height: 10px;"> + 3 + </div> + <!--Item 4 is densely packed into start-most gap of the same layout size as auto-placement without dense-packing.--> + <div style="background: yellow; height: 20px;"> + 4 + </div> + <!--Item 5 is densely-packed into a specified track.--> + <div style="background: yellow; height: 10px; grid-column: 4;"> + 5 + </div> + <!--Item 6 is densely-packed into highest, but not earliest, found gap.--> + <div style="background: yellow; height: 10px;"> + 6 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-001-ref.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-template-columns: repeat(4, 50px); +} +</style> +<body> +<p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> +<div class="grid"> + <div style="background: lightskyblue; height: 70px; grid-column: 4;" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: 1;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 1 / span 2; transform: translateY(-50px);"> + 3 + </div> + <div style="background: lightsteelblue; height: 20px; grid-column: span 4; transform: translateY(-20px);" > + 4 + </div> + <div style="background: yellow; height: 10px; grid-column: span 2;" > + 5 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-001.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-multi-span-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: column-reverse; +} +</style> +<body> +<p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> +<div class="grid-lanes" style="grid-template-columns: repeat(4, 50px);"> + <div style="background: lightskyblue; height: 70px;" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: 1;" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 1 / span 2;"> + 3 + </div> + <div style="background: lightsteelblue; height: 20px; grid-column: span 4;" > + 4 + </div> + <div style="background: yellow; height: 10px; grid-column: span 2;" > + 5 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-002-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-template-columns: 10px 10px 20px 15px 5px; +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks.</p> +<div class="grid"> + <div style="background: yellow; height: 20px; width: 20px; grid-column: 4" > + 4 + </div> + <div style="background: lightskyblue; height: 20px; grid-column: 3" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: span 5" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: 3 / span 3;"> + 3 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-002.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-multi-span-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: column-reverse; + grid-template-columns: 10px 10px 20px 15px 5px; +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks.</p> +<div class="grid-lanes"> + <div style="background: lightskyblue; height: 20px; grid-column: 3" > + 1 + </div> + <div style="background: lightblue; height: 20px; grid-column: span 5" > + 2 + </div> + <div style="background: darkblue; height: 20px; grid-column: span 3;"> + 3 + </div> + <div style="background: yellow; height: 20px; grid-column: span 2;" > + 4 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-003-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-template-columns: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items follows the grid-lanes dense packing algorithm.</p> +<div class="grid"> + <div style="background: brown; height: 80px; grid-column: 5;"></div> + <div style="background: brown; height: 60px; grid-column: 4;"></div> + <div style="background: brown; height: 40px; grid-column: 3;"></div> + <div style="background: brown; height: 30px; grid-column: 2;"></div> + <div style="background: brown; height: 20px;"></div> + <div style="background: brown; height: 20px; grid-column: span 5;"></div> + <div style="background: pink; height: 30px; grid-column: 2 / span 4;"> + Item that should not end up in gap. + </div> + <div style="background: yellow; height: 20px; grid-column: span 4; transform: translateY(-70px);"> + Item that should end up in gap. + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-003.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-003.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-multi-span-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: column-reverse; + grid-template-columns: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items follows the grid-lanes dense packing algorithm.</p> +<div class="grid-lanes"> + <div style="background: brown; height: 80px;"></div> + <div style="background: brown; height: 60px;"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 30px;"></div> + <div style="background: brown; height: 20px;"></div> + <div style="background: brown; height: 20px; grid-column: span 5;"></div> + <div style="background: pink; height: 30px; grid-column: span 4;"> + Item that should not end up in gap. + </div> + <div style="background: yellow; height: 20px; grid-column: span 4;"> + Item that should end up in gap. + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-004-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-004-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-template-columns: repeat(4, 50px); width: 170px; +} +</style> +<body> +<p>Ensure that dense-packing correctly iterates through all possible track openings to find an opening span. Item that should be placed into opening is yellow.</p> +<div class="grid""> + <div style="background: aquamarine; height: 60px; grid-column: 4;" > + 1 + </div> + <div style="background: blue; height: 40px; grid-column: 3;" > + 2 + </div> + <div style="background: blueviolet; height: 20px; grid-column: 2;"> + 3 + </div> + <div style="background: lightsteelblue; height: 60px; grid-column: 1;"> + 6 + </div> + <div style="background: lightblue; height: 10px; grid-column: 3 / span 2;"> + 4 + </div> + <div style="background: lightskyblue; grid-column: 1; height: 30px; grid-column: 4;"> + 5 + </div> + <div style="background: aqua; height: 20px; grid-column: span 4;"> + 7 + </div> + <div style="background: yellow; height: 10px; grid-column: span 3;"> + 8 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-004.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-multi-span-004-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: column-reverse; + grid-template-columns: repeat(4, 50px); + width: 170px; +} +</style> +<body> +<p>Ensure that dense-packing correctly iterates through all possible track openings to find an opening span. Item that should be placed into opening is yellow.</p> +<div class="grid-lanes"> + <div style="background: aquamarine; height: 60px;" > + 1 + </div> + <div style="background: blue; height: 40px;" > + 2 + </div> + <div style="background: blueviolet; height: 20px;"> + 3 + </div> + <div style="background: lightblue; height: 10px; grid-column: 3 / span 2;"> + 4 + </div> + <div style="background: lightskyblue; grid-column: 4; height: 30px;"> + 5 + </div> + <div style="background: lightsteelblue; height: 60px;"> + 6 + </div> + <div style="background: aqua; height: 20px; grid-column: span 4;"> + 7 + </div> + <div style="background: yellow; height: 10px; grid-column: span 3;"> + 8 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-005-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-005-ref.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-template-columns: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing in grid-lanes properly handles "split" track openings.</p> +<div class="grid"> + <div style="background: brown; height: 80px; grid-column: 5;"></div> + <div style="background: brown; height: 20px; grid-column: 3 / span 2"></div> + <div style="background: brown; height: 40px; grid-column: 2;"></div> + <div style="background: brown; height: 100px; grid-column: 1;"></div> + <div style="background: brown; height: 10px; grid-column: span 5;"></div> + <div style="background: pink; height: 10px; grid-column: 2 / span 4; transform: translateY(-30px);"></div> + <div style="background: lightgreen; height: 10px; grid-column: 2 / span 2; transform: translate(50px, -100px);"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-005.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/column-reverse-dense-packing-multi-span-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="column-reverse-dense-packing-multi-span-005-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: column-reverse; + grid-template-columns: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing in grid-lanes properly handles "split" track openings.</p> +<div class="grid-lanes"> + <div style="background: brown; height: 80px;"></div> + <div style="background: brown; height: 20px; grid-column: span 2"></div> + <div style="background: brown; height: 40px;"></div> + <div style="background: brown; height: 100px;"></div> + <div style="background: brown; height: 10px; grid-column: span 5;"></div> + <div style="background: pink; height: 10px; grid-column: span 4;"></div> + <div style="background: lightgreen; height: 10px; grid-column: span 2;"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-template-rows: repeat(4, 50px) 15px; + grid-template-columns: repeat(2, min-content); + gap: 10px; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that grid-lanes items with reverse auto placement and explicit placement are correctly positioned within the grid axis during dense-packing.</p> +<div class="grid"> + <div style="background: lavender; width: 60px; grid-row: 3;"> + 1 + </div> + <div style="background: lightgreen; width: 60px; grid-row: 1;"> + 2 + </div> + <div style="background: lightpink; grid-row: 2 / span 4; width: 10px;"> + 3 + </div> + <div style="grid-row: 4;"> + <div style="display: flex; flex-direction: row; height: 100%;"> + <div style="background: yellow; width: 20px;"> + 4 + </div> + <div style="background: yellow; width: 10px; margin-left: 10px; grid-row: 4;"> + 5 + </div> + </div> + </div> + <div style="background: yellow; width: 10px; grid-row: 2;"> + 6 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-001.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-dense-packing-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-template-rows: repeat(4, 50px) 15px; + gap: 10px; + grid-lanes-direction: row-reverse; + grid-auto-flow: dense; +} +</style> +<body> +<p>Test that grid-lanes items with reverse auto placement and explicit placement are correctly positioned within the grid axis during dense-packing.</p> +<div class="grid-lanes"> + <div style="background: lavender; width: 60px; grid-row: 3;"> + 1 + </div> + <div style="background: lightgreen; width: 60px; grid-row: 1;"> + 2 + </div> + <div style="background: lightpink; grid-row: span 4; width: 10px;"> + 3 + </div> + <!--Item 4 is densely packed into start-most gap of the same layout size as auto-placement without dense-packing.--> + <div style="background: yellow; width: 20px;"> + 4 + </div> + <!--Item 5 is densely-packed into a specified track.--> + <div style="background: yellow; width: 10px; grid-row: 4;"> + 5 + </div> + <!--Item 6 is densely-packed into highest, but not earliest, found gap.--> + <div style="background: yellow; width: 10px;"> + 6 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-auto-columns: min-content; + grid-template-rows: repeat(4, 50px); +} +</style> +<body> +<p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> +<div class="grid"> + <div style="background: lightskyblue; width: 70px; grid-row: 4;" > + 1 + </div> + <div style="background: lightblue; width: 20px; grid-row: 1;" > + 2 + </div> + <div style="background: darkblue; width: 20px; grid-row: 1 / span 2; transform: translateX(-50px);"> + 3 + </div> + <div style="background: lightsteelblue; width: 20px; grid-row: 1 / span 4; transform: translateX(-20px);" > + 4 + </div> + <div style="background: yellow; width: 10px; grid-row: 2 / span 2;" > + 5 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-001.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-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-dense-packing-multi-span-001-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: row-reverse; + grid-template-rows: repeat(4, 50px); +} +</style> +<body> +<p>Ensure that dense-packing places multi-spanning item into highest eligible track opening. The yellow item should be placed in track opening.</p> +<div class="grid-lanes"> + <div style="background: lightskyblue; width: 70px;"> + 1 + </div> + <div style="background: lightblue; width: 20px; grid-row: 1;"> + 2 + </div> + <div style="background: darkblue; width: 20px; grid-row: 1 / span 2;"> + 3 + </div> + <div style="background: lightsteelblue; width: 20px; grid-row: span 4;"> + 4 + </div> + <div style="background: yellow; width: 10px; grid-row: span 2;"> + 5 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-002-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-auto-columns: min-content; + grid-template-rows: 10px 10px 20px 15px 5px; +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks.</p> +<div class="grid"> + <div style="background: lightskyblue; width: 20px; grid-row: 3" > + 1 + </div> + <div style="background: yellow; width: 20px; width: 20px; grid-row: 4 / span 2;" > + 4 + </div> + <div style="background: lightblue; width: 20px; grid-row: 1 / span 5" > + 2 + </div> + <div style="background: darkblue; width: 20px; grid-row: 3 / span 3;"> + 3 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-002.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-002.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-dense-packing-multi-span-002-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: row-reverse; + grid-template-rows: 10px 10px 20px 15px 5px; +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items are placed into tracks with the same used size and the same number of tracks.</p> +<div class="grid-lanes"> + <div style="background: lightskyblue; width: 20px; grid-row: 3"> + 1 + </div> + <div style="background: lightblue; width: 20px; grid-row: span 5"> + 2 + </div> + <div style="background: darkblue; width: 20px; grid-row: span 3;"> + 3 + </div> + <div style="background: yellow; width: 20px; grid-row: span 2;"> + 4 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-003-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-003-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-auto-columns: min-content; + grid-template-rows: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items follows the grid-lanes dense packing algorithm.</p> +<div class="grid"> + <div style="background: brown; width: 80px; grid-row: 5;"></div> + <div style="background: brown; width: 60px; grid-row: 4;"></div> + <div style="background: brown; width: 40px; grid-row: 3;"></div> + <div style="background: brown; width: 30px; grid-row: 2;"></div> + <div style="background: brown; width: 20px;"></div> + <div style="background: yellow; width: 20px; grid-row: 1 / span 4; transform: translateX(-20px);"></div> + <div style="background: brown; width: 20px; grid-row: 1 / span 5; transform: translateX(-20px);"></div> + <div style="background: pink; width: 30px; grid-row: 2 / span 4; transform: translateX(-20px);"> + Item that should not end up in gap. + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-003.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-dense-packing-multi-span-003-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: row-reverse; + grid-template-rows: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing with multi-span items follows the grid-lanes dense packing algorithm.</p> +<div class="grid-lanes"> + <div style="background: brown; width: 80px;"></div> + <div style="background: brown; width: 60px;"></div> + <div style="background: brown; width: 40px;"></div> + <div style="background: brown; width: 30px;"></div> + <div style="background: brown; width: 20px;"></div> + <div style="background: brown; width: 20px; grid-row: span 5;"></div> + <div style="background: pink; width: 30px; grid-row: span 4;"> + Item that should not end up in gap. + </div> + <div name="item_that_should_end_up_in_gap" style="background: yellow; width: 20px; grid-row: span 4;"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-004-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-004-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-auto-columns: min-content; + grid-template-rows: repeat(4, 50px); + width: 170px; +} +</style> +<body> +<p>Ensure that dense-packing correctly iterates through all possible track openings to find an opening span. Item that should be placed into opening is yellow.</p> +<div class="grid"> + <div style="background: aquamarine; width: 60px; grid-row: 4;" > + 1 + </div> + <div style="background: blue; width: 40px; grid-row: 3;" > + 2 + </div> + <div style="background: blueviolet; width: 20px; grid-row: 2;"> + 3 + </div> + <div style="background: lightsteelblue; width: 60px; grid-row: 1;"> + 6 + </div> + <div style="background: lightblue; width: 10px; grid-row: 3 / span 2;"> + 4 + </div> + <div style="background: lightskyblue; grid-row: 1; width: 30px; grid-row: 4;"> + 5 + </div> + <div style="background: aqua; width: 20px; grid-row: 1 / span 4;"> + 7 + </div> + <div style="background: yellow; width: 10px; grid-row: span 3;"> + 8 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-004.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-004.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-dense-packing-multi-span-004-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: row-reverse; + grid-template-rows: repeat(4, 50px); + width: 170px; +} +</style> +<body> +<p>Ensure that dense-packing correctly iterates through all possible track openings to find an opening span. Item that should be placed into opening is yellow.</p> +<div class="grid-lanes"> + <div style="background: aquamarine; width: 60px;"> + 1 + </div> + <div style="background: blue; width: 40px;"> + 2 + </div> + <div style="background: blueviolet; width: 20px;"> + 3 + </div> + <div style="background: lightblue; width: 10px; grid-row: 3 / span 2;"> + 4 + </div> + <div style="background: lightskyblue; grid-row: 4; width: 30px;"> + 5 + </div> + <div style="background: lightsteelblue; width: 60px; grid-row: 1;"> + 6 + </div> + <div style="background: aqua; width: 20px; grid-row: span 4;"> + 7 + </div> + <div style="background: yellow; width: 10px; grid-row: span 3;"> + 8 + </div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-005-ref.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-005-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html> +<style> +.grid { + display: grid; + grid-auto-flow: dense; + grid-auto-columns: min-content; + grid-template-rows: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing in grid-lanes properly handles "split" track openings.</p> +<div class="grid"> + <div style="background: brown; width: 80px; grid-row: 5;"></div> + <div style="background: brown; width: 20px; grid-row: 3 / span 2"></div> + <div style="background: brown; width: 40px; grid-row: 2;"></div> + <div style="background: brown; width: 100px; grid-row: 1;"></div> + <div style="background: brown; width: 10px; grid-row: 1 / span 5;"></div> + <div style="background: pink; width: 10px; grid-row: 2 / span 4; transform: translateX(-30px);"></div> + <div style="background: lightgreen; width: 10px; grid-row: 3 / span 2; transform: translateX(-100px);"></div> +</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-005.html b/testing/web-platform/tests/css/css-grid/grid-lanes/tentative/item-placement/row-reverse-dense-packing-multi-span-005.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<link rel="help" href="https://drafts.csswg.org/css-grid-3"> +<link rel="match" href="row-reverse-dense-packing-multi-span-005-ref.html"> +<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com"> +<style> +.grid-lanes { + display: grid-lanes; + item-tolerance: 0; + grid-auto-flow: dense; + grid-lanes-direction: row-reverse; + grid-template-rows: repeat(5, 50px); +} +</style> +<body> +<p>Ensure that dense-packing in grid-lanes properly handles "split" track openings.</p> +<div class="grid-lanes"> + <div style="background: brown; width: 80px;"></div> + <div style="background: brown; width: 20px; grid-row: span 2"></div> + <div style="background: brown; width: 40px;"></div> + <div style="background: brown; width: 100px;"></div> + <div style="background: brown; width: 10px; grid-row: span 5;"></div> + <div style="background: pink; width: 10px; grid-row: span 4;"></div> + <div style="background: lightgreen; width: 10px; grid-row: span 2;"></div> +</div> +</body> +</html>