LibWeb: Map embedded content element attributes to dimension properties

Tests/LibWeb/Text/expected/HTML/dimension-attributes.txt

@@ -19,3 +19,39 @@ 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
+Test object.hspace = "100" maps to marginLeft: 100px
+Test object.hspace = " 00110 " maps to marginLeft: 110px
+Test object.hspace = "120." maps to marginLeft: 120px
+Test object.hspace = "100" maps to marginRight: 100px
+Test object.hspace = " 00110 " maps to marginRight: 110px
+Test object.hspace = "120." maps to marginRight: 120px
+Test object.vspace = "100" maps to marginTop: 100px
+Test object.vspace = " 00110 " maps to marginTop: 110px
+Test object.vspace = "120." maps to marginTop: 120px
+Test object.vspace = "100" maps to marginBottom: 100px
+Test object.vspace = " 00110 " maps to marginBottom: 110px
+Test object.vspace = "120." maps to marginBottom: 120px
+Test object.width = "100" maps to width: 100px
+Test object.width = " 00110 " maps to width: 110px
+Test object.width = "120." maps to width: 120px
+Test object.height = "100" maps to height: 100px
+Test object.height = " 00110 " maps to height: 110px
+Test object.height = "120." maps to height: 120px
+Test embed.hspace = "100" maps to marginLeft: 100px
+Test embed.hspace = " 00110 " maps to marginLeft: 110px
+Test embed.hspace = "120." maps to marginLeft: 120px
+Test embed.hspace = "100" maps to marginRight: 100px
+Test embed.hspace = " 00110 " maps to marginRight: 110px
+Test embed.hspace = "120." maps to marginRight: 120px
+Test embed.vspace = "100" maps to marginTop: 100px
+Test embed.vspace = " 00110 " maps to marginTop: 110px
+Test embed.vspace = "120." maps to marginTop: 120px
+Test embed.vspace = "100" maps to marginBottom: 100px
+Test embed.vspace = " 00110 " maps to marginBottom: 110px
+Test embed.vspace = "120." maps to marginBottom: 120px
+Test embed.width = "100" maps to width: 100px
+Test embed.width = " 00110 " maps to width: 110px
+Test embed.width = "120." maps to width: 120px
+Test embed.height = "100" maps to height: 100px
+Test embed.height = " 00110 " maps to height: 110px
+Test embed.height = "120." maps to height: 120px

Tests/LibWeb/Text/input/HTML/dimension-attributes.html

@@ -10,6 +10,18 @@
             { elementName: "marquee", attribute: "vspace", mappedProperty: "marginBottom" },
             { elementName: "marquee", attribute: "width", mappedProperty: "width" },
             { elementName: "marquee", attribute: "height", mappedProperty: "height" },
+            { elementName: "object", attribute: "hspace", mappedProperty: "marginLeft" },
+            { elementName: "object", attribute: "hspace", mappedProperty: "marginRight" },
+            { elementName: "object", attribute: "vspace", mappedProperty: "marginTop" },
+            { elementName: "object", attribute: "vspace", mappedProperty: "marginBottom" },
+            { elementName: "object", attribute: "width", mappedProperty: "width" },
+            { elementName: "object", attribute: "height", mappedProperty: "height" },
+            { elementName: "embed", attribute: "hspace", mappedProperty: "marginLeft" },
+            { elementName: "embed", attribute: "hspace", mappedProperty: "marginRight" },
+            { elementName: "embed", attribute: "vspace", mappedProperty: "marginTop" },
+            { elementName: "embed", attribute: "vspace", mappedProperty: "marginBottom" },
+            { elementName: "embed", attribute: "width", mappedProperty: "width" },
+            { elementName: "embed", attribute: "height", mappedProperty: "height" },
         ];
         const values = ["100", " 00110 ", "120."];
 
@@ -18,7 +30,7 @@
             document.body.appendChild(element);
             const style = document.defaultView.getComputedStyle(element);
             for (const value of values) {
-                element[attribute] = value;
+                element.setAttribute(attribute, value);
                 println(`Test ${elementName}.${attribute} = "${value}" maps to ${mappedProperty}: ${style[mappedProperty]}`);
             }
             element.remove();

