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 @@
+
Well, hello friends!
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 @@
+
+Well, hello friends!
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 @@ public:
Color background_color() const { return m_noninherited.background_color; }
Vector 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 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&& 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 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(), *glyph_run, paintable.computed_values().color(), fragment_absolute_device_rect.to_type(), scale);
+ painter.draw_text_run(baseline_start.to_type(), *glyph_run, paintable.computed_values().webkit_text_fill_color(), fragment_absolute_device_rect.to_type(), scale);
auto selection_rect = context.enclosing_device_rect(fragment.selection_rect(paintable.layout_node().first_available_font())).to_type();
if (!selection_rect.is_empty()) {