LibWeb: Add writing-mode CSS property, and its values

Introduce the `writing-mode` property, as specified in https://drafts.csswg.org/css-writing-modes/#block-flow (cherry picked from commit c3f3e93b7e46e2f366fbc904852763af546d3913; amended to fix conflict on `height:` in expectation)
nico · Nov 19, 2024 · 7e93c8d · 7e93c8d
1 parent 17f9f8c
commit 7e93c8d
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 1 deletion.
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
@@ -123,7 +123,7 @@ grid-row-start: auto
 grid-template-areas: none
 grid-template-columns: auto
 grid-template-rows: auto
-height: 2125px
+height: 2142px
 inline-size: auto
 inset-block-end: auto
 inset-block-start: auto

diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -191,6 +191,7 @@ class InitialValues {
     static CSS::TransformBox transform_box() { return CSS::TransformBox::ViewBox; }
     static CSS::Direction direction() { return CSS::Direction::Ltr; }
     static CSS::UnicodeBidi unicode_bidi() { return CSS::UnicodeBidi::Normal; }
+    static CSS::WritingMode writing_mode() { return CSS::WritingMode::HorizontalTb; }
 
     // https://www.w3.org/TR/SVG/geometry.html
     static LengthPercentage cx() { return CSS::Length::make_px(0); }
@@ -443,6 +444,7 @@ class ComputedValues {
     CSS::ObjectPosition object_position() const { return m_noninherited.object_position; }
     CSS::Direction direction() const { return m_inherited.direction; }
     CSS::UnicodeBidi unicode_bidi() const { return m_noninherited.unicode_bidi; }
+    CSS::WritingMode writing_mode() const { return m_inherited.writing_mode; }
 
     CSS::LengthBox const& inset() const { return m_noninherited.inset; }
     const CSS::LengthBox& margin() const { return m_noninherited.margin; }
@@ -567,6 +569,7 @@ class ComputedValues {
         CSS::Visibility visibility { InitialValues::visibility() };
         CSS::QuotesData quotes { InitialValues::quotes() };
         CSS::Direction direction { InitialValues::direction() };
+        CSS::WritingMode writing_mode { InitialValues::writing_mode() };
 
         Optional<SVGPaint> fill;
         CSS::FillRule fill_rule { InitialValues::fill_rule() };
@@ -813,6 +816,7 @@ class MutableComputedValues final : public ComputedValues {
     void set_object_position(CSS::ObjectPosition value) { m_noninherited.object_position = value; }
     void set_direction(CSS::Direction value) { m_inherited.direction = value; }
     void set_unicode_bidi(CSS::UnicodeBidi value) { m_noninherited.unicode_bidi = value; }
+    void set_writing_mode(CSS::WritingMode value) { m_inherited.writing_mode = value; }
 
     void set_fill(SVGPaint value) { m_inherited.fill = value; }
     void set_stroke(SVGPaint value) { m_inherited.stroke = value; }

diff --git a/Userland/Libraries/LibWeb/CSS/Enums.json b/Userland/Libraries/LibWeb/CSS/Enums.json
@@ -508,5 +508,12 @@
     "keep-all",
     "break-all",
     "break-word"
+  ],
+  "writing-mode": [
+    "horizontal-tb",
+    "vertical-rl",
+    "vertical-lr",
+    "sideways-rl",
+    "sideways-lr"
   ]
 }
diff --git a/Userland/Libraries/LibWeb/CSS/Keywords.json b/Userland/Libraries/LibWeb/CSS/Keywords.json
@@ -185,6 +185,7 @@
   "high-quality",
   "highlight",
   "highlighttext",
+  "horizontal-tb",
   "hover",
   "inactiveborder",
   "inactivecaption",
@@ -339,6 +340,8 @@
   "semi-expanded",
   "separate",
   "serif",
+  "sideways-lr",
+  "sideways-rl",
   "slider-horizontal",
   "slow",
   "small",
@@ -403,6 +406,8 @@
   "upper-latin",
   "upper-roman",
   "uppercase",
+  "vertical-lr",
+  "vertical-rl",
   "vertical-text",
   "view-box",
   "visible",

diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
@@ -2795,6 +2795,18 @@
       "normal"
     ]
   },
+  "writing-mode": {
+    "animation-type": "none",
+    "inherited": true,
+    "initial": "horizontal-tb",
+    "valid-identifiers": [
+      "horizontal-tb",
+      "vertical-rl",
+      "vertical-lr",
+      "sideways-rl",
+      "sideways-lr"
+    ]
+  },
   "x": {
     "__comment": "This is an SVG 2 geometry property, see: https://www.w3.org/TR/SVG/geometry.html#X.",
     "animation-type": "by-computed-value",

diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp b/Userland/Libraries/LibWeb/CSS/StyleProperties.cpp
@@ -1310,6 +1310,12 @@ Optional<CSS::UnicodeBidi> StyleProperties::unicode_bidi() const
     return keyword_to_unicode_bidi(value->to_keyword());
 }
 
+Optional<CSS::WritingMode> StyleProperties::writing_mode() const
+{
+    auto value = property(CSS::PropertyID::WritingMode);
+    return keyword_to_writing_mode(value->to_keyword());
+}
+
 Optional<CSS::MaskType> StyleProperties::mask_type() const
 {
     auto value = property(CSS::PropertyID::MaskType);

diff --git a/Userland/Libraries/LibWeb/CSS/StyleProperties.h b/Userland/Libraries/LibWeb/CSS/StyleProperties.h
@@ -171,6 +171,7 @@ class StyleProperties : public RefCounted<StyleProperties> {
     Optional<CSS::TableLayout> table_layout() const;
     Optional<CSS::Direction> direction() const;
     Optional<CSS::UnicodeBidi> unicode_bidi() const;
+    Optional<CSS::WritingMode> writing_mode() const;
 
     static Vector<CSS::Transformation> transformations_for_style_value(CSSStyleValue const& value);
     Vector<CSS::Transformation> transformations() const;

diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
@@ -925,6 +925,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value())
         computed_values.set_scrollbar_width(scrollbar_width.value());
 
+    if (auto writing_mode = computed_style.writing_mode(); writing_mode.has_value())
+        computed_values.set_writing_mode(writing_mode.value());
+
     propagate_style_to_anonymous_wrappers();
 }