LibWeb: Add support for -webkit-text-fill-color

Author: https://github.com/vpzomtrrfrt
Commit: https://github.com/LadybirdBrowser/ladybird/commit/449f81bfbe
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/502
Reviewed-by: https://github.com/AtkinsSJ
Reviewed-by: https://github.com/skyrising

Tests/LibWeb/Ref/reference/webkit-text-fill-color.html

@@ -0,0 +1 @@
+<p style="color: lime; text-decoration: underline black;">Well, hello friends!</p>

Tests/LibWeb/Ref/webkit-text-fill-color.html

@@ -0,0 +1,2 @@
+<link rel="match" href="reference/webkit-text-fill-color.html" />
+<p style="text-decoration: underline; -webkit-text-fill-color: lime">Well, hello friends!</p>

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

@@ -1,4 +1,5 @@
 -webkit-appearance: auto
+-webkit-text-fill-color: rgb(0, 0, 0)
 accent-color: auto
 align-content: normal
 align-items: normal
@@ -85,7 +86,7 @@ grid-row-start: auto
 grid-template-areas: 
 grid-template-columns: 
 grid-template-rows: 
-height: 1479px
+height: 1496px
 image-rendering: auto
 inline-size: auto
 inset-block-end: auto

Userland/Libraries/LibWeb/CSS/ComputedValues.h

@@ -432,6 +432,8 @@ public:
     Color background_color() const { return m_noninherited.background_color; }
     Vector<BackgroundLayerData> const& background_layers() const { return m_noninherited.background_layers; }
 
+    Color webkit_text_fill_color() const { return m_inherited.webkit_text_fill_color; }
+
     CSS::ListStyleType list_style_type() const { return m_inherited.list_style_type; }
     CSS::ListStylePosition list_style_position() const { return m_inherited.list_style_position; }
 
@@ -503,6 +505,7 @@ protected:
         CSS::CaptionSide caption_side { InitialValues::caption_side() };
         Color color { InitialValues::color() };
         Optional<Color> accent_color {};
+        Color webkit_text_fill_color { InitialValues::color() };
         CSS::Cursor cursor { InitialValues::cursor() };
         CSS::ImageRendering image_rendering { InitialValues::image_rendering() };
         CSS::PointerEvents pointer_events { InitialValues::pointer_events() };
@@ -667,6 +670,7 @@ public:
     void set_text_transform(CSS::TextTransform value) { m_inherited.text_transform = value; }
     void set_text_shadow(Vector<ShadowData>&& value) { m_inherited.text_shadow = move(value); }
     void set_text_indent(CSS::LengthPercentage value) { m_inherited.text_indent = move(value); }
+    void set_webkit_text_fill_color(Color value) { m_inherited.webkit_text_fill_color = value; }
     void set_position(CSS::Positioning position) { m_noninherited.position = position; }
     void set_white_space(CSS::WhiteSpace value) { m_inherited.white_space = value; }
     void set_width(CSS::Size const& width) { m_noninherited.width = width; }

Userland/Libraries/LibWeb/CSS/Properties.json

@@ -5,6 +5,12 @@
     ],
     "max-values": 1
   },
+  "-webkit-text-fill-color": {
+    "animation-type": "by-computed-value",
+    "inherited": true,
+    "initial": "currentColor",
+    "valid-types": ["color"]
+  },
   "accent-color": {
     "animation-type": "by-computed-value",
     "inherited": true,

Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp

@@ -506,6 +506,8 @@ RefPtr<StyleValue const> ResolvedCSSStyleDeclaration::style_value_for_property(L
         auto left = style_value_for_property(layout_node, PropertyID::PaddingLeft);
         return style_value_for_sided_shorthand(top.release_nonnull(), right.release_nonnull(), bottom.release_nonnull(), left.release_nonnull());
     }
+    case PropertyID::WebkitTextFillColor:
+        return ColorStyleValue::create(layout_node.computed_values().webkit_text_fill_color());
     case PropertyID::Invalid:
         return IdentifierStyleValue::create(ValueID::Invalid);
     case PropertyID::Custom:

Userland/Libraries/LibWeb/Layout/Node.cpp

@@ -654,6 +654,8 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
     if (auto maybe_text_decoration_thickness = computed_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_webkit_text_fill_color(computed_style.color_or_fallback(CSS::PropertyID::WebkitTextFillColor, *this, computed_values.color()));
+
     computed_values.set_text_shadow(computed_style.text_shadow(*this));
 
     computed_values.set_z_index(computed_style.z_index());

Userland/Libraries/LibWeb/Painting/PaintableBox.cpp

@@ -669,7 +669,7 @@ void paint_text_fragment(PaintContext& context, TextPaintable const& paintable,
 
         DevicePixelPoint baseline_start { fragment_absolute_device_rect.x(), fragment_absolute_device_rect.y() + context.rounded_device_pixels(fragment.baseline()) };
         auto scale = context.device_pixels_per_css_pixel();
-        painter.draw_text_run(baseline_start.to_type<int>(), *glyph_run, paintable.computed_values().color(), fragment_absolute_device_rect.to_type<int>(), scale);
+        painter.draw_text_run(baseline_start.to_type<int>(), *glyph_run, paintable.computed_values().webkit_text_fill_color(), fragment_absolute_device_rect.to_type<int>(), scale);
 
         auto selection_rect = context.enclosing_device_rect(fragment.selection_rect(paintable.layout_node().first_available_font())).to_type<int>();
         if (!selection_rect.is_empty()) {