mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 04:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Use reverse direction on flex containers with rtl direction

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

53
Tests/LibWeb/Layout/expected/writing-modes-direction-flex.txt Normal file
View file

@ -0,0 +1,53 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x50 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x34 children: not-inline
Box <div> at (8,8) content-size 784x17 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (763.96875,8) content-size 28.03125x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [763.96875,8 28.03125x17] baseline: 13.296875
"aaa"
TextNode <#text>
BlockContainer <div> at (735.5625,8) content-size 28.40625x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [735.5625,8 28.40625x17] baseline: 13.296875
"bbb"
TextNode <#text>
BlockContainer <div> at (708.890625,8) content-size 26.671875x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [708.890625,8 26.671875x17] baseline: 13.296875
"ccc"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25) content-size 784x0 children: inline
TextNode <#text>
Box <div> at (8,25) content-size 784x17 flex-container(row-reverse) [FFC] children: not-inline
BlockContainer <div> at (8,25) content-size 28.03125x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [8,25 28.03125x17] baseline: 13.296875
"aaa"
TextNode <#text>
BlockContainer <div> at (36.03125,25) content-size 28.40625x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [36.03125,25 28.40625x17] baseline: 13.296875
"bbb"
TextNode <#text>
BlockContainer <div> at (64.4375,25) content-size 26.671875x17 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [64.4375,25 26.671875x17] baseline: 13.296875
"ccc"
TextNode <#text>
BlockContainer <(anonymous)> at (8,42) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x50]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x34]
PaintableBox (Box<DIV>) [8,8 784x17]
PaintableWithLines (BlockContainer<DIV>) [763.96875,8 28.03125x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [735.5625,8 28.40625x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [708.890625,8 26.671875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,25 784x0]
PaintableBox (Box<DIV>) [8,25 784x17]
PaintableWithLines (BlockContainer<DIV>) [8,25 28.03125x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [36.03125,25 28.40625x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>) [64.4375,25 26.671875x17]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,42 784x0]

5
Tests/LibWeb/Layout/input/writing-modes-direction-flex.html Normal file
View file

@ -0,0 +1,5 @@
<!DOCTYPE html>
<html dir="rtl">
<div style="display: flex; flex-direction: row"><div>aaa</div><div>bbb</div><div>ccc</div></div>
<div style="display: flex; flex-direction: row-reverse"><div>aaa</div><div>bbb</div><div>ccc</div></div>
</html>

4
Userland/Libraries/LibWeb/CSS/ComputedValues.h
View file

@ -178,6 +178,7 @@ public:
static CSS::TableLayout table_layout() { return CSS::TableLayout::Auto; } static CSS::TableLayout table_layout() { return CSS::TableLayout::Auto; }
static QuotesData quotes() { return QuotesData { .type = QuotesData::Type::Auto }; } static QuotesData quotes() { return QuotesData { .type = QuotesData::Type::Auto }; }
static CSS::TransformBox transform_box() { return CSS::TransformBox::ViewBox; } static CSS::TransformBox transform_box() { return CSS::TransformBox::ViewBox; }
static CSS::Direction direction() { return CSS::Direction::Ltr; }
// https://www.w3.org/TR/SVG/geometry.html // https://www.w3.org/TR/SVG/geometry.html
static LengthPercentage cx() { return CSS::Length::make_px(0); } static LengthPercentage cx() { return CSS::Length::make_px(0); }
@ -422,6 +423,7 @@ public:
Vector<Vector<String>> const& grid_template_areas() const { return m_noninherited.grid_template_areas; } Vector<Vector<String>> const& grid_template_areas() const { return m_noninherited.grid_template_areas; }
CSS::ObjectFit object_fit() const { return m_noninherited.object_fit; } CSS::ObjectFit object_fit() const { return m_noninherited.object_fit; }
CSS::ObjectPosition object_position() const { return m_noninherited.object_position; } CSS::ObjectPosition object_position() const { return m_noninherited.object_position; }
CSS::Direction direction() const { return m_inherited.direction; }
CSS::LengthBox const& inset() const { return m_noninherited.inset; } CSS::LengthBox const& inset() const { return m_noninherited.inset; }
const CSS::LengthBox& margin() const { return m_noninherited.margin; } const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@ -531,6 +533,7 @@ protected:
CSS::ListStylePosition list_style_position { InitialValues::list_style_position() }; CSS::ListStylePosition list_style_position { InitialValues::list_style_position() };
CSS::Visibility visibility { InitialValues::visibility() }; CSS::Visibility visibility { InitialValues::visibility() };
CSS::QuotesData quotes { InitialValues::quotes() }; CSS::QuotesData quotes { InitialValues::quotes() };
CSS::Direction direction { InitialValues::direction() };
Optional<SVGPaint> fill; Optional<SVGPaint> fill;
CSS::FillRule fill_rule { InitialValues::fill_rule() }; CSS::FillRule fill_rule { InitialValues::fill_rule() };
@ -756,6 +759,7 @@ public:
void set_quotes(CSS::QuotesData value) { m_inherited.quotes = value; } void set_quotes(CSS::QuotesData value) { m_inherited.quotes = value; }
void set_object_fit(CSS::ObjectFit value) { m_noninherited.object_fit = value; } void set_object_fit(CSS::ObjectFit value) { m_noninherited.object_fit = value; }
void set_object_position(CSS::ObjectPosition value) { m_noninherited.object_position = value; } void set_object_position(CSS::ObjectPosition value) { m_noninherited.object_position = value; }
void set_direction(CSS::Direction value) { m_inherited.direction = value; }
void set_fill(SVGPaint value) { m_inherited.fill = value; } void set_fill(SVGPaint value) { m_inherited.fill = value; }
void set_stroke(SVGPaint value) { m_inherited.stroke = value; } void set_stroke(SVGPaint value) { m_inherited.stroke = value; }

4
Userland/Libraries/LibWeb/CSS/Enums.json
View file

@ -144,6 +144,10 @@
"zoom-in", "zoom-in",
"zoom-out" "zoom-out"
], ],
"direction": [
"ltr",
"rtl"
],
"display-box": [ "display-box": [
"contents", "contents",
"none" "none"

5
Userland/Libraries/LibWeb/CSS/Properties.json
View file

@ -1065,9 +1065,8 @@
"animation-type": "none", "animation-type": "none",
"inherited": true, "inherited": true,
"initial": "ltr", "initial": "ltr",
"valid-identifiers": [ "valid-types": [
"ltr", "direction"
"rtl"
] ]
}, },
"display": { "display": {

6
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
View file

@ -1085,6 +1085,12 @@ Optional<CSS::TableLayout> StyleProperties::table_layout() const
return value_id_to_table_layout(value->to_identifier()); return value_id_to_table_layout(value->to_identifier());
} }
Optional<CSS::Direction> StyleProperties::direction() const
{
auto value = property(CSS::PropertyID::Direction);
return value_id_to_direction(value->to_identifier());
}
Optional<CSS::MaskType> StyleProperties::mask_type() const Optional<CSS::MaskType> StyleProperties::mask_type() const
{ {
auto value = property(CSS::PropertyID::MaskType); auto value = property(CSS::PropertyID::MaskType);

1
Userland/Libraries/LibWeb/CSS/StyleProperties.h
View file

@ -130,6 +130,7 @@ public:
Optional<CSS::ObjectFit> object_fit() const; Optional<CSS::ObjectFit> object_fit() const;
CSS::ObjectPosition object_position() const; CSS::ObjectPosition object_position() const;
Optional<CSS::TableLayout> table_layout() const; Optional<CSS::TableLayout> table_layout() const;
Optional<CSS::Direction> direction() const;
static Vector<CSS::Transformation> transformations_for_style_value(StyleValue const& value); static Vector<CSS::Transformation> transformations_for_style_value(StyleValue const& value);
Vector<CSS::Transformation> transformations() const; Vector<CSS::Transformation> transformations() const;

13
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
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 void FlexFormattingContext::populate_specified_margins(FlexItem& item, CSS::FlexDirection flex_direction) const
{ {
auto width_of_containing_block = m_flex_container_state.content_width(); auto width_of_containing_block = m_flex_container_state.content_width();

2
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
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_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_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 populate_specified_margins(FlexItem&, CSS::FlexDirection) const;
void determine_intrinsic_size_of_flex_container(); void determine_intrinsic_size_of_flex_container();

3
Userland/Libraries/LibWeb/Layout/Node.cpp
View file

@ -872,6 +872,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
computed_values.set_object_position(computed_style.object_position()); 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()) if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value())
computed_values.set_scrollbar_width(scrollbar_width.value()); computed_values.set_scrollbar_width(scrollbar_width.value());