LibWeb: Add SVGSVGElement.viewBox attribute

This attribute has some compatbility issues...
- The spec says it should be an SVGAnimatedRect which contains
  a DOMRect and a DOMReadOnlyRect.
- Blink gives you an SVGAnimatedRect with 2x SVGRect
- Gecko gives you an SVGAnimatedRect with 2x SVGRect? (nullable)

I ended up with something similar to Gecko, an SVGAnimatedRect
with 2x DOMRect? (nullable)

With this fixed, we can now load https://polar.sh/ :^)

Tests/LibWeb/Text/expected/SVG/svg-viewBox-attribute.txt

@@ -0,0 +1,26 @@
+  [object SVGSVGElement]
+[object SVGAnimatedRect]
+null
+null
+[object DOMRect]
+1
+2
+3
+4
+[object DOMRect]
+1
+2
+3
+4
+[object DOMRect]
+5
+6
+7
+8
+[object DOMRect]
+5
+6
+7
+8
+null
+null

Tests/LibWeb/Text/input/SVG/svg-viewBox-attribute.html

@@ -0,0 +1,39 @@
+<script src="../include.js"></script>
+<svg xmlns="http://www.w3.org/2000/svg" style="display: none" id="svg-element"></svg>
+<script>
+    test(() => {
+        const svgElement = document.getElementById("svg-element");
+        println(svgElement);
+        println(svgElement.viewBox);
+        println(svgElement.viewBox.baseVal);
+        println(svgElement.viewBox.animVal);
+
+        svgElement.setAttribute("viewBox", "1 2 3 4");
+        println(svgElement.viewBox.baseVal);
+        println(svgElement.viewBox.baseVal.x);
+        println(svgElement.viewBox.baseVal.y);
+        println(svgElement.viewBox.baseVal.width);
+        println(svgElement.viewBox.baseVal.height);
+        println(svgElement.viewBox.animVal);
+        println(svgElement.viewBox.animVal.x);
+        println(svgElement.viewBox.animVal.y);
+        println(svgElement.viewBox.animVal.width);
+        println(svgElement.viewBox.animVal.height);
+
+        svgElement.setAttribute("viewBox", "5 6 7 8");
+        println(svgElement.viewBox.baseVal);
+        println(svgElement.viewBox.baseVal.x);
+        println(svgElement.viewBox.baseVal.y);
+        println(svgElement.viewBox.baseVal.width);
+        println(svgElement.viewBox.baseVal.height);
+        println(svgElement.viewBox.animVal);
+        println(svgElement.viewBox.animVal.x);
+        println(svgElement.viewBox.animVal.y);
+        println(svgElement.viewBox.animVal.width);
+        println(svgElement.viewBox.animVal.height);
+
+        svgElement.removeAttribute("viewBox");
+        println(svgElement.viewBox.baseVal);
+        println(svgElement.viewBox.animVal);
+    });
+</script>

Userland/Libraries/LibWeb/CMakeLists.txt

