dmaax/ladybird
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
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.
This commit is contained in:
Tim Ledbetter 2026-05-28 11:55:24 +01:00 committed by Andreas Kling
parent 6d84918eb7
commit 7752bc5915
3 changed files with 41 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -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));

13
Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/flex-aspect-ratio-img-column-018.html Normal file
View file

@ -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>

27
Tests/LibWeb/Ref/input/wpt-import/css/css-flexbox/svg-root-as-flex-item-004.html Normal file
View file

@ -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>