commit b7e389e5b1dad67a52aae98681298d3ed4084ede parent a56233fa071d85ea8aa5fd8c9aca4dfaae264520 Author: Celeste Pan <celestepan@microsoft.com> Date: Thu, 9 Oct 2025 20:34:06 +0000 Bug 1992183 [wpt PR 55183] - [Masonry] Fix dense-packing multi-span bug causing item overlap, a=testonly Automatic update from web-platform-tests [Masonry] Fix dense-packing multi-span bug causing item overlap This change fixes logic in AccumulateTrackOpeningsToAccommodateItem which previously set the start position of the highest item to be the start position of the first track opening in a path of track openings. Instead we should be setting the start position of the dense-packed item to be the greatest running position amongst the path of eligible track openings. This also addresses a typo in the naming of AccumulateTrackOpeningsToAccommodateItem. Bug: 343257585 Change-Id: I055410ce6124484c47e312a14bf5b2a1e84be096 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7000839 Reviewed-by: Alison Maher <almaher@microsoft.com> Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com> Commit-Queue: Celeste Pan <celestepan@microsoft.com> Cr-Commit-Position: refs/heads/main@{#1523832} -- wpt-commits: 9288bbae9030ca44507565ac0aa73dc99e8ab27d wpt-pr: 55183 Diffstat:
4 files changed, 24 insertions(+), 14 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-009-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-009-ref.html @@ -8,7 +8,6 @@ grid-template-columns: repeat(4, 60px); grid-auto-flow: dense; } - .upwards { transform: translateY(-80px); } @@ -25,9 +24,12 @@ <div style="background: blueviolet; height: 20px;"> 3 </div> - <div style="background: lightsteelblue; height: 40px; grid-column: 4;"> + <div style="background: lightsteelblue; height: 60px; grid-column: 4;"> 4 </div> + <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 2;"> + 10 + </div> <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;"> 6 </div> @@ -37,12 +39,12 @@ <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;"> 8 </div> - <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;"> - 9 - </div> <div class="upwards" style="background: aqua; height: 20px; grid-column: span 4;"> 5 </div> + <div class="upwards" style="background: green; height: 10px; grid-column: span 3;"> + 9 + </div> </div> </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-009.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/column-dense-packing-multi-span-009.html @@ -25,7 +25,7 @@ <div style="background: blueviolet; height: 20px;"> 3 </div> - <div style="background: lightsteelblue; height: 40px; grid-column: 4;"> + <div style="background: lightsteelblue; height: 60px; grid-column: 4;"> 4 </div> <div style="background: aqua; height: 20px; grid-column: span 4;"> @@ -40,9 +40,12 @@ <div style="background: yellow; height: 10px; grid-column: span 3;"> 8 </div> - <div style="background: yellow; height: 10px; grid-column: span 3;"> + <div style="background: green; height: 10px; grid-column: span 3;"> 9 </div> + <div style="background: yellow; height: 10px; grid-column: span 2;"> + 10 + </div> </div> </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-005-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-005-ref.html @@ -9,7 +9,6 @@ grid-template-rows: repeat(4, 60px); grid-auto-flow: column; } - .left { transform: translateX(-40px); } @@ -26,9 +25,12 @@ <div style="background: blueviolet; width: 20px; grid-row: 3;"> 3 </div> - <div style="background: lightsteelblue; width: 40px; grid-row: 4;"> + <div style="background: lightsteelblue; width: 60px; grid-row: 4;"> 4 </div> + <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 2;"> + 10 + </div> <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;"> 6 </div> @@ -38,12 +40,12 @@ <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;"> 8 </div> - <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;"> - 9 - </div> <div class="left" style="background: aqua; width: 20px; grid-row: span 4;"> 5 </div> + <div class="left" style="background: green; width: 10px; grid-row: span 3;"> + 9 + </div> </div> </body> </html> diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-005.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/dense-packing/row-dense-packing-multi-span-005.html @@ -26,7 +26,7 @@ <div style="background: blueviolet; width: 20px;"> 3 </div> - <div style="background: lightsteelblue; width: 40px; grid-row: 4;"> + <div style="background: lightsteelblue; width: 60px; grid-row: 4;"> 4 </div> <div style="background: aqua; width: 20px; grid-row: span 4;"> @@ -41,9 +41,12 @@ <div style="background: yellow; width: 10px; grid-row: span 3;"> 8 </div> - <div style="background: yellow; width: 10px; grid-row: span 3;"> + <div style="background: green; width: 10px; grid-row: span 3;"> 9 </div> + <div style="background: yellow; width: 10px; grid-row: span 2;"> + 10 + </div> </div> </body> </html>