Add width and height content attributes to <model>

https://bugs.webkit.org/show_bug.cgi?id=243974 rdar://99014926 Reviewed by Antoine Quint. For consistency with <img> and <video>, <model> should have width and height content attributes that set presentational style for the width and height properties. * LayoutTests/model-element/model-element-width-height-expected.txt: Added. * LayoutTests/model-element/model-element-width-height-visual-expected.html: Added. * LayoutTests/model-element/model-element-width-height-visual.html: Added. * LayoutTests/model-element/model-element-width-height.html: Added. * Source/WebCore/Modules/model-element/HTMLModelElement.cpp: (WebCore::HTMLModelElement::collectPresentationalHintsForAttribute): (WebCore::HTMLModelElement::hasPresentationalHintsForAttribute const): * Source/WebCore/Modules/model-element/HTMLModelElement.h: * Source/WebCore/Modules/model-element/HTMLModelElement.idl: Canonical link: https://commits.webkit.org/257294@main
Constellation · Dec 2, 2022 · cf600d6 · cf600d6
1 parent a9cc8e3
commit cf600d6
Show file tree

Hide file tree

Showing 7 changed files with 106 additions and 0 deletions.
diff --git a/LayoutTests/model-element/model-element-width-height-expected.txt b/LayoutTests/model-element/model-element-width-height-expected.txt
@@ -0,0 +1,9 @@
+
+PASS HTMLModelElement has width and height properties
+PASS HTMLModelElement width and height properties reflect width and height attribute values
+PASS <model> width and height attributes reflect HTMLModelElement width and height properties
+PASS <model> has default CSS size when no width or height attribute is used
+PASS <model> width and height attributes influence automatic size
+PASS <model> width and height attributes do not win over non-auto width and height property values
+PASS <model> size computation takes aspect-ratio property into account
+
diff --git a/LayoutTests/model-element/model-element-width-height-visual-expected.html b/LayoutTests/model-element/model-element-width-height-visual-expected.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<model style="width: 200px; height: 400px; background-color: blue;"></model>
diff --git a/LayoutTests/model-element/model-element-width-height-visual.html b/LayoutTests/model-element/model-element-width-height-visual.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<model width="200" height="400" style="background-color: blue;"></model>
diff --git a/LayoutTests/model-element/model-element-width-height.html b/LayoutTests/model-element/model-element-width-height.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html><!-- webkit-test-runner [ ModelElementEnabled=true ] -->
+<script src="../resources/testharness.js"></script>
+<script src="../resources/testharnessreport.js"></script>
+<body>
+<script>
+test(() => {
+    const model = document.createElement("model");
+    assert_idl_attribute(model, "width", "width is defined");
+    assert_idl_attribute(model, "height", "width is defined");
+}, "HTMLModelElement has width and height properties");
+
+test(() => {
+    const model = document.createElement("model");
+    model.setAttribute("width", "100");
+    model.setAttribute("height", "200");
+    assert_equals(model.width, 100, "width attribute value is reflected by HTMLModelElement width property");
+    assert_equals(model.height, 200, "height attribute value is reflected by HTMLModelElement height property");
+}, "HTMLModelElement width and height properties reflect width and height attribute values");
+
+test(() => {
+    const model = document.createElement("model");
+    model.width = 100;
+    model.height = 200;
+    assert_equals(model.getAttribute("width"), "100", "HTMLModelElement width property value is reflected by width attribute");
+    assert_equals(model.getAttribute("height"), "200", "HTMLModelElement height property value is reflected by height attribute");
+}, "<model> width and height attributes reflect HTMLModelElement width and height properties");
+
+test(() => {
+    const model = document.createElement("model");
+    document.body.append(model);
+    assert_equals(getComputedStyle(model).width, "300px", "default width is 300");
+    assert_equals(getComputedStyle(model).height, "150px", "default height is 150");
+    model.remove();
+}, "<model> has default CSS size when no width or height attribute is used");
+
+test(() => {
+    const model = document.createElement("model");
+    model.width = "400";
+    model.height = "100";
+    document.body.append(model);
+    assert_equals(getComputedStyle(model).width, "400px", "automatic size is influenced by width attribute");
+    assert_equals(getComputedStyle(model).height, "100px", "automatic size is influenced by height attribute");
+    model.remove();
+}, "<model> width and height attributes influence automatic size");
+
+test(() => {
+    const model = document.createElement("model");
+    model.style.width = "200px";
+    model.style.height = "50px";
+    model.width = "400";
+    model.height = "100";
+    document.body.append(model);
+    assert_equals(getComputedStyle(model).width, "200px", "non-auto width value wins over width attribute");
+    assert_equals(getComputedStyle(model).height, "50px", "non-auto height value wins over height attribute");
+    model.remove();
+}, "<model> width and height attributes do not win over non-auto width and height property values");
+
+test(() => {
+    const model = document.createElement("model");
+    model.width = 200;
+    model.style.aspectRatio = "1 / 2";
+    document.body.append(model);
+    assert_equals(getComputedStyle(model).height, "400px", "aspect-ratio influences size");
+    model.remove();
+}, "<model> size computation takes aspect-ratio property into account");
+</script>
diff --git a/Source/WebCore/Modules/model-element/HTMLModelElement.cpp b/Source/WebCore/Modules/model-element/HTMLModelElement.cpp
@@ -65,6 +65,8 @@
 
 namespace WebCore {
 
+using namespace HTMLNames;
+
 WTF_MAKE_ISO_ALLOCATED_IMPL(HTMLModelElement);
 
 HTMLModelElement::HTMLModelElement(const QualifiedName& tagName, Document& document)
@@ -678,6 +680,25 @@ String HTMLModelElement::inlinePreviewUUIDForTesting() const
 }
 #endif
 
