From baca0e5e5568b1b9b301cefa7d6cc8312b39be28 Mon Sep 17 00:00:00 2001
From: Tim Ledbetter <tim.ledbetter@ladybird.org>
Date: Tue, 1 Oct 2024 17:23:34 +0100
Subject: [PATCH] Libweb: Map `marquee` attributes to dimension properties

---
 .../expected/HTML/dimension-attributes.txt    | 18 ++++++++++++++++++
 .../Text/input/HTML/dimension-attributes.html |  6 ++++++
 .../LibWeb/HTML/HTMLMarqueeElement.cpp        | 19 +++++++++++++++++++
 3 files changed, 43 insertions(+)

diff --git a/Tests/LibWeb/Text/expected/HTML/dimension-attributes.txt b/Tests/LibWeb/Text/expected/HTML/dimension-attributes.txt
index 8a0f341ff1e..1d8eb369d9c 100644
--- a/Tests/LibWeb/Text/expected/HTML/dimension-attributes.txt
+++ b/Tests/LibWeb/Text/expected/HTML/dimension-attributes.txt
@@ -1,3 +1,21 @@
 Test hr.width = "100" maps to width: 100px
 Test hr.width = " 00110 " maps to width: 110px
 Test hr.width = "120." maps to width: 120px
+Test marquee.hspace = "100" maps to marginLeft: 100px
+Test marquee.hspace = " 00110 " maps to marginLeft: 110px
+Test marquee.hspace = "120." maps to marginLeft: 120px
+Test marquee.hspace = "100" maps to marginRight: 100px
+Test marquee.hspace = " 00110 " maps to marginRight: 110px
+Test marquee.hspace = "120." maps to marginRight: 120px
+Test marquee.vspace = "100" maps to marginTop: 100px
+Test marquee.vspace = " 00110 " maps to marginTop: 110px
+Test marquee.vspace = "120." maps to marginTop: 120px
+Test marquee.vspace = "100" maps to marginBottom: 100px
+Test marquee.vspace = " 00110 " maps to marginBottom: 110px
+Test marquee.vspace = "120." maps to marginBottom: 120px
+Test marquee.width = "100" maps to width: 100px
+Test marquee.width = " 00110 " maps to width: 110px
+Test marquee.width = "120." maps to width: 120px
+Test marquee.height = "100" maps to height: 100px
+Test marquee.height = " 00110 " maps to height: 110px
+Test marquee.height = "120." maps to height: 120px
diff --git a/Tests/LibWeb/Text/input/HTML/dimension-attributes.html b/Tests/LibWeb/Text/input/HTML/dimension-attributes.html
index b4e81573132..656d5c24582 100644
--- a/Tests/LibWeb/Text/input/HTML/dimension-attributes.html
+++ b/Tests/LibWeb/Text/input/HTML/dimension-attributes.html
@@ -4,6 +4,12 @@
     test(() => {
         const tests = [
             { elementName: "hr", attribute: "width", mappedProperty: "width" },
+            { elementName: "marquee", attribute: "hspace", mappedProperty: "marginLeft" },
+            { elementName: "marquee", attribute: "hspace", mappedProperty: "marginRight" },
+            { elementName: "marquee", attribute: "vspace", mappedProperty: "marginTop" },
+            { elementName: "marquee", attribute: "vspace", mappedProperty: "marginBottom" },
+            { elementName: "marquee", attribute: "width", mappedProperty: "width" },
+            { elementName: "marquee", attribute: "height", mappedProperty: "height" },
         ];
         const values = ["100", " 00110 ", "120."];
 
diff --git a/Userland/Libraries/LibWeb/HTML/HTMLMarqueeElement.cpp b/Userland/Libraries/LibWeb/HTML/HTMLMarqueeElement.cpp
index c9180920f7c..8243b377432 100644
--- a/Userland/Libraries/LibWeb/HTML/HTMLMarqueeElement.cpp
+++ b/Userland/Libraries/LibWeb/HTML/HTMLMarqueeElement.cpp
@@ -39,6 +39,25 @@ void HTMLMarqueeElement::apply_presentational_hints(CSS::StyleProperties& style)
             auto color = parse_legacy_color_value(value);
             if (color.has_value())
                 style.set_property(CSS::PropertyID::BackgroundColor, CSS::CSSColorValue::create_from_color(color.value()));
+        } else if (name == HTML::AttributeNames::height) {
+            // https://html.spec.whatwg.org/multipage/rendering.html#the-marquee-element-2:maps-to-the-dimension-property
+            if (auto parsed_value = parse_dimension_value(value)) {
+                style.set_property(CSS::PropertyID::Height, *parsed_value);
+            }
+        } else if (name == HTML::AttributeNames::hspace) {
+            if (auto parsed_value = parse_dimension_value(value)) {
+                style.set_property(CSS::PropertyID::MarginLeft, *parsed_value);
+                style.set_property(CSS::PropertyID::MarginRight, *parsed_value);
+            }
+        } else if (name == HTML::AttributeNames::vspace) {
+            if (auto parsed_value = parse_dimension_value(value)) {
+                style.set_property(CSS::PropertyID::MarginTop, *parsed_value);
+                style.set_property(CSS::PropertyID::MarginBottom, *parsed_value);
+            }
+        } else if (name == HTML::AttributeNames::width) {
+            if (auto parsed_value = parse_dimension_value(value)) {
+                style.set_property(CSS::PropertyID::Width, *parsed_value);
+            }
         }
     });
 }