Userland/Libraries/LibWeb/HTML/HTMLEmbedElement.cpp

@@ -6,7 +6,10 @@
 
 #include <LibWeb/Bindings/HTMLEmbedElementPrototype.h>
 #include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/CSS/StyleProperties.h>
+#include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
 #include <LibWeb/HTML/HTMLEmbedElement.h>
+#include <LibWeb/HTML/Parser/HTMLParser.h>
 
 namespace Web::HTML {
 
@@ -25,4 +28,35 @@ void HTMLEmbedElement::initialize(JS::Realm& realm)
     WEB_SET_PROTOTYPE_FOR_INTERFACE(HTMLEmbedElement);
 }
 
+void HTMLEmbedElement::apply_presentational_hints(CSS::StyleProperties& style) const
+{
+    for_each_attribute([&](auto& name, auto& value) {
+        if (name == HTML::AttributeNames::align) {
+            if (value.equals_ignoring_ascii_case("center"sv))
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+            else if (value.equals_ignoring_ascii_case("middle"sv))
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
+        } else if (name == HTML::AttributeNames::height) {
+            if (auto parsed_value = parse_dimension_value(value))
+                style.set_property(CSS::PropertyID::Height, *parsed_value);
+        }
+        // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property
+        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);
+            }
+        }
+    });
+}
+
 }

Userland/Libraries/LibWeb/HTML/HTMLEmbedElement.h

@@ -22,6 +22,7 @@ private:
 
     virtual bool is_html_embed_element() const override { return true; }
     virtual void initialize(JS::Realm&) override;
+    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
 };
 
 }

Userland/Libraries/LibWeb/HTML/HTMLInputElement.cpp

@@ -1530,6 +1530,55 @@ void HTMLInputElement::form_associated_element_was_removed(DOM::Node*)
     set_shadow_root(nullptr);
 }
 
+void HTMLInputElement::apply_presentational_hints(CSS::StyleProperties& style) const
+{
+    if (type_state() != TypeAttributeState::ImageButton)
+        return;
+
+    for_each_attribute([&](auto& name, auto& value) {
+        if (name == HTML::AttributeNames::align) {
+            if (value.equals_ignoring_ascii_case("center"sv))
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+            else if (value.equals_ignoring_ascii_case("middle"sv))
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
+        } else if (name == HTML::AttributeNames::border) {
+            if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value() && *parsed_value > 0) {
+                auto width_style_value = CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value));
+                style.set_property(CSS::PropertyID::BorderTopWidth, width_style_value);
+                style.set_property(CSS::PropertyID::BorderRightWidth, width_style_value);
+                style.set_property(CSS::PropertyID::BorderBottomWidth, width_style_value);
+                style.set_property(CSS::PropertyID::BorderLeftWidth, width_style_value);
+
+                auto border_style_value = CSS::CSSKeywordValue::create(CSS::Keyword::Solid);
+                style.set_property(CSS::PropertyID::BorderTopStyle, border_style_value);
+                style.set_property(CSS::PropertyID::BorderRightStyle, border_style_value);
+                style.set_property(CSS::PropertyID::BorderBottomStyle, border_style_value);
+                style.set_property(CSS::PropertyID::BorderLeftStyle, border_style_value);
+            }
+        } else if (name == HTML::AttributeNames::height) {
+            if (auto parsed_value = parse_dimension_value(value)) {
+                style.set_property(CSS::PropertyID::Height, *parsed_value);
+            }
+        }
+        // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property
+        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);
+            }
+        }
+    });
+}
+
 // https://html.spec.whatwg.org/multipage/input.html#the-input-element%3Aconcept-node-clone-ext
 WebIDL::ExceptionOr<void> HTMLInputElement::cloned(DOM::Node& copy, bool)
 {

Userland/Libraries/LibWeb/HTML/HTMLInputElement.h

@@ -216,6 +216,8 @@ private:
 
     void type_attribute_changed(TypeAttributeState old_state, TypeAttributeState new_state);
 
+    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+
     // ^DOM::Node
     virtual bool is_html_input_element() const final { return true; }
 

Userland/Libraries/LibWeb/HTML/HTMLObjectElement.cpp

@@ -7,6 +7,8 @@
 #include <LibGfx/Bitmap.h>
 #include <LibWeb/Bindings/HTMLObjectElementPrototype.h>
 #include <LibWeb/CSS/StyleComputer.h>
+#include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
+#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/DocumentLoading.h>
 #include <LibWeb/DOM/Event.h>
@@ -14,6 +16,8 @@
 #include <LibWeb/HTML/HTMLMediaElement.h>
 #include <LibWeb/HTML/HTMLObjectElement.h>
 #include <LibWeb/HTML/ImageRequest.h>
+#include <LibWeb/HTML/Numbers.h>
+#include <LibWeb/HTML/Parser/HTMLParser.h>
 #include <LibWeb/HTML/PotentialCORSRequest.h>
 #include <LibWeb/Layout/ImageBox.h>
 #include <LibWeb/Loader/ResourceLoader.h>
@@ -74,6 +78,54 @@ void HTMLObjectElement::form_associated_element_was_removed(DOM::Node*)
     destroy_the_child_navigable();
 }
 
