LibWeb/CSS: Parse the tab-size property

Author: https://github.com/kostyafarber
Commit: https://github.com/LadybirdBrowser/ladybird/commit/68a28ff33ab
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1560
Reviewed-by: https://github.com/AtkinsSJ ✅

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -31,6 +31,7 @@ quotes: auto
 stroke: none
 stroke-opacity: 1
 stroke-width: 1px
+tab-size: 8
 text-align: start
 text-anchor: start
 text-decoration-line: none
@@ -117,7 +118,7 @@ grid-row-start: auto
 grid-template-areas: 
 grid-template-columns: 
 grid-template-rows: 
-height: 2023px
+height: 2040px
 inline-size: auto
 inset-block-end: auto
 inset-block-start: auto

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -104,6 +104,7 @@ public:
     static CSS::ContentVisibility content_visibility() { return CSS::ContentVisibility::Visible; }
     static CSS::Cursor cursor() { return CSS::Cursor::Auto; }
     static CSS::WhiteSpace white_space() { return CSS::WhiteSpace::Normal; }
+    static Variant<LengthOrCalculated, NumberOrCalculated> tab_size() { return NumberOrCalculated(8.0f); }
     static CSS::TextAlign text_align() { return CSS::TextAlign::Start; }
     static CSS::TextJustify text_justify() { return CSS::TextJustify::Auto; }
     static CSS::Positioning position() { return CSS::Positioning::Static; }
@@ -370,6 +371,7 @@ public:
     CSS::PointerEvents pointer_events() const { return m_inherited.pointer_events; }
     CSS::Display display() const { return m_noninherited.display; }
     Optional<int> const& z_index() const { return m_noninherited.z_index; }
+    Variant<LengthOrCalculated, NumberOrCalculated> tab_size() const { return m_inherited.tab_size; }
     CSS::TextAlign text_align() const { return m_inherited.text_align; }
     CSS::TextJustify text_justify() const { return m_inherited.text_justify; }
     CSS::LengthPercentage const& text_indent() const { return m_inherited.text_indent; }
@@ -530,6 +532,7 @@ protected:
         CSS::Cursor cursor { InitialValues::cursor() };
         CSS::ImageRendering image_rendering { InitialValues::image_rendering() };
         CSS::PointerEvents pointer_events { InitialValues::pointer_events() };
+        Variant<LengthOrCalculated, NumberOrCalculated> tab_size { InitialValues::tab_size() };
         CSS::TextAlign text_align { InitialValues::text_align() };
         CSS::TextJustify text_justify { InitialValues::text_justify() };
         CSS::TextTransform text_transform { InitialValues::text_transform() };
@@ -691,6 +694,7 @@ public:
     void set_float(CSS::Float value) { m_noninherited.float_ = value; }
     void set_clear(CSS::Clear value) { m_noninherited.clear = value; }
     void set_z_index(Optional<int> value) { m_noninherited.z_index = value; }
+    void set_tab_size(Variant<LengthOrCalculated, NumberOrCalculated> value) { m_inherited.tab_size = value; }
     void set_text_align(CSS::TextAlign text_align) { m_inherited.text_align = text_align; }
     void set_text_justify(CSS::TextJustify text_justify) { m_inherited.text_justify = text_justify; }
     void set_text_decoration_line(Vector<CSS::TextDecorationLine> value) { m_noninherited.text_decoration_line = move(value); }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -2415,6 +2415,15 @@
     ],
     "percentages-resolve-to": "length"
   },
+  "tab-size": {
+    "animation-type": "by-computed-value",
+    "inherited": true,
+    "initial": "8",
+    "valid-types": [
+      "length [0,∞]",
+      "number [0,∞]"
+    ]
+  },
   "table-layout": {
     "animation-type": "discrete",
     "inherited": false,

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -672,6 +672,25 @@ Optional<CSS::PointerEvents> StyleProperties::pointer_events() const
     return keyword_to_pointer_events(value->to_keyword());
 }
 
+Variant<LengthOrCalculated, NumberOrCalculated> StyleProperties::tab_size() const
+{
+    auto value = property(CSS::PropertyID::TabSize);
+    if (value->is_math()) {
+        auto& math_value = value->as_math();
+        if (math_value.resolves_to_length()) {
+            return LengthOrCalculated { math_value };
+        }
+        if (math_value.resolves_to_number()) {
+            return NumberOrCalculated { math_value };
+        }
+    }
+
+    if (value->is_length())
+        return LengthOrCalculated { value->as_length().length() };
+
+    return NumberOrCalculated { value->as_number().number() };
+}
+
 Optional<CSS::WhiteSpace> StyleProperties::white_space() const
 {
     auto value = property(CSS::PropertyID::WhiteSpace);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -113,6 +113,7 @@ public:
     ContentDataAndQuoteNestingLevel content(DOM::Element&, u32 initial_quote_nesting_level) const;
     Optional<CSS::ContentVisibility> content_visibility() const;
     Optional<CSS::Cursor> cursor() const;
+    Variant<LengthOrCalculated, NumberOrCalculated> tab_size() const;
     Optional<CSS::WhiteSpace> white_space() const;
     Optional<CSS::LineStyle> line_style(CSS::PropertyID) const;
     Optional<CSS::OutlineStyle> outline_style() const;

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -598,6 +598,9 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto text_overflow = computed_style.text_overflow(); text_overflow.has_value())
         computed_values.set_text_overflow(text_overflow.release_value());
 
+    auto tab_size = computed_style.tab_size();
+    computed_values.set_tab_size(tab_size);
+
     auto white_space = computed_style.white_space();
     if (white_space.has_value())
         computed_values.set_white_space(white_space.value());