Part 1 - Do not allow grid flex tracks to grow during intrinsic sizing of the grid container itself

AlaskanEmily · moz-wptsync-bot · commit b84fcfe55df7 · 2025-03-27T17:13:21.000Z
Add a test which is specifically failed before this patch (with the pref enabled) but is fixed by the patch. This specific case seems to not be tested in isolation by WPT. This fixes the major issue we found with bug 1938619, and enables the pref layout.css.grid-flex-spanning-items-intrinsic-sizing.enabled in nightly-only. Differential Revision: https://phabricator.services.mozilla.com/D243030 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1955109 gecko-commit: dcacdafdb21522474b108b621ea3b27abe7a1d2b gecko-reviewers: layout-grid-reviewers, dholbert
diff --git a/css/css-grid/grid-flex-spanning-items-001-ref.html b/css/css-grid/grid-flex-spanning-items-001-ref.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Reference Case</title>
+<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/>
+<style>
+#holder {
+    height: 50px;
+    width: 30px;
+    border: 10px solid fuchsia;
+}
+#item {
+    width: 300px;
+    height: 50px;
+    background: aqua;
+}
+</style>
+<div id="holder">
+  <div id="item"></div>
+</div>
diff --git a/css/css-grid/grid-flex-spanning-items-001.html b/css/css-grid/grid-flex-spanning-items-001.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Intrinsic sizing of grid with spanning flex items in a min-content container</title>
+<link rel="match" href="grid-flex-spanning-items-001-ref.html"/>
+<link rel="help" href="https://drafts.csswg.org/css-grid-2/#intrinsic-sizes"/>
+<link rel="author" title="Emily McDonough" href="mailto:emcdonough@mozilla.com"/>
+<style>
+#mygrid {
+    display: grid;
+    grid-template-columns: 1fr 30px;
+    border: 10px solid fuchsia;
+    width: min-content;
+}
+#item {
+    grid-column: 1 / span 2;
+}
+#filler {
+    width: 300px;
+    height: 50px;
+    background: aqua;
+}
+</style>
+<div id="mygrid">
+  <div id="item">
+    <div id="filler"></div>
+  </div>
+</div>