+void HTMLObjectElement::apply_presentational_hints(CSS::StyleProperties& style) const
+{
+    for_each_attribute([&](auto& name, auto& value) {
+        if (name == HTML::AttributeNames::align) {
+            if (value.equals_ignoring_ascii_case("center"sv))
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Center));
+            else if (value.equals_ignoring_ascii_case("middle"sv))
+                style.set_property(CSS::PropertyID::TextAlign, CSS::CSSKeywordValue::create(CSS::Keyword::Middle));
+        } else if (name == HTML::AttributeNames::border) {
+            if (auto parsed_value = parse_non_negative_integer(value); parsed_value.has_value() && *parsed_value > 0) {
+                auto width_style_value = CSS::LengthStyleValue::create(CSS::Length::make_px(*parsed_value));
+                style.set_property(CSS::PropertyID::BorderTopWidth, width_style_value);
+                style.set_property(CSS::PropertyID::BorderRightWidth, width_style_value);
+                style.set_property(CSS::PropertyID::BorderBottomWidth, width_style_value);
+                style.set_property(CSS::PropertyID::BorderLeftWidth, width_style_value);
+
+                auto border_style_value = CSS::CSSKeywordValue::create(CSS::Keyword::Solid);
+                style.set_property(CSS::PropertyID::BorderTopStyle, border_style_value);
+                style.set_property(CSS::PropertyID::BorderRightStyle, border_style_value);
+                style.set_property(CSS::PropertyID::BorderBottomStyle, border_style_value);
+                style.set_property(CSS::PropertyID::BorderLeftStyle, border_style_value);
+            }
+        }
+        // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property-3
+        else if (name == HTML::AttributeNames::height) {
+            if (auto parsed_value = parse_dimension_value(value)) {
+                style.set_property(CSS::PropertyID::Height, *parsed_value);
+            }
+        }
+        // https://html.spec.whatwg.org/multipage/rendering.html#attributes-for-embedded-content-and-images:maps-to-the-dimension-property
+        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);
+            }
+        }
+    });
+}
+
 // https://html.spec.whatwg.org/multipage/iframe-embed-object.html#attr-object-data
 String HTMLObjectElement::data() const
 {

Userland/Libraries/LibWeb/HTML/HTMLObjectElement.h

@@ -56,6 +56,8 @@ private:
 
     virtual void initialize(JS::Realm&) override;
 
+    virtual void apply_presentational_hints(CSS::StyleProperties&) const override;
+
     virtual JS::GCPtr<Layout::Node> create_layout_node(NonnullRefPtr<CSS::StyleProperties>) override;
 
     bool has_ancestor_media_element_or_object_element_not_showing_fallback_content() const;