We use cookies to ensure you get the best experience on our website
Halaman utama Jelajahi Bantuan
Daftar Masuk
0ct0pu5
/
ladybird
1
0
Fork 0
Berkas Masalah 0 Permintaan Tarik 0 Wiki
Jelajahi Sumber

LibWeb: Use reverse direction on flex containers with `rtl` direction

If a flex container has `direction: rtl` set, reverse the row direction.
BenJilks 10 bulan lalu
induk
c6975a1680
melakukan
82989554ab
10 mengubah file dengan 92 tambahan dan 4 penghapusan
Tampilan Split Tampilkan Statistik Diff
  1. 53 0
      Tests/LibWeb/Layout/expected/writing-modes-direction-flex.txt
  2. 5 0
      Tests/LibWeb/Layout/input/writing-modes-direction-flex.html
  3. 4 0
      Userland/Libraries/LibWeb/CSS/ComputedValues.h
  4. 4 0
      Userland/Libraries/LibWeb/CSS/Enums.json
  5. 2 3
      Userland/Libraries/LibWeb/CSS/Properties.json
  6. 6 0
      Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
  7. 1 0
      Userland/Libraries/LibWeb/CSS/StyleProperties.h
  8. 13 0
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
  9. 1 1
      Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
  10. 3 0
      Userland/Libraries/LibWeb/Layout/Node.cpp

+ 53 - 0
Tests/LibWeb/Layout/expected/writing-modes-direction-flex.txt
Tampilan Berkas 

@@ -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 - 0
Tests/LibWeb/Layout/input/writing-modes-direction-flex.html
Tampilan Berkas 

@@ -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 - 0
Userland/Libraries/LibWeb/CSS/ComputedValues.h
Tampilan Berkas 

@@ -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; }

+ 4 - 0
Userland/Libraries/LibWeb/CSS/Enums.json
Tampilan Berkas 

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

+ 2 - 3
Userland/Libraries/LibWeb/CSS/Properties.json
Tampilan Berkas 

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

+ 6 - 0
Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
Tampilan Berkas 

@@ -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);

+ 1 - 0
Userland/Libraries/LibWeb/CSS/StyleProperties.h
Tampilan Berkas 

@@ -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;

+ 13 - 0
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.cpp
Tampilan Berkas 

@@ -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();

+ 1 - 1
Userland/Libraries/LibWeb/Layout/FlexFormattingContext.h
Tampilan Berkas 

@@ -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();

+ 3 - 0
Userland/Libraries/LibWeb/Layout/Node.cpp
Tampilan Berkas 

@@ -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());

Contact | Legal | Takedown | Status
Self-hosted public services - About
NibbleSpot by 0ct0pu5