mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-09-29 08:11:13 +00:00
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:
parent
c6975a1680
commit
82989554ab
Notes:
github-actions[bot]
2024-08-13 14:20:49 +00:00
Author: https://github.com/BenJilks Commit: https://github.com/LadybirdBrowser/ladybird/commit/82989554abf Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1060 Reviewed-by: https://github.com/AtkinsSJ ✅
|
@ -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]
|
|
@ -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>
|
|
@ -178,6 +178,7 @@ public:
|
|||
static CSS::TableLayout table_layout() { return CSS::TableLayout::Auto; }
|
||||
static QuotesData quotes() { return QuotesData { .type = QuotesData::Type::Auto }; }
|
||||
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
|
||||
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; }
|
||||
CSS::ObjectFit object_fit() const { return m_noninherited.object_fit; }
|
||||
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; }
|
||||
const CSS::LengthBox& margin() const { return m_noninherited.margin; }
|
||||
|
@ -531,6 +533,7 @@ protected:
|
|||
CSS::ListStylePosition list_style_position { InitialValues::list_style_position() };
|
||||
CSS::Visibility visibility { InitialValues::visibility() };
|
||||
CSS::QuotesData quotes { InitialValues::quotes() };
|
||||
CSS::Direction direction { InitialValues::direction() };
|
||||
|
||||
Optional<SVGPaint> fill;
|
||||
CSS::FillRule fill_rule { InitialValues::fill_rule() };
|
||||
|
@ -756,6 +759,7 @@ public:
|
|||
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_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_stroke(SVGPaint value) { m_inherited.stroke = value; }
|
||||
|
|
|
@ -144,6 +144,10 @@
|
|||
"zoom-in",
|
||||
"zoom-out"
|
||||
],
|
||||
"direction": [
|
||||
"ltr",
|
||||
"rtl"
|
||||
],
|
||||
"display-box": [
|
||||
"contents",
|
||||
"none"
|
||||
|
|
|
@ -1065,9 +1065,8 @@
|
|||
"animation-type": "none",
|
||||
"inherited": true,
|
||||
"initial": "ltr",
|
||||
"valid-identifiers": [
|
||||
"ltr",
|
||||
"rtl"
|
||||
"valid-types": [
|
||||
"direction"
|
||||
]
|
||||
},
|
||||
"display": {
|
||||
|
|
|
@ -1085,6 +1085,12 @@ Optional<CSS::TableLayout> StyleProperties::table_layout() const
|
|||
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
|
||||
{
|
||||
auto value = property(CSS::PropertyID::MaskType);
|
||||
|
|
|
@ -130,6 +130,7 @@ public:
|
|||
Optional<CSS::ObjectFit> object_fit() const;
|
||||
CSS::ObjectPosition object_position() const;
|
||||
Optional<CSS::TableLayout> table_layout() const;
|
||||
Optional<CSS::Direction> direction() const;
|
||||
|
||||
static Vector<CSS::Transformation> transformations_for_style_value(StyleValue const& value);
|
||||
Vector<CSS::Transformation> transformations() const;
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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());
|
||||
|
||||
|
|
Loading…
Reference in a new issue