[Masonry] Clamp impact of negative margins on running positions to zero [chromium/src : main]

[Yanling Wang (Gerrit)]

Attention needed from Alison Maher and Celeste Pan

Yanling Wang voted Code-Review+1

Code-Review

+1

Open in Gerrit

Related details

Attention is currently required from:

• Alison Maher
• Celeste Pan

Submit Requirements:

• Code-Coverage
• Code-Owners
• Code-Review
• Review-Enforcement

Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings.

Gerrit

Gerrit-MessageType: comment

Gerrit-Project: chromium/src

Gerrit-Branch: main

Gerrit-Change-Id: Idc32a6638fb64da25c3928e77098a6d97b1a052a

Gerrit-Change-Number: 7585254

Gerrit-PatchSet: 11

Gerrit-Owner: Celeste Pan <celes...@microsoft.com>

Gerrit-Reviewer: Alison Maher <alm...@microsoft.com>

Gerrit-Reviewer: Celeste Pan <celes...@microsoft.com>

Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>

Gerrit-CC: (Julie)Jeongeun Kim <je_jul...@chromium.org>

Gerrit-CC: AJITH KUMAR V <aji...@chromium.org>

Gerrit-CC: Akihiro Ota <akihi...@chromium.org>

Gerrit-CC: Ale Bzk <ales...@chromium.org>

Gerrit-CC: Alex Keng <shi...@microsoft.com>

Gerrit-CC: Andrew Rayskiy <green...@google.com>

Gerrit-CC: Anurag Simgeker <anurags...@google.com>

Gerrit-CC: Arnaud Mandy <arnaud...@intel.com>

Gerrit-CC: AyeAye <android-bu...@system.gserviceaccount.com>

Gerrit-CC: AyeAye Python Dispatcher <android-build-ayeay...@system.gserviceaccount.com>

Gerrit-CC: CJ DiMeglio <lethala...@chromium.org>

Gerrit-CC: Christian Biesinger <cbies...@chromium.org>

Gerrit-CC: Chromium LUCI CQ <chromiu...@luci-project-accounts.iam.gserviceaccount.com>

Gerrit-CC: Chromium Metrics Reviews <chromium-met...@google.com>

Gerrit-CC: Daniel Andersson <dande...@chromium.org>

Gerrit-CC: Daniel Cheng <dch...@chromium.org>

Gerrit-CC: David Bokan <bo...@chromium.org>

Gerrit-CC: Dirk Schulze <dsch...@chromium.org>

Gerrit-CC: Enterprise Policy Reviews <enterprise-p...@google.com>

Gerrit-CC: Frank Liberato <libe...@chromium.org>

Gerrit-CC: Fredrik Söderquist <f...@opera.com>

Gerrit-CC: Hans Wennborg <ha...@chromium.org>

Gerrit-CC: Heron Yang <hero...@google.com>

Gerrit-CC: Hirokazu Honda <hi...@chromium.org>

Gerrit-CC: Hiroki Nakagawa <nhi...@chromium.org>

Gerrit-CC: Hongchan Choi <hong...@chromium.org>

Gerrit-CC: Hu, Ningxin <ningx...@intel.com>

Gerrit-CC: Ian Vollick <vol...@chromium.org>

Gerrit-CC: Ilya Biryukov <ibir...@google.com>

Gerrit-CC: James Maclean <wjma...@chromium.org>

Gerrit-CC: James Su <su...@chromium.org>

Gerrit-CC: Javier Fernandez <jfern...@igalia.com>

Gerrit-CC: Jerome Jiang <ji...@chromium.org>

Gerrit-CC: Jiewei Qian <q...@chromium.org>

Gerrit-CC: Kenneth R Christiansen <kenneth.r.c...@intel.com>

Gerrit-CC: Kenneth Rohde Christiansen <kenneth.ch...@gmail.com>

Gerrit-CC: Kentaro Hara <har...@chromium.org>

Gerrit-CC: Kevin Babbitt <kbab...@microsoft.com>

Gerrit-CC: Kevin McNee <mc...@chromium.org>

Gerrit-CC: Lei Zhang <the...@chromium.org>

Gerrit-CC: Luna Lu <loon...@chromium.org>

Gerrit-CC: Mangesh Ghiware <mghi...@google.com>

Gerrit-CC: Mark Schillaci <mschi...@google.com>

