mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 18:47:34 +00:00
LibWeb: Resolve flexbox percent heights against containing block height
Percentage values for `min-height` and `max-height` should be resolved against the containing block height, not its width.
This commit is contained in:
parent
7cc6d1da2d
commit
8f35c9a037
1 changed files with 31 additions and 17 deletions
|
@ -27,12 +27,20 @@ template<typename T>
|
|||
return ::max(min, ::min(value, max));
|
||||
}
|
||||
|
||||
static float get_pixel_size(LayoutState const& state, Box const& box, Optional<CSS::LengthPercentage> const& length_percentage)
|
||||
static float get_pixel_width(LayoutState const& state, Box const& box, Optional<CSS::LengthPercentage> const& length_percentage)
|
||||
{
|
||||
if (!length_percentage.has_value())
|
||||
return 0;
|
||||
auto inner_main_size = CSS::Length::make_px(state.get(*box.containing_block()).content_width());
|
||||
return length_percentage->resolved(box, inner_main_size).to_px(box);
|
||||
auto inner_width = CSS::Length::make_px(state.get(*box.containing_block()).content_width());
|
||||
return length_percentage->resolved(box, inner_width).to_px(box);
|
||||
}
|
||||
|
||||
static float get_pixel_height(LayoutState const& state, Box const& box, Optional<CSS::LengthPercentage> const& length_percentage)
|
||||
{
|
||||
if (!length_percentage.has_value())
|
||||
return 0;
|
||||
auto inner_height = CSS::Length::make_px(state.get(*box.containing_block()).content_height());
|
||||
return length_percentage->resolved(box, inner_height).to_px(box);
|
||||
}
|
||||
|
||||
FlexFormattingContext::FlexFormattingContext(LayoutState& state, Box const& flex_container, FormattingContext* parent)
|
||||
|
@ -294,17 +302,21 @@ float FlexFormattingContext::specified_cross_size(Box const& box) const
|
|||
float FlexFormattingContext::resolved_definite_cross_size(Box const& box) const
|
||||
{
|
||||
auto const& cross_value = is_row_layout() ? box.computed_values().height() : box.computed_values().width();
|
||||
if (cross_value.is_auto())
|
||||
return specified_cross_size(flex_container());
|
||||
if (cross_value.is_length())
|
||||
return cross_value.length().to_px(box);
|
||||
return specified_cross_size(box);
|
||||
return cross_value.resolved(box, CSS::Length::make_px(specified_cross_size(flex_container()))).to_px(box);
|
||||
}
|
||||
|
||||
float FlexFormattingContext::resolved_definite_main_size(Box const& box) const
|
||||
{
|
||||
auto const& cross_value = is_row_layout() ? box.computed_values().width() : box.computed_values().height();
|
||||
if (cross_value.is_length())
|
||||
return cross_value.length().to_px(box);
|
||||
return cross_value.resolved(box, CSS::Length::make_px(specified_main_size(flex_container()))).to_px(box);
|
||||
auto const& main_value = is_row_layout() ? box.computed_values().width() : box.computed_values().height();
|
||||
if (main_value.is_auto())
|
||||
return specified_main_size(flex_container());
|
||||
if (main_value.is_length())
|
||||
return specified_main_size(box);
|
||||
return main_value.resolved(box, CSS::Length::make_px(specified_main_size(flex_container()))).to_px(box);
|
||||
}
|
||||
|
||||
bool FlexFormattingContext::has_main_min_size(Box const& box) const
|
||||
|
@ -335,15 +347,15 @@ float FlexFormattingContext::specified_main_size_of_child_box(Box const& child_b
|
|||
float FlexFormattingContext::specified_main_min_size(Box const& box) const
|
||||
{
|
||||
return is_row_layout()
|
||||
? get_pixel_size(m_state, box, box.computed_values().min_width())
|
||||
: get_pixel_size(m_state, box, box.computed_values().min_height());
|
||||
? get_pixel_width(m_state, box, box.computed_values().min_width())
|
||||
: get_pixel_height(m_state, box, box.computed_values().min_height());
|
||||
}
|
||||
|
||||
float FlexFormattingContext::specified_cross_min_size(Box const& box) const
|
||||
{
|
||||
return is_row_layout()
|
||||
? get_pixel_size(m_state, box, box.computed_values().min_height())
|
||||
: get_pixel_size(m_state, box, box.computed_values().min_width());
|
||||
? get_pixel_height(m_state, box, box.computed_values().min_height())
|
||||
: get_pixel_width(m_state, box, box.computed_values().min_width());
|
||||
}
|
||||
|
||||
bool FlexFormattingContext::has_main_max_size(Box const& box) const
|
||||
|
@ -361,15 +373,15 @@ bool FlexFormattingContext::has_cross_max_size(Box const& box) const
|
|||
float FlexFormattingContext::specified_main_max_size(Box const& box) const
|
||||
{
|
||||
return is_row_layout()
|
||||
? get_pixel_size(m_state, box, box.computed_values().max_width())
|
||||
: get_pixel_size(m_state, box, box.computed_values().max_height());
|
||||
? get_pixel_width(m_state, box, box.computed_values().max_width())
|
||||
: get_pixel_height(m_state, box, box.computed_values().max_height());
|
||||
}
|
||||
|
||||
float FlexFormattingContext::specified_cross_max_size(Box const& box) const
|
||||
{
|
||||
return is_row_layout()
|
||||
? get_pixel_size(m_state, box, box.computed_values().max_height())
|
||||
: get_pixel_size(m_state, box, box.computed_values().max_width());
|
||||
? get_pixel_height(m_state, box, box.computed_values().max_height())
|
||||
: get_pixel_width(m_state, box, box.computed_values().max_width());
|
||||
}
|
||||
|
||||
float FlexFormattingContext::calculated_main_size(Box const& box) const
|
||||
|
@ -613,7 +625,9 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
|
|||
|
||||
// A. If the item has a definite used flex basis, that’s the flex base size.
|
||||
if (flex_item.used_flex_basis_is_definite) {
|
||||
return get_pixel_size(m_state, child_box, flex_item.used_flex_basis.length_percentage.value());
|
||||
if (is_row_layout())
|
||||
return get_pixel_width(m_state, child_box, flex_item.used_flex_basis.length_percentage.value());
|
||||
return get_pixel_height(m_state, child_box, flex_item.used_flex_basis.length_percentage.value());
|
||||
}
|
||||
|
||||
// B. If the flex item has ...
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue