system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-09 10:20:45 +00:00
Code Issues Projects Releases Wiki Activity

LibWeb: Fix overeager fallback to stretch-fit width for some flex items

Browse Source 
If a flex item has a preferred aspect ratio and the flex basis is not
definite, we were falling back to using stretch-fit for the main size,
since that appeared to match other browsers.

However, we missed the case where we actually have a definite cross size
through which the preferred aspect ratio can be naturally resolved.

(cherry picked from commit db1faef786dbd1722bbe6a1f4a5616f3069bdb6a)
This commit is contained in:
Andreas Kling 2024-06-23 15:52:14 +02:00 committed by Nico Weber
parent 47d7a3648e
commit 97edca4e4e
3 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Tests/LibWeb/Layout/expected/flex/no-stretch-fit-width-for-item-that-can-resolve-aspect-ratio-through-height.txt Normal file
View File

@ -0,0 +1,14 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x36 [BFC] children: not-inline
Box <body> at (8,8) content-size 200x20 flex-container(row) [FFC] children: not-inline
SVGSVGBox <svg> at (8,8) content-size 20x20 flex-item [SVG] children: not-inline
SVGGeometryBox <rect> at (8,8) content-size 10x10 children: not-inline
BlockContainer <div> at (28,8) content-size 100x20 flex-item [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x36]
PaintableBox (Box<BODY>) [8,8 200x20]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 20x20]
SVGPathPaintable (SVGGeometryBox<rect>) [8,8 10x10]
PaintableWithLines (BlockContainer<DIV>) [28,8 100x20]

19
Tests/LibWeb/Layout/input/flex/no-stretch-fit-width-for-item-that-can-resolve-aspect-ratio-through-height.html Normal file
View File

@ -0,0 +1,19 @@
<!doctype html><style type="text/css">
* { outline: 1px solid black; }
html {
background: white;
}
body {
display: flex;
background: orange;
width: 200px;
}
svg {
background: cyan;
height: 20px;
}
div {
background: magenta;
width: 100px;
}
</style><body><svg viewBox="0 0 24 24"><rect x=0 y=0 width=12 height=12></svg><div>

6
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View File

@ -639,10 +639,10 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
// AD-HOC: This is not mentioned in the spec, but if the item has an aspect ratio,
// we may need to adjust the main size in these ways:
// - using stretch-fit main size if the flex basis is indefinite.
// - using stretch-fit main size if the flex basis is indefinite and there is no cross size to resolve the ratio against.
// - in response to cross size min/max constraints.
if (item.box->has_preferred_aspect_ratio()) {
if (!item.used_flex_basis_is_definite) {
if (item.box->has_natural_aspect_ratio()) {
if (!item.used_flex_basis_is_definite && !has_definite_cross_size(item)) {
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));