@@ -559,6 +559,7 @@ set(SOURCES
     SVG/AttributeParser.cpp
     SVG/SVGAnimatedLength.cpp
     SVG/SVGAnimatedNumber.cpp
+    SVG/SVGAnimatedRect.cpp
     SVG/SVGAnimatedString.cpp
     SVG/SVGClipPathElement.cpp
     SVG/SVGDecodedImageData.cpp

Userland/Libraries/LibWeb/Forward.h

@@ -622,6 +622,7 @@ struct UnderlyingSource;
 
 namespace Web::SVG {
 class SVGAnimatedLength;
+class SVGAnimatedRect;
 class SVGCircleElement;
 class SVGClipPathElement;
 class SVGDefsElement;

Userland/Libraries/LibWeb/SVG/SVGAnimatedRect.cpp

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#include <LibWeb/Bindings/ExceptionOrUtils.h>
+#include <LibWeb/Bindings/Intrinsics.h>
+#include <LibWeb/Bindings/SVGAnimatedRectPrototype.h>
+#include <LibWeb/SVG/SVGAnimatedRect.h>
+
+namespace Web::SVG {
+
+JS_DEFINE_ALLOCATOR(SVGAnimatedRect);
+
+SVGAnimatedRect::SVGAnimatedRect(JS::Realm& realm)
+    : Bindings::PlatformObject(realm)
+{
+}
+
+SVGAnimatedRect::~SVGAnimatedRect() = default;
+
+void SVGAnimatedRect::initialize(JS::Realm& realm)
+{
+    Base::initialize(realm);
+    set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGAnimatedRectPrototype>(realm, "SVGAnimatedRect"_fly_string));
+    m_base_val = Geometry::DOMRect::create(realm, { 0, 0, 0, 0 });
+    m_anim_val = Geometry::DOMRect::create(realm, { 0, 0, 0, 0 });
+}
+
+void SVGAnimatedRect::visit_edges(Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    visitor.visit(m_base_val);
+    visitor.visit(m_anim_val);
+}
+
+JS::GCPtr<Geometry::DOMRect> SVGAnimatedRect::base_val() const
+{
+    if (m_nulled)
+        return nullptr;
+    return m_base_val;
+}
+
+JS::GCPtr<Geometry::DOMRect> SVGAnimatedRect::anim_val() const
+{
+    if (m_nulled)
+        return nullptr;
+    return m_anim_val;
+}
+
+void SVGAnimatedRect::set_nulled(bool nulled)
+{
+    m_nulled = nulled;
+}
+
+void SVGAnimatedRect::set_base_val(Gfx::DoubleRect const& rect)
+{
+    m_base_val->set_x(rect.x());
+    m_base_val->set_y(rect.y());
+    m_base_val->set_width(rect.width());
+    m_base_val->set_height(rect.height());
+}
+
+void SVGAnimatedRect::set_anim_val(Gfx::DoubleRect const& rect)
+{
+    m_anim_val->set_x(rect.x());
+    m_anim_val->set_y(rect.y());
+    m_anim_val->set_width(rect.width());
+    m_anim_val->set_height(rect.height());
+}
+
+}

Userland/Libraries/LibWeb/SVG/SVGAnimatedRect.h

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2024, Andreas Kling <kling@serenityos.org>
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+#pragma once
+
+#include <LibWeb/Bindings/PlatformObject.h>
+#include <LibWeb/Geometry/DOMRect.h>
+
+namespace Web::SVG {
+
+class SVGAnimatedRect final : public Bindings::PlatformObject {
+    WEB_PLATFORM_OBJECT(SVGAnimatedRect, Bindings::PlatformObject);
+    JS_DECLARE_ALLOCATOR(SVGAnimatedRect);
+
+public:
+    virtual ~SVGAnimatedRect();
+
+    JS::GCPtr<Geometry::DOMRect> base_val() const;
+    JS::GCPtr<Geometry::DOMRect> anim_val() const;
+
+    void set_base_val(Gfx::DoubleRect const&);
+    void set_anim_val(Gfx::DoubleRect const&);
+
+    void set_nulled(bool);
+
+private:
+    virtual void initialize(JS::Realm&) override;
+    virtual void visit_edges(Visitor&) override;
+
+    explicit SVGAnimatedRect(JS::Realm&);
+
+    JS::GCPtr<Geometry::DOMRect> m_base_val;
+    JS::GCPtr<Geometry::DOMRect> m_anim_val;
+
+    bool m_nulled { true };
+};
+
+}

Userland/Libraries/LibWeb/SVG/SVGAnimatedRect.idl

@@ -0,0 +1,11 @@
+#import <Geometry/DOMRect.idl>
+
+// https://svgwg.org/svg2-draft/types.html#InterfaceSVGAnimatedRect
+[Exposed=Window]
+interface SVGAnimatedRect {
+    // NOTE: The spec says that baseVal and animVal are not nullable, but they are nullable in some other engines.
+    [SameObject] readonly attribute DOMRect? baseVal;
+
+    // NOTE: animVal is a DOMRectReadOnly in the spec, but other engines expose a DOMRect (sometimes aliased as SVGRect).
+    [SameObject] readonly attribute DOMRect? animVal;
+};

Userland/Libraries/LibWeb/SVG/SVGFitToViewBox.idl

@@ -0,0 +1,7 @@
+#import <SVG/SVGAnimatedRect.idl>
+
+// https://svgwg.org/svg2-draft/types.html#InterfaceSVGFitToViewBox
+interface mixin SVGFitToViewBox {
+    [SameObject, ImplementedAs=view_box_for_bindings] readonly attribute SVGAnimatedRect viewBox;
+    // FIXME: [SameObject] readonly attribute SVGAnimatedPreserveAspectRatio preserveAspectRatio;
+};

Userland/Libraries/LibWeb/SVG/SVGSVGElement.cpp

@@ -14,6 +14,7 @@
 #include <LibWeb/HTML/Parser/HTMLParser.h>
 #include <LibWeb/Layout/SVGSVGBox.h>
 #include <LibWeb/SVG/AttributeNames.h>
+#include <LibWeb/SVG/SVGAnimatedRect.h>
 #include <LibWeb/SVG/SVGSVGElement.h>
 
 namespace Web::SVG {
@@ -29,6 +30,13 @@ void SVGSVGElement::initialize(JS::Realm& realm)
 {
     Base::initialize(realm);
     set_prototype(&Bindings::ensure_web_prototype<Bindings::SVGSVGElementPrototype>(realm, "SVGSVGElement"_fly_string));
+    m_view_box_for_bindings = heap().allocate<SVGAnimatedRect>(realm, realm);
+}
+
+void SVGSVGElement::visit_edges(Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    visitor.visit(m_view_box_for_bindings);
 }
 
 JS::GCPtr<Layout::Node> SVGSVGElement::create_layout_node(NonnullRefPtr<CSS::StyleProperties> style)
@@ -67,8 +75,18 @@ void SVGSVGElement::attribute_changed(FlyString const& name, Optional<String> co
 {
     SVGGraphicsElement::attribute_changed(name, value);
 
-    if (name.equals_ignoring_ascii_case(SVG::AttributeNames::viewBox))
+    if (name.equals_ignoring_ascii_case(SVG::AttributeNames::viewBox)) {
-        m_view_box = try_parse_view_box(value.value_or(String {}));
+        if (!value.has_value()) {
+            m_view_box_for_bindings->set_nulled(true);
+        } else {
+            m_view_box = try_parse_view_box(value.value_or(String {}));
+            m_view_box_for_bindings->set_nulled(!m_view_box.has_value());
+            if (m_view_box.has_value()) {
+                m_view_box_for_bindings->set_base_val(Gfx::DoubleRect { m_view_box->min_x, m_view_box->min_y, m_view_box->width, m_view_box->height });
+                m_view_box_for_bindings->set_anim_val(Gfx::DoubleRect { m_view_box->min_x, m_view_box->min_y, m_view_box->width, m_view_box->height });
+            }
+        }
+    }
     if (name.equals_ignoring_ascii_case(SVG::AttributeNames::preserveAspectRatio))
         m_preserve_aspect_ratio = AttributeParser::parse_preserve_aspect_ratio(value.value_or(String {}));
     if (name.equals_ignoring_ascii_case(SVG::AttributeNames::width) || name.equals_ignoring_ascii_case(SVG::AttributeNames::height))

Userland/Libraries/LibWeb/SVG/SVGSVGElement.h

@@ -30,10 +30,13 @@ public:
 
     void set_fallback_view_box_for_svg_as_image(Optional<ViewBox>);
 
+    JS::NonnullGCPtr<SVGAnimatedRect> view_box_for_bindings() { return *m_view_box_for_bindings; }
+
 private:
     SVGSVGElement(DOM::Document&, DOM::QualifiedName);
 
     virtual void initialize(JS::Realm&) override;
+    virtual void visit_edges(Visitor&) override;
 
     virtual bool is_svg_svg_element() const override { return true; }
 
@@ -45,6 +48,8 @@ private:
     Optional<PreserveAspectRatio> m_preserve_aspect_ratio;
 
     Optional<ViewBox> m_fallback_view_box_for_svg_as_image;
+
+    JS::GCPtr<SVGAnimatedRect> m_view_box_for_bindings;
 };
 
 }

Userland/Libraries/LibWeb/SVG/SVGSVGElement.idl

@@ -1,7 +1,10 @@
 #import <SVG/SVGGraphicsElement.idl>
+#import <SVG/SVGFitToViewBox.idl>
 
 // https://svgwg.org/svg2-draft/struct.html#InterfaceSVGSVGElement
 [Exposed=Window]
 interface SVGSVGElement : SVGGraphicsElement {
 
 };
+
+SVGSVGElement includes SVGFitToViewBox;

Userland/Libraries/LibWeb/idl_files.cmake

@@ -229,6 +229,7 @@ libweb_js_bindings(Streams/WritableStreamDefaultController)
 libweb_js_bindings(Streams/WritableStreamDefaultWriter)
 libweb_js_bindings(SVG/SVGAnimatedLength)
 libweb_js_bindings(SVG/SVGAnimatedNumber)
+libweb_js_bindings(SVG/SVGAnimatedRect)
 libweb_js_bindings(SVG/SVGAnimatedString)
 libweb_js_bindings(SVG/SVGClipPathElement)
 libweb_js_bindings(SVG/SVGDefsElement)