commit b2a28f6ff980a8ca9576fa0b78023142606beedb
parent a15d5b81c4cb7ea0fa24841d398dadebab012fc4
Author: Celeste Pan <celestepan@microsoft.com>
Date: Wed, 15 Oct 2025 08:43:53 +0000
Bug 1993648 [wpt PR 55347] - [Masonry] Remove requirement that the new running position will always be greater after an item is placed, a=testonly
Automatic update from web-platform-tests
[Masonry] Remove requirement that the new running position will always
be greater after an item is placed
When there are negative margins on an item, flex and block layouts don't
leave a gap the way grid does, and places the following item directly
after the item. This change follows that convention in masonry. An issue
has been created: https://github.com/w3c/csswg-drafts/issues/12918 which
may lead us to change this behavior.
This also removes a check that the new running position in a track will
always be greater after an item is placed; that DCHECK is inherently
wrong when we have items with negative margins in the stacking axis.
Bug: 343257585
Change-Id: I16eaab2423f0de949b51fa462a00b2fcb268ad02
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7027058
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@{#1528428}
--
wpt-commits: 2432eaee1591c46c2154255c92a71036beb01b14
wpt-pr: 55347
Diffstat:
4 files changed, 114 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-negative-margin-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-negative-margin-001-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<style>
+</style>
+<body>
+ <p>When an item with negative margins are placed, ensure the items after it are placed immediately behind it</p>
+ <div style="display: flex; flex-direction: column; width: 50px;">
+ <div style="background: aquamarine; height: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; height: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; height: 50px;" >
+ item 1
+ </div>
+ <div style="background: lightblue; height: 50px; margin-top: -100px;" >
+ item 2
+ </div>
+ <div style="background: lightpink; height: 50px;">
+ item 3
+ </div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-negative-margin-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/column-negative-margin-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="column-negative-margin-001-ref.html">
+<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
+<style>
+.masonry {
+ display: masonry;
+ item-tolerance: 0;
+ grid-template-columns: 50px;
+}
+</style>
+<body>
+ <p>When an item with negative margins are placed, ensure the items after it are placed immediately behind it</p>
+ <div class="masonry">
+ <div style="background: aquamarine; height: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; height: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; height: 50px;" >
+ item 1
+ </div>
+ <div style="background: lightblue; height: 50px; margin-top: -100px;" >
+ item 2
+ </div>
+ <div style="background: lightpink; height: 50px;">
+ item 3
+ </div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-negative-margin-001-ref.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-negative-margin-001-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<body>
+ <p>When an item with negative margins are placed, ensure the items after it are placed immediately behind it</p>
+ <div style="display: flex;">
+ <div style="background: aquamarine; width: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; width: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; width: 50px;" >
+ item 1
+ </div>
+ <div style="background: lightblue; width: 50px; margin-left: -100px;" >
+ item 2
+ </div>
+ <div style="background: lightpink; width: 50px;">
+ item 3
+ </div>
+ </div>
+</body>
+</html>
diff --git a/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-negative-margin-001.html b/testing/web-platform/tests/css/css-grid/masonry/tentative/item-placement/row-negative-margin-001.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://drafts.csswg.org/css-grid-3">
+<link rel="match" href="row-negative-margin-001-ref.html">
+<link rel="author" title="Celeste Pan" href="mailto:celestepan@microsoft.com">
+<style>
+.masonry {
+ display: masonry;
+ item-tolerance: 0;
+ masonry-direction: row;
+}
+</style>
+<body>
+ <p>When an item with negative margins are placed, ensure the items after it are placed immediately behind it</p>
+ <div class="masonry">
+ <div style="background: aquamarine; width: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; width: 50px;" >
+ item 1
+ </div>
+ <div style="background: aquamarine; width: 50px;" >
+ item 1
+ </div>
+ <div style="background: lightblue; width: 50px; margin-left: -100px;" >
+ item 2
+ </div>
+ <div style="background: lightpink; width: 50px;">
+ item 3
+ </div>
+ </div>
+</body>
+</html>
