[GridNG] Placement of grid items with a negative margins

Previously, in |ContributionSizeForGridItem| margins were clamped to zero before adding them to the contribution. Therefore, grid items with negative margins were not being placed correctly. In this CL, the order of operations is flipped: add the margin to the contribution and the result is then clamped to zero. Bug: 1045599, 1225424 Change-Id: I6fc2726d4744d520430b2ca96b3509a396d73538 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3002394 Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/master@{#898232}
web-platform-tests · Jul 2, 2021 · 396d582 · 396d582
1 parent cc1a792
commit 396d582
Showing 1 changed file with 27 additions and 0 deletions.
diff --git a/css/css-grid/grid-items/grid-items-contribution-negative-margins.html b/css/css-grid/grid-items/grid-items-contribution-negative-margins.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid items contribution with negative margin</title>
+<link rel="help" href="http://www.w3.org/TR/css-grid-1/#grid-items" title="4 Grid Items">
+<meta name="assert" content="This test checks that grid items are properly placed with negative margin.">
+<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
+<style>
+  #grid {
+    background: red;
+    display: grid;
+    grid-auto-flow: column;
+    width: 100px;
+    height: 100px;
+    overflow: hidden;
+  }
+
+  #grid > div {
+    width: 100px;
+    height: 100px;
+  }
+</style>
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="grid">
+    <div style="background: blue; margin-left: -100px;"></div>
+    <div style="background: green;"></div>
+</div>