Gerrit-CC: Mathias Bynens <mat...@chromium.org>

Gerrit-CC: Menard, Alexis <alexis...@intel.com>

Gerrit-CC: Michael Moss <mm...@chromium.org>

Gerrit-CC: Michael Wilson <mjwi...@chromium.org>

Gerrit-CC: Mike Taylor <mike...@chromium.org>

Gerrit-CC: Mirko Bonadei <mbon...@chromium.org>

Gerrit-CC: Nate Chapin <jap...@chromium.org>

Gerrit-CC: Nektarios Paisios <nek...@chromium.org>

Gerrit-CC: Nico Weber <tha...@chromium.org>

Gerrit-CC: Nikhil Nayunigari <nikh...@google.com>

Gerrit-CC: Olga Gerchikov <gerc...@microsoft.com>

Gerrit-CC: Per Åhgren <pe...@chromium.org>

Gerrit-CC: Peter Beverloo <pe...@chromium.org>

Gerrit-CC: Peter Collingbourne <p...@chromium.org>

Gerrit-CC: Peter Williamson <pet...@chromium.org>

Gerrit-CC: Raphael Kubo da Costa <ku...@igalia.com>

Gerrit-CC: Reid Kleckner <r...@chromium.org>

Gerrit-CC: Rijubrata Bhaumik <rijubrat...@intel.com>

Gerrit-CC: Ryan Sultanem <rs...@google.com>

Gerrit-CC: Sadrul Chowdhury <sad...@chromium.org>

Gerrit-CC: Sam Zackrisson <sa...@chromium.org>

Gerrit-CC: Sean Maher <sp...@chromium.org>

Gerrit-CC: Simon Hangl <sim...@google.com>

Gerrit-CC: Sophie Chang <sophi...@chromium.org>

Gerrit-CC: Stephen Chenney <sche...@chromium.org>

Gerrit-CC: Thiabaud Engelbrecht <thia...@google.com>

Gerrit-CC: Thorsten Kober <thor...@google.com>

Gerrit-CC: Tommy Li <tomm...@chromium.org>

Gerrit-CC: Victor Tan <vict...@chromium.org>

Gerrit-CC: Wang, Wei4 <wei4...@intel.com>

Gerrit-CC: Yoav Weiss (@Shopify) <yoav...@chromium.org>

Gerrit-CC: Zewen Li <zew...@google.com>

Gerrit-CC: Zijie He <zij...@google.com>

Gerrit-CC: chromium...@chromium.org

Gerrit-CC: srirama chandra sekhar <srir...@samsung.com>

Gerrit-Attention: Celeste Pan <celes...@microsoft.com>

Gerrit-Attention: Alison Maher <alm...@microsoft.com>

Gerrit-Comment-Date: Fri, 20 Feb 2026 22:43:24 +0000

Gerrit-HasComments: No

Gerrit-Has-Labels: Yes

[Alison Maher (Gerrit)]

Attention needed from Celeste Pan

Alison Maher voted and added 3 comments

Votes added by Alison Maher

Code-Review

+1

3 comments

Patchset-level comments

File-level comment, Patchset 12 (Latest):

Alison Maher . resolved

