LibWeb: Add support for HTMLHRElement size presentational hint

Author: https://github.com/veeti
Commit: 8ab3549585
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/6155
Reviewed-by: https://github.com/tcl3 ✅

Libraries/LibWeb/HTML/HTMLHRElement.cpp

@@ -12,6 +12,7 @@
 #include <LibWeb/CSS/StyleValues/KeywordStyleValue.h>
 #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/HTML/HTMLHRElement.h>
+#include <LibWeb/HTML/Numbers.h>
 #include <LibWeb/HTML/Parser/HTMLParser.h>
 
 namespace Web::HTML {
@@ -36,7 +37,7 @@ 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::align, HTML::AttributeNames::color, HTML::AttributeNames::noshade, HTML::AttributeNames::width);
+    return first_is_one_of(name, HTML::AttributeNames::align, HTML::AttributeNames::color, HTML::AttributeNames::noshade, HTML::AttributeNames::width, HTML::AttributeNames::size);
 }
 
 void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
@@ -71,6 +72,39 @@ void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties>
                 cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Color, CSS::ColorStyleValue::create_from_color(*parsed_value, CSS::ColorSyntax::Legacy));
             }
         }
+
+        // If an hr element has either a color attribute or a noshade attribute, and furthermore also has a size attribute,
+        // and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error,
+        // then the user agent is expected to use the parsed value divided by two as a pixel length for presentational hints
+        // for the properties 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' on the element.
+        bool has_color_or_noshade = has_attribute(HTML::AttributeNames::color) || has_attribute(HTML::AttributeNames::noshade);
+        if (name == HTML::AttributeNames::size && has_color_or_noshade) {
+            if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value()) {
+                auto size_value = CSS::LengthStyleValue::create(CSS::Length::make_px(parsed_value.value() / 2.0));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderTopWidth, size_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderRightWidth, size_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomWidth, size_value);
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftWidth, size_value);
+            }
+
+        } else if (name == HTML::AttributeNames::size && !has_color_or_noshade) {
+            // Otherwise, if an hr element has neither a color attribute nor a noshade attribute, but does have a size attribute,
+            // and parsing that attribute's value using the rules for parsing non-negative integers doesn't generate an error,
+            // then: if the parsed value is one, then the user agent is expected to use the attribute as a presentational hint
+            // setting the element's 'border-bottom-width' to 0; otherwise, if the parsed value is greater than one,
+            // then the user agent is expected to use the parsed value minus two as a pixel length for presentational hints
+            // for the 'height' property on the element.
+            if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value()) {
+                if (parsed_value.value() == 1) {
+                    cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderBottomWidth,
+                        CSS::LengthStyleValue::create(CSS::Length::make_px(0)));
+                } else if (parsed_value.value() > 1) {
+                    cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::Height,
+                        CSS::LengthStyleValue::create(CSS::Length::make_px(parsed_value.value() - 2)));
+                }
+            }
+        }
+
         // 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)) {

Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/size-ref.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #foo {
+            height: 50px;
+            box-sizing: border-box;
+        }
+        #bar {
+            border-bottom-width: 0px;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+<body>
+    <hr id="foo">
+    <hr id="bar">
+</body>
+</html>
+

Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/size-with-color-or-noshade-ref.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        hr {
+            border-width: 25px;
+        }
+    </style>
+</head>
+<body>
+    <hr color="black">
+    <hr color="totally-not-a-color">
+    <hr noshade>
+    <hr color="black" noshade>
+</body>
+</html>
+

Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/size-with-color-or-noshade.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2" />
+<title>hr elements: Tests behaviour of a size attribute with color/noshade attributes present</title>
+<link rel="author" title="Simon Wülker" href="mailto:simon.wuelker@arcor.de">
+<link rel="match" href="../../../../../../expected/wpt-import//html/rendering/non-replaced-elements/the-hr-element-0/size-with-color-or-noshade-ref.html">
+<meta name="assert" content="This checks that the size attribute of a hr element changes the border widths when color/noshade attributes are present">
+<body>
+    <hr size=50 color="black">
+    <hr size=50 color="totally-not-a-color">
+    <hr size=50 noshade>
+    <hr size=50 color="black" noshade>
+</body>
+</html>
+

Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/size.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#the-hr-element-2" />
+<title>hr elements: Tests behaviour of a size attribute without color/noshade attributes</title>
+<link rel="author" title="Simon Wülker" href="mailto:simon.wuelker@arcor.de">
+<link rel="match" href="../../../../../../expected/wpt-import//html/rendering/non-replaced-elements/the-hr-element-0/size-ref.html">
+<meta name="assert" content="This checks that the size attribute of a hr element changes its height.">
+<body>
+    <hr size=50>
+    <hr size=1>
+</body>
+</html>
+