LibWeb: Stretch aspect-ratio flex items only when container is definite

tcl3 · awesomekling · commit 7752bc5915b7 · 2026-05-28T20:42:02.000+02:00
A flex item with a preferred aspect ratio but no natural width or
height and no definite cross size is stretched to fill its container's
main size as a fallback. This was applied unconditionally, but when
the container itself is being measured for an intrinsic size, the
container's main size is indefinite and the size evaluated to zero.
This clobbered the max-content size the flex algorithm had already
computed as the intrinsic contribution.
diff --git a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
@@ -801,7 +801,7 @@ void FlexFormattingContext::determine_flex_base_size(FlexItem& item)
     //         - in response to cross size min/max constraints.
     auto auto_size = item.box->auto_content_box_size();
     if (auto_size.has_aspect_ratio()) {
-        if (!item.used_flex_basis_is_definite && !auto_size.has_width() && !auto_size.has_height() && !has_definite_cross_size(item)) {
+        if (!item.used_flex_basis_is_definite && !auto_size.has_width() && !auto_size.has_height() && !has_definite_cross_size(item) && has_definite_main_size(m_flex_container_state)) {
             item.flex_base_size = inner_main_size(m_flex_container_state);
         }
         item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-018.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-018.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>SVG as flex item</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E">
+<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#min-max-widths">
+<link rel="match" href="../../../../expected/wpt-import/css/css-flexbox/../reference/ref-filled-green-100px-square-only.html">
+<meta name="assert" content="Flex base size of svg item with aspect ratio + no intrinsic width or height honors transferred max-width." />
+
+<p>Test passes if there is a filled green square.</p>
+
+<div style="display: flex; flex-direction: column; align-items: flex-start; width: 200px;">
+  <svg viewBox="0 0 1 1" style="max-width: 100px; background: green;"></svg>
+</div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-004.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<title>SVG root as flex item</title>
+<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-flexbox/#algo-main-item" title="Part E">
+<link rel="help" href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes" title="For boxes with an intrinsic aspect ratio, but no intrinsic size">
+<link rel="match" href="../../../../expected/wpt-import/css/css-flexbox/../reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="SVG's intrinsic width when used as flex base size stretches into the available size when it has no specified intrinsic sizes and is passed through the aspect ratio " />
+
+<style>
+#reference-overlapped-red {
+  position: absolute;
+  background-color: red;
+  width: 100px;
+  height: 100px;
+  z-index: -1;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+
+<div id="reference-overlapped-red"></div>
+
+<div style="display: flex; flex-direction: column; width: 100px; align-items: flex-start;">
+  <svg viewBox="0 0 200 200">
+    <rect width="100%" height="100%" fill="green" />
+  </svg>
+</div>

Original file line number	Diff line number	Diff line change
`@@ -801,7 +801,7 @@ void FlexFormattingContext::determine_flex_base_size(FlexItem& item)`
`801`	`801`	`// - in response to cross size min/max constraints.`
`802`	`802`	`auto auto_size = item.box->auto_content_box_size();`
`803`	`803`	`if (auto_size.has_aspect_ratio()) {`
`804`		`- if (!item.used_flex_basis_is_definite && !auto_size.has_width() && !auto_size.has_height() && !has_definite_cross_size(item)) {`
	`804`	`+ if (!item.used_flex_basis_is_definite && !auto_size.has_width() && !auto_size.has_height() && !has_definite_cross_size(item) && has_definite_main_size(m_flex_container_state)) {`
`805`	`805`	`item.flex_base_size = inner_main_size(m_flex_container_state);`
`806`	`806`	`}`
`807`	`807`	`item.flex_base_size = adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(child_box, item.flex_base_size, computed_cross_min_size(child_box), computed_cross_max_size(child_box));`