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

LibWeb: Assign hypothetical flex item main sizes as temporary main size

Browse source 
This colors a bit outside the lines of the specification, but the spec
doesn't offer a proper explanation for how descendants of a flex item
are supposed to have access to the flex item's main size for purposes
of percentage resolution.

The approach I came up with here was to take the hypothetical main size
of each flex item, and assign it as a temporary main size. This allows
percentage resolution in descendants to work against the pre-flexing
main size of items. This seems to match how other engines behave,
although it feels somewhat dirty. If/when we learn more about this,
we can come up with something nicer.
This commit is contained in:
Andreas Kling 2022-10-15 09:26:30 +02:00
parent 6bb738c1b3
commit 869b322a8f
3 changed files with 26 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -695,6 +695,17 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(flex_item);
auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
flex_item.hypothetical_main_size = max(0.0f, css_clamp(flex_item.flex_base_size, clamp_min, clamp_max));
// NOTE: At this point, we set the hypothetical main size as the flex item's *temporary* main size.
// The size may change again when we resolve flexible lengths, but this is necessary in order for
// descendants of this flex item to resolve percentage sizes against something.
//
// The spec just barely hand-waves about this, but it seems to *roughly* match what other engines do.
// See "Note" section here: https://drafts.csswg.org/css-flexbox-1/#definite-sizes
if (is_row_layout())
m_state.get_mutable(flex_item.box).set_temporary_content_width(flex_item.hypothetical_main_size);
else
m_state.get_mutable(flex_item.box).set_temporary_content_height(flex_item.hypothetical_main_size);
}
// https://drafts.csswg.org/css-flexbox-1/#min-size-auto