LibWeb: Parse CSS text-decoration-thickness property

Author: https://github.com/krkk
Commit: https://github.com/SerenityOS/serenity/commit/0f7156ed81
Pull-request: https://github.com/SerenityOS/serenity/pull/12915
Reviewed-by: https://github.com/AtkinsSJ ✅

Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -3733,13 +3733,13 @@ RefPtr<StyleValue> Parser::parse_overflow_value(Vector<StyleComponentValueRule>
 
 RefPtr<StyleValue> Parser::parse_text_decoration_value(Vector<StyleComponentValueRule> const& component_values)
 {
-    if (component_values.size() > 3)
+    if (component_values.size() > 4)
         return nullptr;
 
     RefPtr<StyleValue> decoration_line;
+    RefPtr<StyleValue> decoration_thickness;
     RefPtr<StyleValue> decoration_style;
     RefPtr<StyleValue> decoration_color;
-    // FIXME: Implement 'text-decoration-thickness' parameter. https://www.w3.org/TR/css-text-decor-4/#text-decoration-width-property
 
     for (auto& part : component_values) {
         auto value = parse_css_value(part);
@@ -3758,6 +3758,12 @@ RefPtr<StyleValue> Parser::parse_text_decoration_value(Vector<StyleComponentValu
             decoration_line = value.release_nonnull();
             continue;
         }
+        if (property_accepts_value(PropertyID::TextDecorationThickness, *value)) {
+            if (decoration_thickness)
+                return nullptr;
+            decoration_thickness = value.release_nonnull();
+            continue;
+        }
         if (property_accepts_value(PropertyID::TextDecorationStyle, *value)) {
             if (decoration_style)
                 return nullptr;
@@ -3770,12 +3776,14 @@ RefPtr<StyleValue> Parser::parse_text_decoration_value(Vector<StyleComponentValu
 
     if (!decoration_line)
         decoration_line = property_initial_value(PropertyID::TextDecorationLine);
+    if (!decoration_thickness)
+        decoration_thickness = property_initial_value(PropertyID::TextDecorationThickness);
     if (!decoration_style)
         decoration_style = property_initial_value(PropertyID::TextDecorationStyle);
     if (!decoration_color)
         decoration_color = property_initial_value(PropertyID::TextDecorationColor);
 
-    return TextDecorationStyleValue::create(decoration_line.release_nonnull(), decoration_style.release_nonnull(), decoration_color.release_nonnull());
+    return TextDecorationStyleValue::create(decoration_line.release_nonnull(), decoration_thickness.release_nonnull(), decoration_style.release_nonnull(), decoration_color.release_nonnull());
 }
 
 static Optional<CSS::TransformFunction> parse_transform_function_name(StringView name)

Userland/Libraries/LibWeb/CSS/StyleComputer.cpp

@@ -180,12 +180,14 @@ static void set_property_expanding_shorthands(StyleProperties& style, CSS::Prope
         if (value.is_text_decoration()) {
             auto const& text_decoration = value.as_text_decoration();
             style.set_property(CSS::PropertyID::TextDecorationLine, text_decoration.line());
+            style.set_property(CSS::PropertyID::TextDecorationThickness, text_decoration.thickness());
             style.set_property(CSS::PropertyID::TextDecorationStyle, text_decoration.style());
             style.set_property(CSS::PropertyID::TextDecorationColor, text_decoration.color());
             return;
         }
 
         style.set_property(CSS::PropertyID::TextDecorationLine, value);
+        style.set_property(CSS::PropertyID::TextDecorationThickness, value);
         style.set_property(CSS::PropertyID::TextDecorationStyle, value);
         style.set_property(CSS::PropertyID::TextDecorationColor, value);
         return;

Userland/Libraries/LibWeb/CSS/StyleValue.cpp

@@ -1319,7 +1319,7 @@ String PositionStyleValue::to_string() const
 
 String TextDecorationStyleValue::to_string() const
 {
-    return String::formatted("{} {} {}", m_line->to_string(), m_style->to_string(), m_color->to_string());
+    return String::formatted("{} {} {} {}", m_line->to_string(), m_thickness->to_string(), m_style->to_string(), m_color->to_string());
 }
 
 String TransformationStyleValue::to_string() const

Userland/Libraries/LibWeb/CSS/StyleValue.h

@@ -1451,14 +1451,16 @@ class TextDecorationStyleValue final : public StyleValue {
 public:
     static NonnullRefPtr<TextDecorationStyleValue> create(
         NonnullRefPtr<StyleValue> line,
+        NonnullRefPtr<StyleValue> thickness,
         NonnullRefPtr<StyleValue> style,
         NonnullRefPtr<StyleValue> color)
     {
-        return adopt_ref(*new TextDecorationStyleValue(line, style, color));
+        return adopt_ref(*new TextDecorationStyleValue(line, thickness, style, color));
     }
     virtual ~TextDecorationStyleValue() override { }
 
     NonnullRefPtr<StyleValue> line() const { return m_line; }
+    NonnullRefPtr<StyleValue> thickness() const { return m_thickness; }
     NonnullRefPtr<StyleValue> style() const { return m_style; }
     NonnullRefPtr<StyleValue> color() const { return m_color; }
 
@@ -1467,16 +1469,19 @@ public:
 private:
     TextDecorationStyleValue(
         NonnullRefPtr<StyleValue> line,
+        NonnullRefPtr<StyleValue> thickness,
         NonnullRefPtr<StyleValue> style,
         NonnullRefPtr<StyleValue> color)
         : StyleValue(Type::TextDecoration)
         , m_line(line)
+        , m_thickness(thickness)
         , m_style(style)
         , m_color(color)
     {
     }
 
     NonnullRefPtr<StyleValue> m_line;
+    NonnullRefPtr<StyleValue> m_thickness;
     NonnullRefPtr<StyleValue> m_style;
     NonnullRefPtr<StyleValue> m_color;
 };