diff --git a/Libraries/LibWeb/HTML/HTMLHRElement.cpp b/Libraries/LibWeb/HTML/HTMLHRElement.cpp
index bf1ddc6cd7d..ef433a613fc 100644
--- a/Libraries/LibWeb/HTML/HTMLHRElement.cpp
+++ b/Libraries/LibWeb/HTML/HTMLHRElement.cpp
@@ -1,5 +1,6 @@
/*
* Copyright (c) 2018-2020, Andreas Kling
+ * Copyright (c) 2025, Tim Ledbetter
*
* SPDX-License-Identifier: BSD-2-Clause
*/
@@ -7,6 +8,8 @@
#include
#include
#include
+#include
+#include
#include
#include
#include
@@ -33,12 +36,28 @@ bool HTMLHRElement::is_presentational_hint(FlyString const& name) const
if (Base::is_presentational_hint(name))
return true;
- return first_is_one_of(name, HTML::AttributeNames::width);
+ return first_is_one_of(name, HTML::AttributeNames::color, HTML::AttributeNames::noshade, HTML::AttributeNames::width);
}
void HTMLHRElement::apply_presentational_hints(GC::Ref cascaded_properties) const
{
for_each_attribute([&](auto& name, auto& value) {
+ // https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2
+ if (name == HTML::AttributeNames::color || name == HTML::AttributeNames::noshade) {
+ cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopStyle, CSS::CSSKeywordValue::create(CSS::Keyword::Solid));
+ cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightStyle, CSS::CSSKeywordValue::create(CSS::Keyword::Solid));
+ cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomStyle, CSS::CSSKeywordValue::create(CSS::Keyword::Solid));
+ cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftStyle, CSS::CSSKeywordValue::create(CSS::Keyword::Solid));
+ }
+
+ // https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2:attr-hr-color-3
+ // When an hr element has a color attribute, its value is expected to be parsed using the rules for parsing a legacy color value, and if that does not return failure,
+ // the user agent is expected to treat the attribute as a presentational hint setting the element's 'color' property to the resulting color.
+ if (name == HTML::AttributeNames::color) {
+ if (auto parsed_value = parse_legacy_color_value(value); parsed_value.has_value()) {
+ cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Color, CSS::CSSColorValue::create_from_color(*parsed_value));
+ }
+ }
// https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2:maps-to-the-dimension-property
if (name == HTML::AttributeNames::width) {
if (auto parsed_value = parse_dimension_value(value)) {
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html
new file mode 100644
index 00000000000..5cd35c83ada
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/color-ref.html
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/color.html b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/color.html
new file mode 100644
index 00000000000..3050c58aecb
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/color.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+