+void HTMLModelElement::collectPresentationalHintsForAttribute(const QualifiedName& name, const AtomString& value, MutableStyleProperties& style)
+{
+    if (name == widthAttr) {
+        addHTMLLengthToStyle(style, CSSPropertyWidth, value);
+        applyAspectRatioFromWidthAndHeightAttributesToStyle(value, attributeWithoutSynchronization(heightAttr), style);
+    } else if (name == heightAttr) {
+        addHTMLLengthToStyle(style, CSSPropertyHeight, value);
+        applyAspectRatioFromWidthAndHeightAttributesToStyle(attributeWithoutSynchronization(widthAttr), value, style);
+    } else
+        HTMLElement::collectPresentationalHintsForAttribute(name, value, style);
+}
+
+bool HTMLModelElement::hasPresentationalHintsForAttribute(const QualifiedName& name) const
+{
+    if (name == widthAttr || name == heightAttr)
+        return true;
+    return HTMLElement::hasPresentationalHintsForAttribute(name);
+}
+
 }
 
 #endif // ENABLE(MODEL_ELEMENT)
diff --git a/Source/WebCore/Modules/model-element/HTMLModelElement.h b/Source/WebCore/Modules/model-element/HTMLModelElement.h
@@ -134,6 +134,10 @@ class HTMLModelElement final : public HTMLElement, private CachedRawResourceClie
     void didMoveToNewDocument(Document& oldDocument, Document& newDocument) final;
     void attributeChanged(const QualifiedName&, const AtomString& oldValue, const AtomString& newValue, AttributeModificationReason) final;
 
+    // StyledElement
+    bool hasPresentationalHintsForAttribute(const QualifiedName&) const final;
+    void collectPresentationalHintsForAttribute(const QualifiedName&, const AtomString&, MutableStyleProperties&) final;
+
     // Rendering overrides.
     RenderPtr<RenderElement> createElementRenderer(RenderStyle&&, const RenderTreePosition&) final;
     void didAttachRenderers() final;

diff --git a/Source/WebCore/Modules/model-element/HTMLModelElement.idl b/Source/WebCore/Modules/model-element/HTMLModelElement.idl
@@ -30,6 +30,8 @@
     Exposed=Window,
     JSGenerateToNativeObject
 ] interface HTMLModelElement : HTMLElement {
+    [CEReactions=NotNeeded, Reflect] attribute unsigned long width;
+    [CEReactions=NotNeeded, Reflect] attribute unsigned long height;
     [URL] readonly attribute USVString currentSrc;
 
     readonly attribute boolean complete;