RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 11:37:34 +00:00
Code Issues Activity Actions

LibWeb: Treat unresolvable percentage flex-basis values as 'content'

Browse source 
Per CSS-FLEXBOX-1, we should treat percentage values of flex-basis as
'content' if they resolve against an indefinite size of the flex
container.
This commit is contained in:
Andreas Kling 2023-04-18 09:10:28 +02:00
parent 8f988b7bae
commit 0d5e0d27aa
3 changed files with 36 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Tests/LibWeb/Layout/expected/flex/percentage-flex-basis-with-indefinite-flex-container-size.txt Normal file
View file

@ -0,0 +1,9 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33.46875 children: not-inline
Box <body.outer> at (8,8) content-size 200x17.46875 flex-container(column) children: not-inline
BlockContainer <div.middle> at (8,8) content-size 200x17.46875 flex-item children: not-inline
BlockContainer <div.inner> at (8,8) content-size 200x17.46875 children: inline
line 0 width: 174.234375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 20, rect: [8,8 174.234375x17.46875]
"percentages are hard"
TextNode <#text>

18
Tests/LibWeb/Layout/input/flex/percentage-flex-basis-with-indefinite-flex-container-size.html Normal file
View file

@ -0,0 +1,18 @@
<!doctype html><style>
* {
font: 16px SerenitySans;
}
.outer {
display: flex;
flex-direction: column;
width: 200px;
}
.middle {
flex-basis: 0%;
height: 100px;
background: red;
}
.inner {
background: lime;
}
</style><body class="outer"><div class="middle"><div class="inner">percentages are hard

9
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
View file

@ -572,6 +572,15 @@ CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem cons
}
}
// For example, percentage values of flex-basis are resolved against the flex item’s containing block
// (i.e. its flex container); and if that containing block’s size is indefinite,
// the used value for flex-basis is content.
if (flex_basis.type == CSS::FlexBasis::LengthPercentage
&& flex_basis.length_percentage->is_percentage()
&& !has_definite_main_size(flex_container())) {
flex_basis.type = CSS::FlexBasis::Content;
}
return flex_basis;
}