From 7752bc5915b728b21f784d472e855b872f49ffc8 Mon Sep 17 00:00:00 2001 From: Tim Ledbetter Date: Thu, 28 May 2026 11:55:24 +0100 Subject: [PATCH] LibWeb: Stretch aspect-ratio flex items only when container is definite 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. --- .../LibWeb/Layout/FlexFormattingContext.cpp | 2 +- .../flex-aspect-ratio-img-column-018.html | 13 +++++++++ .../svg-root-as-flex-item-004.html | 27 +++++++++++++++++++ 3 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-018.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-004.html diff --git a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 6b76c1b11f..c6f45b8428 100644 --- 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 new file mode 100644 index 0000000000..88fdc26b5b --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-018.html @@ -0,0 +1,13 @@ + +SVG as flex item + + + + + + +

Test passes if there is a filled green square.

+ +
+ +
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 new file mode 100644 index 0000000000..4df84e2db9 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-004.html @@ -0,0 +1,27 @@ + +SVG root as flex item + + + + + + + + +

Test passes if there is a filled green square and no red.

+ +
+ +
+ + + +