LibWeb: Apply presentational hints for the HTMLHRElement align attribute

tcl3 · awesomekling · commit 0e470d5cdfa9 · 2025-02-18T12:06:44.000+01:00
diff --git a/Libraries/LibWeb/HTML/HTMLHRElement.cpp b/Libraries/LibWeb/HTML/HTMLHRElement.cpp
@@ -36,7 +36,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::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);
 }
 
 void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties> cascaded_properties) const
@@ -50,6 +50,19 @@ void HTMLHRElement::apply_presentational_hints(GC::Ref<CSS::CascadedProperties>
             cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::BorderLeftStyle, CSS::CSSKeywordValue::create(CSS::Keyword::Solid));
         }
 
+        if (name == HTML::AttributeNames::align) {
+            if (value.equals_ignoring_ascii_case("left"sv)) {
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::LengthStyleValue::create(CSS::Length::make_px(0)));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
+            } else if (value.equals_ignoring_ascii_case("right"sv)) {
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::LengthStyleValue::create(CSS::Length::make_px(0)));
+            } else if (value.equals_ignoring_ascii_case("center"sv)) {
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginLeft, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
+                cascaded_properties->set_property_from_presentational_hint(CSS::PropertyID::MarginRight, CSS::CSSKeywordValue::create(CSS::Keyword::Auto));
+            }
+        }
+
         // 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.
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html
@@ -0,0 +1,31 @@
+
+<!doctype html>
+<meta charset=utf-8>
+<style>
+.hr {
+  color: gray;
+  border-style: inset;
+  border-width: 1px;
+  margin: 0.5em auto;
+  width: 100px;
+}
+
+.left {
+  margin-left: 0;
+}
+
+.right {
+  margin-right: 0;
+}
+</style>
+<div class='hr'></div>
+<div class='hr left'></div>
+<div class='hr'></div>
+<div class='hr right'></div>
+<div class='hr'></div>
+
+<div class='hr'></div>
+<div class='hr left'></div>
+<div class='hr'></div>
+<div class='hr right'></div>
+<div class='hr'></div>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/align.html b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/align.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel="match" href="../../../../../../expected/wpt-import/html/rendering/non-replaced-elements/the-hr-element-0/align-ref.html">
+<style>
+hr {
+  width: 100px;
+}
+</style>
+
+<hr align=>
+<hr align=left>
+<hr align=center>
+<hr align=right>
+<hr align=foobar>
+
+<script>
+// Test the IDL attribute
+const values = ['', 'left', 'center', 'right', 'foobar'];
+values.forEach(value => {
+  const hr = document.createElement('hr');
+  hr.align = value;
+  document.body.appendChild(hr);
+});
+</script>
