RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 15:38:10 +00:00
Code Issues Activity Actions

LibWeb: Support flex-basis: calc(...)

Browse source 
1. Propagate calc() values from StyleProperties to ComputedValues.
2. Actually resolve calc() values when determining the used flex basis.

This makes the "support" section on https://shopify.com/ show up
correctly as a 2x2 grid (instead of 1x4). :^)
This commit is contained in:
Andreas Kling 2023-05-16 16:59:47 +02:00
parent e81d4ca1ac
commit 2e13f65ff4
4 changed files with 59 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -34,6 +34,8 @@ static CSS::Size to_css_size(CSS::LengthPercentage const& length_percentage)
return CSS::Size::make_auto();
if (length_percentage.is_length())
return CSS::Size::make_length(length_percentage.length());
if (length_percentage.is_calculated())
return CSS::Size::make_calculated(length_percentage.calculated());
return CSS::Size::make_percentage(length_percentage.percentage());
}
@ -612,13 +614,21 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
return false;
if (flex_basis.length_percentage->is_length())
return true;
bool can_resolve_percentages = is_row_layout()
? m_flex_container_state.has_definite_width()
: m_flex_container_state.has_definite_height();
if (flex_basis.length_percentage->is_calculated()) {
// FIXME: Handle calc() in used flex basis.
auto const& calc_value = *flex_basis.length_percentage->calculated();
if (calc_value.resolves_to_length())
return true;
if (calc_value.resolves_to_percentage() || (calc_value.resolves_to_length() && calc_value.contains_percentage()))
return can_resolve_percentages;
return false;
}
if (is_row_layout())
return m_flex_container_state.has_definite_width();
return m_flex_container_state.has_definite_height();
VERIFY(flex_basis.length_percentage->is_percentage());
return can_resolve_percentages;
}(item.used_flex_basis);
// A. If the item has a definite used flex basis, that’s the flex base size.