RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 12:47:45 +00:00
Code Issues Activity Actions

LibWeb: Use fit-content width in place of indefinite flex item widths

Browse source 
In `flex-direction: column` layouts, a flex item's intrinsic height may
depend on its width, but the width is calculated *after* the intrinsic
height is required.

Unfortunately, the specification doesn't tell us exactly what to do here
(missing inputs to intrinsic sizing is a common problem) so we take the
solution that flexbox applies in 9.2.3.C and apply it to all intrinsic
height calculations within FlexFormattingContext: if the used width of
an item is not yet known when its intrinsic height is requested, we
substitute the fit-content width instead.

Note that while this is technically ad-hoc, it's basically extrapolating
the spec's suggestion in one specific case and using it in all cases.
This commit is contained in:
Andreas Kling 2023-03-27 20:56:20 +02:00
parent ca290b27ea
commit af118abdf0
4 changed files with 79 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

15
Tests/LibWeb/Layout/input/flex-column-item-with-auto-height-depending-on-auto-width.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black;
font: 80px SerenitySans;
}
.hero {
display: flex;
flex-direction: column;
align-items: center;
width: 500px;
}
.upper {
background: orange;
}
</style></head><body class="hero"><div class="upper">This entire text should be on orange background.</div></div>