LibWeb: Parse and compute text-shadow property

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -125,6 +125,7 @@ public:
     CSS::TextDecorationStyle text_decoration_style() const { return m_noninherited.text_decoration_style; }
     Color text_decoration_color() const { return m_noninherited.text_decoration_color; }
     CSS::TextTransform text_transform() const { return m_inherited.text_transform; }
+    Vector<ShadowData> const& text_shadow() const { return m_noninherited.text_shadow; }
     CSS::Position position() const { return m_noninherited.position; }
     CSS::WhiteSpace white_space() const { return m_inherited.white_space; }
     CSS::FlexDirection flex_direction() const { return m_noninherited.flex_direction; }
@@ -218,6 +219,7 @@ protected:
         CSS::LengthPercentage text_decoration_thickness { InitialValues::text_decoration_thickness() };
         CSS::TextDecorationStyle text_decoration_style { InitialValues::text_decoration_style() };
         Color text_decoration_color { InitialValues::color() };
+        Vector<ShadowData> text_shadow {};
         CSS::Position position { InitialValues::position() };
         Optional<CSS::LengthPercentage> width;
         Optional<CSS::LengthPercentage> min_width;
@@ -282,6 +284,7 @@ public:
     void set_text_decoration_style(CSS::TextDecorationStyle value) { m_noninherited.text_decoration_style = value; }
     void set_text_decoration_color(Color value) { m_noninherited.text_decoration_color = value; }
     void set_text_transform(CSS::TextTransform value) { m_inherited.text_transform = value; }
+    void set_text_shadow(Vector<ShadowData>&& value) { m_noninherited.text_shadow = move(value); }
     void set_position(CSS::Position position) { m_noninherited.position = position; }
     void set_white_space(CSS::WhiteSpace value) { m_inherited.white_space = value; }
     void set_width(CSS::LengthPercentage const& width) { m_noninherited.width = width; }

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

@@ -4284,6 +4284,10 @@ Result<NonnullRefPtr<StyleValue>, Parser::ParsingResult> Parser::parse_css_value
         if (auto parsed_value = parse_text_decoration_value(component_values))
             return parsed_value.release_nonnull();
         return ParsingResult::SyntaxError;
+    case PropertyID::TextShadow:
+        if (auto parsed_value = parse_shadow_value(component_values, AllowInsetKeyword::No))
+            return parsed_value.release_nonnull();
+        return ParsingResult::SyntaxError;
     case PropertyID::Transform:
         if (auto parsed_value = parse_transform_value(component_values))
             return parsed_value.release_nonnull();

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -1342,6 +1342,14 @@
       "distribute"
     ]
   },
+  "text-shadow": {
+    "affects-layout": false,
+    "inherited": true,
+    "initial": "none",
+    "valid-identifiers": [
+      "none"
+    ]
+  },
   "text-transform": {
     "inherited": true,
     "initial": "none",

Userland/Libraries/LibWeb/CSS/StyleProperties.cpp

@@ -914,37 +914,47 @@ Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) c
     }
 }
 
-Vector<ShadowData> StyleProperties::box_shadow() const
+Vector<ShadowData> StyleProperties::shadow(PropertyID property_id) const
 {
-    auto value_or_error = property(PropertyID::BoxShadow);
+    auto value_or_error = property(property_id);
     if (!value_or_error.has_value())
         return {};
 
     auto value = value_or_error.value();
 
-    auto make_box_shadow_data = [](ShadowStyleValue const& box) {
+    auto make_shadow_data = [](ShadowStyleValue const& value) {
-        return ShadowData { box.color(), box.offset_x(), box.offset_y(), box.blur_radius(), box.spread_distance(), box.placement() };
+        return ShadowData { value.color(), value.offset_x(), value.offset_y(), value.blur_radius(), value.spread_distance(), value.placement() };
     };
 
     if (value->is_value_list()) {
         auto& value_list = value->as_value_list();
 
-        Vector<ShadowData> box_shadow_data;
+        Vector<ShadowData> shadow_data;
-        box_shadow_data.ensure_capacity(value_list.size());
+        shadow_data.ensure_capacity(value_list.size());
         for (auto const& layer_value : value_list.values())
-            box_shadow_data.append(make_box_shadow_data(layer_value.as_shadow()));
+            shadow_data.append(make_shadow_data(layer_value.as_shadow()));
 
-        return box_shadow_data;
+        return shadow_data;
     }
 
     if (value->is_shadow()) {
         auto& box = value->as_shadow();
-        return { make_box_shadow_data(box) };
+        return { make_shadow_data(box) };
     }
 
     return {};
 }
 
+Vector<ShadowData> StyleProperties::box_shadow() const
+{
+    return shadow(PropertyID::BoxShadow);
+}
+
+Vector<ShadowData> StyleProperties::text_shadow() const
+{
+    return shadow(PropertyID::TextShadow);
+}
+
 CSS::BoxSizing StyleProperties::box_sizing() const
 {
     auto value = property(CSS::PropertyID::BoxSizing);

Userland/Libraries/LibWeb/CSS/StyleProperties.h

@@ -58,6 +58,7 @@ public:
     Optional<CSS::TextDecorationLine> text_decoration_line() const;
     Optional<CSS::TextDecorationStyle> text_decoration_style() const;
     Optional<CSS::TextTransform> text_transform() const;
+    Vector<CSS::ShadowData> text_shadow() const;
     Optional<CSS::ListStyleType> list_style_type() const;
     Optional<CSS::FlexDirection> flex_direction() const;
     Optional<CSS::FlexWrap> flex_wrap() const;
@@ -106,6 +107,7 @@ private:
 
     Array<RefPtr<StyleValue>, to_underlying(CSS::last_property_id) + 1> m_property_values;
     Optional<CSS::Overflow> overflow(CSS::PropertyID) const;
+    Vector<CSS::ShadowData> shadow(CSS::PropertyID) const;
 
     mutable RefPtr<Gfx::Font> m_font;
 };

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -484,6 +484,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& specified_style)
     if (auto maybe_text_decoration_thickness = specified_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
         computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
 
+    computed_values.set_text_shadow(specified_style.text_shadow());
+
     computed_values.set_z_index(specified_style.z_index());
     computed_values.set_opacity(specified_style.opacity());