LibWeb: Use reverse direction on flex containers with rtl direction

If a flex container has `direction: rtl` set, reverse the row direction.
This commit is contained in:
BenJilks 2024-08-10 23:13:26 +01:00 committed by Sam Atkins
commit 82989554ab
Notes: github-actions[bot] 2024-08-13 14:20:49 +00:00
10 changed files with 92 additions and 4 deletions

View file

@ -194,6 +194,19 @@ void FlexFormattingContext::parent_context_did_dimension_child_root_box()
});
}
// https://www.w3.org/TR/css-flexbox-1/#flex-direction-property
bool FlexFormattingContext::is_direction_reverse() const
{
switch (flex_container().computed_values().direction()) {
case CSS::Direction::Ltr:
return m_flex_direction == CSS::FlexDirection::ColumnReverse || m_flex_direction == CSS::FlexDirection::RowReverse;
case CSS::Direction::Rtl:
return m_flex_direction == CSS::FlexDirection::ColumnReverse || m_flex_direction == CSS::FlexDirection::Row;
default:
VERIFY_NOT_REACHED();
}
}
void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
{
auto width_of_containing_block = m_flex_container_state.content_width();

View file

@ -195,7 +195,7 @@ private:
bool is_row_layout() const { return m_flex_direction == CSS::FlexDirection::Row || m_flex_direction == CSS::FlexDirection::RowReverse; }
bool is_single_line() const { return flex_container().computed_values().flex_wrap() == CSS::FlexWrap::Nowrap; }
bool is_direction_reverse() const { return m_flex_direction == CSS::FlexDirection::ColumnReverse || m_flex_direction == CSS::FlexDirection::RowReverse; }
bool is_direction_reverse() const;
void populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
void determine_intrinsic_size_of_flex_container();

View file

@ -872,6 +872,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
computed_values.set_object_position(computed_style.object_position());
if (auto direction = computed_style.direction(); direction.has_value())
computed_values.set_direction(direction.value());
if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value())
computed_values.set_scrollbar_width(scrollbar_width.value());