commit 10e0383657e21c03241c29eb3a950f772462041c
parent 529925a7c9e624a83867e40d9dc6a18bb505e581
Author: Celeste Pan <celestepan@microsoft.com>
Date: Thu, 9 Oct 2025 20:32:48 +0000
Bug 1992140 [wpt PR 55165] - [Masonry] Account for gaps in dense-packing, a=testonly
Automatic update from web-platform-tests
[Masonry] Account for gaps in dense-packing
This change accounts for gaps between items when performing dense
-packing, such that an item will only be placed if there is enough space
for the item and the gaps between the items above and below.
Bug: 343257585
Change-Id: Ic207227403f99f4f405f9901b2f99a8d563e5190
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6997352
Reviewed-by: Kurt Catti-Schmidt <kschmi@microsoft.com>
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Celeste Pan <celestepan@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1523173}
--
wpt-commits: 0154616fb21318ad18832b1327a1fe3b71d1710e
wpt-pr: 55165
Diffstat:
4 files changed, 194 insertions(+), 0 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
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+ display: grid;
+ gap: 10px;
+ padding: 10px;
+ grid-template-columns: repeat(4, 60px);
+ grid-auto-flow: dense;
+}
+
+.upwards {
+ transform: translateY(-80px);
+}
+</style>
+<body>
+ <p>Ensure that dense-packing correctly accounts for the gaps between items when placing them in track openings. Items to be placed in track openings are yellow.</p>
+ <div class="grid">
+ <div style="background: aquamarine; height: 120px;" >
+ 1
+ </div>
+ <div style="background: blue; height: 40px;" >
+ 2
+ </div>
+ <div style="background: blueviolet; height: 20px;">
+ 3
+ </div>
+ <div style="background: lightsteelblue; height: 40px; grid-column: 4;">
+ 4
+ </div>
+ <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;">
+ 6
+ </div>
+ <div class="upwards" style="background: yellow; height: 10px; grid-column: 2 / span 3;">
+ 7
+ </div>
+ <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>
+</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
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="column-dense-packing-multi-span-009-ref.html">
+<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
+<style>
+.masonry {
+ display: masonry;
+ item-tolerance: 0;
+ gap: 10px;
+ padding: 10px;
+ grid-template-columns: repeat(4, 60px);
+ grid-auto-flow: dense;
+}
+</style>
+<body>
+ <p>Ensure that dense-packing correctly accounts for the gaps between items when placing them in track openings. Items to be placed in track openings are yellow.</p>
+ <div class="masonry">
+ <div style="background: aquamarine; height: 120px;" >
+ 1
+ </div>
+ <div style="background: blue; height: 40px;" >
+ 2
+ </div>
+ <div style="background: blueviolet; height: 20px;">
+ 3
+ </div>
+ <div style="background: lightsteelblue; height: 40px; grid-column: 4;">
+ 4
+ </div>
+ <div style="background: aqua; height: 20px; grid-column: span 4;">
+ 5
+ </div>
+ <div style="background: yellow; height: 10px; grid-column: span 3;">
+ 6
+ </div>
+ <div style="background: yellow; height: 10px; grid-column: span 3;">
+ 7
+ </div>
+ <div style="background: yellow; height: 10px; grid-column: span 3;">
+ 8
+ </div>
+ <div style="background: yellow; 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/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
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<style>
+.grid {
+ display: grid;
+ gap: 10px;
+ padding: 10px;
+ grid-template-columns: 80px repeat(4, 10px) 20px 10px;
+ grid-template-rows: repeat(4, 60px);
+ grid-auto-flow: column;
+}
+
+.left {
+ transform: translateX(-40px);
+}
+</style>
+<body>
+ <p>Ensure that dense-packing correctly accounts for the gaps between items when placing them in track openings. Items to be placed in track openings are yellow.</p>
+ <div class="grid">
+ <div style="background: aquamarine; width: 120px; grid-row: 1;" >
+ 1
+ </div>
+ <div style="background: blue; width: 40px; grid-row: 2;" >
+ 2
+ </div>
+ <div style="background: blueviolet; width: 20px; grid-row: 3;">
+ 3
+ </div>
+ <div style="background: lightsteelblue; width: 40px; grid-row: 4;">
+ 4
+ </div>
+ <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;">
+ 6
+ </div>
+ <div class="left" style="background: yellow; width: 10px; grid-row: 2 / span 3;">
+ 7
+ </div>
+ <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>
+</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
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="row-dense-packing-multi-span-005-ref.html">
+<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
+<style>
+.masonry {
+ display: masonry;
+ item-tolerance: 0;
+ gap: 10px;
+ padding: 10px;
+ masonry-direction: row;
+ grid-template-rows: repeat(4, 60px);
+ grid-auto-flow: dense;
+}
+</style>
+<body>
+ <p>Ensure that dense-packing correctly accounts for the gaps between items when placing them in track openings. Items to be placed in track openings are yellow.</p>
+ <div class="masonry">
+ <div style="background: aquamarine; width: 120px;" >
+ 1
+ </div>
+ <div style="background: blue; width: 40px;" >
+ 2
+ </div>
+ <div style="background: blueviolet; width: 20px;">
+ 3
+ </div>
+ <div style="background: lightsteelblue; width: 40px; grid-row: 4;">
+ 4
+ </div>
+ <div style="background: aqua; width: 20px; grid-row: span 4;">
+ 5
+ </div>
+ <div style="background: yellow; width: 10px; grid-row: span 3;">
+ 6
+ </div>
+ <div style="background: yellow; width: 10px; grid-row: span 3;">
+ 7
+ </div>
+ <div style="background: yellow; width: 10px; grid-row: span 3;">
+ 8
+ </div>
+ <div style="background: yellow; width: 10px; grid-row: span 3;">
+ 9
+ </div>
+ </div>
+</body>
+</html>