I see there were some mac test failures. A lot of times that can be do to rendering differences with text. You could try using Ahem font to see if that fixes the failures there (that's usually my first check when there are mac specific failures - if you search for ahem inside the grid lanes test directory, you should find some other tests that use this font for reference)

File third_party/blink/renderer/core/layout/grid_lanes/grid_lanes_layout_algorithm.cc

Line 523, Patchset 12 (Latest): // Margins can affect the visual placement of the item, but should not cause

Alison Maher . unresolved

nit: I'd move this comment above the line above (where we set the margins)

File third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-001.html

Line 16, Patchset 12 (Latest): <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>

Alison Maher . unresolved

nit: since more than one of these items is visible, I wonder if we should make these items 1,2,3,4,5 instead

Open in Gerrit

Related details

Attention is currently required from:

• Celeste Pan

Submit Requirements:

• Code-Coverage
• Code-Owners
• Code-Review
• No-Unresolved-Comments
• Review-Enforcement

Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings.

Gerrit

Gerrit-MessageType: comment

Gerrit-Project: chromium/src

Gerrit-Branch: main

Gerrit-Change-Id: Idc32a6638fb64da25c3928e77098a6d97b1a052a

Gerrit-Change-Number: 7585254

Gerrit-PatchSet: 12

Gerrit-Comment-Date: Mon, 23 Feb 2026 16:06:58 +0000

Gerrit-HasComments: Yes

Gerrit-Has-Labels: Yes

[Celeste Pan (Gerrit)]

Celeste Pan added 2 comments

File third_party/blink/renderer/core/layout/grid_lanes/grid_lanes_layout_algorithm.cc

Line 523, Patchset 12: // Margins can affect the visual placement of the item, but should not cause

Alison Maher . resolved

nit: I'd move this comment above the line above (where we set the margins)

Celeste Pan

Done

File third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-001.html

Line 16, Patchset 12: <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>

Alison Maher . resolved

nit: since more than one of these items is visible, I wonder if we should make these items 1,2,3,4,5 instead

Celeste Pan

Done

Open in Gerrit

Related details

Attention set is empty

Submit Requirements:

• Code-Coverage
• Code-Owners
• Code-Review

• Review-Enforcement

Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings.

Gerrit

Gerrit-MessageType: comment

Gerrit-Project: chromium/src

Gerrit-Branch: main

Gerrit-Change-Id: Idc32a6638fb64da25c3928e77098a6d97b1a052a

Gerrit-Change-Number: 7585254

Gerrit-PatchSet: 14

Gerrit-Comment-Date: Mon, 23 Feb 2026 21:04:17 +0000

Gerrit-HasComments: Yes

Gerrit-Has-Labels: No

Comment-In-Reply-To: Alison Maher <alm...@microsoft.com>

[Celeste Pan (Gerrit)]

Celeste Pan voted Commit-Queue+2

Commit-Queue

+2

Gerrit-Comment-Date: Mon, 23 Feb 2026 21:28:03 +0000

Gerrit-HasComments: No

Gerrit-Has-Labels: Yes

[Chromium LUCI CQ (Gerrit)]

Chromium LUCI CQ submitted the change with unreviewed changes

Unreviewed changes

12 is the latest approved patch-set.
The change was submitted with unreviewed changes in the following files:

```
The name of the file: third_party/blink/renderer/core/layout/grid_lanes/grid_lanes_layout_algorithm.cc
Insertions: 2, Deletions: 1.

@@ -519,10 +519,11 @@
         To<PhysicalBoxFragment>(result->GetPhysicalFragment());
     const LogicalBoxFragment fragment(container_writing_direction,
                                       physical_fragment);
-    auto margins = ComputeMarginsFor(space, item_style, container_space);
+

     // Margins can affect the visual placement of the item, but should not cause

     // the running position to move backwards. If the margin size is greater
     // than the size of the fragment, we should clamp the fragment size to 0.
+    auto margins = ComputeMarginsFor(space, item_style, container_space);
     LayoutUnit fragment_size =
         is_for_columns ? fragment.BlockSize() + margins.BlockSum()
                        : fragment.InlineSize() + margins.InlineSum();
```
```
The name of the file: third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-003-ref.html
Insertions: 2, Deletions: 2.

@@ -24,10 +24,10 @@
       </div>
     </div>
     <div style="grid-column: 2;">
-      <div class="orthogonal" style="background: lightsteelblue; width: 50px; margin-bottom: -30px; margin-top: -20px;">
+      <div class="orthogonal" style="background: lightsteelblue; width: 50px; height: 50px; margin-bottom: -30px; margin-top: -20px;">
         item 2
       </div>
-      <div class="orthogonal" style="background: lightpink; width: 20px; margin-top: 13px; height: max-content;">
+      <div class="orthogonal" style="background: lightpink; width: 20px; height: max-content;">
         item 4
       </div>
     </div>
```
```
The name of the file: third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-003.html
Insertions: 1, Deletions: 1.

@@ -25,7 +25,7 @@
       item 1
     </div>
     <!-- Orthogonal item that should not regress the running position. -->
-    <div class="orthogonal" style="background: lightsteelblue; width: 50px; margin-bottom: -30px; margin-top: -20px;">
+    <div class="orthogonal" style="background: lightsteelblue; width: 50px; height: 50px; margin-bottom: -30px; margin-top: -20px;">
       item 2
     </div>
     <div style="background: lightblue; height: 30px;">
```
```
The name of the file: third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-003.html
Insertions: 3, Deletions: 2.

@@ -7,6 +7,7 @@
 body, html {
   color:black;
   font-size:15px/1 monospace;
+  padding-left: 20px;
 }
 
 .grid-lanes {
@@ -25,13 +26,13 @@
       item 1
     </div>
     <!-- Orthogonal item that should not regress the running position. -->
-    <div class="orthogonal" style="background: lightsteelblue; height: 50px; margin-right: -30px; margin-left: -20px;">
+    <div class="orthogonal" style="background: lightsteelblue; width: 50px; margin-right: -30px; margin-left: -20px;">
       item 2
     </div>
     <div style="background: lightblue; width: 30px;">
       item 3
     </div>
-    <div class="orthogonal" style="background: lightpink; height: 20px;">
+    <div class="orthogonal" style="background: lightpink; height: 20px; width: max-content;">
       item 4
     </div>
     <div class="orthogonal" style="background: yellow; width: 20px; margin-left: -10px;">
```
```
The name of the file: third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-001-ref.html
Insertions: 3, Deletions: 3.

@@ -10,13 +10,13 @@
       item 1
     </div>
     <div style="background: lightblue; height: 50px;" >
-      item 2
+      item 4

     </div>
     <div style="background: aquamarine; height: 50px;" >

-      item 1
+      item 3
     </div>
     <div style="background: lightpink; height: 50px;">
-      item 3
+      item 5
     </div>
   </div>
 </body>
```
```
The name of the file: third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-001.html
Insertions: 7, Deletions: 7.

@@ -17,17 +17,17 @@

       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;">
+    <div style="background: aquamarine; height: 50px;" >
       item 3
     </div>
+    <div style="background: lightblue; height: 50px; margin-top: -100px;" >
+      item 4
+    </div>
+    <div style="background: lightpink; height: 50px;">
+      item 5
+    </div>
   </div>
 </body>
 </html>
```
```
The name of the file: third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-003-ref.html
Insertions: 3, Deletions: 2.

@@ -5,6 +5,7 @@
 body, html {
   color:black;
   font-size:15px/1 monospace;
+  padding-left: 20px;
 }
 
 .grid {
@@ -24,10 +25,10 @@
       </div>
     </div>
     <div style="grid-row: 2; display: flex;">
-      <div class="orthogonal" style="background: lightsteelblue; height: 50px; margin-left: -20px;">
+      <div class="orthogonal" style="background: lightsteelblue; width: 50px; margin-left: -20px; margin-right: -30px;">
         item 2
       </div>
-      <div class="orthogonal" style="background: lightpink; height: 20px; width: 40px;">
+      <div class="orthogonal" style="background: lightpink; height: 20px; width: max-content;">
         item 4
       </div>
     </div>
```

Change information

Commit message:

[Masonry] Clamp impact of negative margins on running positions to zero

Based on how the CSSWG resolved the effect of negative margins
(margin-top [1] and margin-bottom [2]), the item's VISUAL placement
should always be affected by negative margins without clamping, but the
track's running position should never go backwards -- this means that
when calculating an item's size contribution to the running position, we
should never allow the item's contribution to go below 0.

This change only tests for the running position contribution. Tests and
possible code changes needed for dense-packing will be added in a
follow-up change.

A baseline test was disabled as the negative margin handling for that
test is incorrect based on the resolution in [3].

[1] https://github.com/w3c/csswg-drafts/issues/12918
[2] https://github.com/w3c/csswg-drafts/issues/13164
[3] https://github.com/w3c/csswg-drafts/issues/13165

Bug: 343257585

Change-Id: Idc32a6638fb64da25c3928e77098a6d97b1a052a

Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7585254

Reviewed-by: Alison Maher <alm...@microsoft.com>

Reviewed-by: Yanling Wang <yanli...@microsoft.com>

Commit-Queue: Celeste Pan <celes...@microsoft.com>

Cr-Commit-Position: refs/heads/main@{#1588909}

Files:

• M third_party/blink/renderer/core/layout/grid_lanes/grid_lanes_layout_algorithm.cc
• M third_party/blink/renderer/core/layout/grid_lanes/grid_lanes_running_positions.cc
• M third_party/blink/web_tests/TestExpectations
• M third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-001-ref.html
• M third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-001.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-002-ref.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-002.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-003-ref.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/column-negative-margin-003.html
• M third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-001-ref.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-002-ref.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-002.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-003-ref.html
• A third_party/blink/web_tests/external/wpt/css/css-grid/grid-lanes/tentative/item-placement/row-negative-margin-003.html

Change size: L

Delta: 14 files changed, 394 insertions(+), 32 deletions(-)

Branch: refs/heads/main

Submit Requirements:

• Code-Review: +1 by Yanling Wang, +1 by Alison Maher

Open in Gerrit

Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings.

Gerrit

Gerrit-MessageType: merged

Gerrit-Project: chromium/src

Gerrit-Branch: main

Gerrit-Change-Id: Idc32a6638fb64da25c3928e77098a6d97b1a052a

Gerrit-Change-Number: 7585254

Gerrit-PatchSet: 15

Gerrit-Owner: Celeste Pan <celes...@microsoft.com>

Gerrit-Reviewer: Alison Maher <alm...@microsoft.com>

Gerrit-Reviewer: Celeste Pan <celes...@microsoft.com>

Gerrit-Reviewer: Chromium LUCI CQ <chromiu...@luci-project-accounts.iam.gserviceaccount.com>

Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>

Gerrit-CC: (Julie)Jeongeun Kim <je_jul...@chromium.org>

Gerrit-CC: AJITH KUMAR V <aji...@chromium.org>

Gerrit-CC: Akihiro Ota <akihi...@chromium.org>

Gerrit-CC: Ale Bzk <ales...@chromium.org>

Gerrit-CC: Alex Keng <shi...@microsoft.com>

Gerrit-CC: Andrew Rayskiy <green...@google.com>

Gerrit-CC: Anurag Simgeker <anurags...@google.com>

Gerrit-CC: Arnaud Mandy <arnaud...@intel.com>

Gerrit-CC: AyeAye <android-bu...@system.gserviceaccount.com>

Gerrit-CC: AyeAye Python Dispatcher <android-build-ayeay...@system.gserviceaccount.com>

Gerrit-CC: CJ DiMeglio <lethala...@chromium.org>

Gerrit-CC: Christian Biesinger <cbies...@chromium.org>

[Blink W3C Test Autoroller (Gerrit)]

Message from Blink W3C Test Autoroller

The WPT PR for this CL has been merged upstream! https://github.com/web-platform-tests/wpt/pull/57999

Open in Gerrit

Related details

Attention set is empty

Submit Requirements:

• Code-Coverage
• Code-Owners
• Code-Review
• Review-Enforcement

Inspect html for hidden footers to help with email filtering. To unsubscribe visit settings.

Gerrit

Gerrit-MessageType: comment

Gerrit-Project: chromium/src

Gerrit-Branch: main

Gerrit-Change-Id: Idc32a6638fb64da25c3928e77098a6d97b1a052a

Gerrit-Change-Number: 7585254

Gerrit-PatchSet: 15

Gerrit-Owner: Celeste Pan <celes...@microsoft.com>

Gerrit-Reviewer: Alison Maher <alm...@microsoft.com>

Gerrit-Reviewer: Celeste Pan <celes...@microsoft.com>

Gerrit-Reviewer: Chromium LUCI CQ <chromiu...@luci-project-accounts.iam.gserviceaccount.com>

Gerrit-Reviewer: Yanling Wang <yanli...@microsoft.com>

Gerrit-CC: (Julie)Jeongeun Kim <je_jul...@chromium.org>

Gerrit-CC: AJITH KUMAR V <aji...@chromium.org>

Gerrit-CC: Akihiro Ota <akihi...@chromium.org>

Gerrit-CC: Ale Bzk <ales...@chromium.org>

Gerrit-CC: Alex Keng <shi...@microsoft.com>

Gerrit-CC: Andrew Rayskiy <green...@google.com>

Gerrit-CC: Anurag Simgeker <anurags...@google.com>

Gerrit-CC: Arnaud Mandy <arnaud...@intel.com>

Gerrit-CC: AyeAye <android-bu...@system.gserviceaccount.com>

Gerrit-CC: AyeAye Python Dispatcher <android-build-ayeay...@system.gserviceaccount.com>

Gerrit-CC: Blink W3C Test Autoroller <blink-w3c-te...@chromium.org>

Gerrit-Comment-Date: Mon, 23 Feb 2026 22:36:09 +0000

Gerrit-HasComments: No

Gerrit-Has-Labels: No