From 449f81bfbed8343cfb49fcef4a890c33922889e5 Mon Sep 17 00:00:00 2001
From: Colin Reeder <colin@vpzom.click>
Date: Sun, 7 Jul 2024 19:41:18 -0600
Subject: [PATCH] LibWeb: Add support for -webkit-text-fill-color

---
 Tests/LibWeb/Ref/reference/webkit-text-fill-color.html      | 1 +
 Tests/LibWeb/Ref/webkit-text-fill-color.html                | 2 ++
 .../LibWeb/Text/expected/css/getComputedStyle-print-all.txt | 3 ++-
 Userland/Libraries/LibWeb/CSS/ComputedValues.h              | 4 ++++
 Userland/Libraries/LibWeb/CSS/Properties.json               | 6 ++++++
 .../Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp    | 2 ++
 Userland/Libraries/LibWeb/Layout/Node.cpp                   | 2 ++
 Userland/Libraries/LibWeb/Painting/PaintableBox.cpp         | 2 +-
 8 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 Tests/LibWeb/Ref/reference/webkit-text-fill-color.html
 create mode 100644 Tests/LibWeb/Ref/webkit-text-fill-color.html

diff --git a/Tests/LibWeb/Ref/reference/webkit-text-fill-color.html b/Tests/LibWeb/Ref/reference/webkit-text-fill-color.html
new file mode 100644
index 00000000000..91529b23845
--- /dev/null
+++ b/Tests/LibWeb/Ref/reference/webkit-text-fill-color.html
@@ -0,0 +1 @@
+<p style="color: lime; text-decoration: underline black;">Well, hello friends!</p>
diff --git a/Tests/LibWeb/Ref/webkit-text-fill-color.html b/Tests/LibWeb/Ref/webkit-text-fill-color.html
new file mode 100644
index 00000000000..0c64191a110
--- /dev/null
+++ b/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>
diff --git a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt b/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
index 4c5826aa386..3e5d2991dbd 100644
--- a/Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt
+++ b/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
diff --git a/Userland/Libraries/LibWeb/CSS/ComputedValues.h b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
index 0aa9c69bbec..28aa230ef84 100644
--- a/Userland/Libraries/LibWeb/CSS/ComputedValues.h
+++ b/Userland/Libraries/LibWeb/CSS/ComputedValues.h
@@ -432,6 +432,8 @@ class ComputedValues {
     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 @@ class ComputedValues {
         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 @@ class MutableComputedValues final : public ComputedValues {
     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; }
diff --git a/Userland/Libraries/LibWeb/CSS/Properties.json b/Userland/Libraries/LibWeb/CSS/Properties.json
index 5f59fbeb89c..6f977a62fe1 100644
--- a/Userland/Libraries/LibWeb/CSS/Properties.json
+++ b/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,
diff --git a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp b/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
index b14bb19b6f1..80e6c04a3f9 100644
--- a/Userland/Libraries/LibWeb/CSS/ResolvedCSSStyleDeclaration.cpp
+++ b/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:
diff --git a/Userland/Libraries/LibWeb/Layout/Node.cpp b/Userland/Libraries/LibWeb/Layout/Node.cpp
index 27c728187e3..acd5a669c34 100644
--- a/Userland/Libraries/LibWeb/Layout/Node.cpp
+++ b/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());
diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
index d6c349a7d78..73d44ecd4de 100644
--- a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp
+++ b/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()) {