diff --git a/Libraries/LibWeb/SVG/SVGEllipseElement.cpp b/Libraries/LibWeb/SVG/SVGEllipseElement.cpp
index 4da7396588d28..cf37ca90f04b6 100644
--- a/Libraries/LibWeb/SVG/SVGEllipseElement.cpp
+++ b/Libraries/LibWeb/SVG/SVGEllipseElement.cpp
@@ -19,27 +19,29 @@ SVGEllipseElement::SVGEllipseElement(DOM::Document& document, DOM::QualifiedName
 {
 }
 
-void SVGEllipseElement::attribute_changed(Utf16FlyString const& name, Optional<Utf16String> const& old_value, Optional<Utf16String> const& value, Optional<Utf16FlyString> const& namespace_)
-{
-    Base::attribute_changed(name, old_value, value, namespace_);
-
-    if (name == SVG::AttributeNames::cx) {
-        m_center_x = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::cy) {
-        m_center_y = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::rx) {
-        m_radius_x = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::ry) {
-        m_radius_y = AttributeParser::parse_number_percentage(value.value_or({}));
-    }
-}
-
 Gfx::Path SVGEllipseElement::get_path(CSSPixelSize viewport_size)
 {
-    float rx = m_radius_x.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float());
-    float ry = m_radius_y.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float());
-    float cx = m_center_x.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float());
-    float cy = m_center_y.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float());
+    auto const& computed_values = this->computed_values();
+
+    auto computed_rx = computed_values->rx();
+    auto computed_ry = computed_values->ry();
+
+    float rx = computed_rx.to_px_or_zero(viewport_size.width()).to_float();
+    float ry = computed_ry.to_px_or_zero(viewport_size.height()).to_float();
+
+    // https://svgwg.org/svg2-draft/geometry.html#RxProperty
+    // When the computed value of ‘rx’ is auto, the used radius is equal to the absolute length used for ry, creating a
+    // circular arc. If both ‘rx’ and ‘ry’ have a computed value of auto, the used value is 0.
+    if (computed_rx.is_auto())
+        rx = computed_ry.to_px_or_zero(viewport_size.height()).to_float();
+
+    // When the computed value of ‘ry’ is auto, the used radius is equal to the absolute length used for rx, creating a
+    // circular arc. If both ‘rx’ and ‘ry’ have a computed value of auto, the used value is 0.
+    if (computed_ry.is_auto())
+        ry = computed_rx.to_px_or_zero(viewport_size.width()).to_float();
+
+    float cx = computed_values->cx().to_px(viewport_size.width()).to_float();
+    float cy = computed_values->cy().to_px(viewport_size.height()).to_float();
     Gfx::Path path;
 
     // A negative radius is invalid. If only one radius is invalid, SVG uses
diff --git a/Libraries/LibWeb/SVG/SVGEllipseElement.h b/Libraries/LibWeb/SVG/SVGEllipseElement.h
index 830acc873f482..d4f19b895c715 100644
--- a/Libraries/LibWeb/SVG/SVGEllipseElement.h
+++ b/Libraries/LibWeb/SVG/SVGEllipseElement.h
@@ -19,8 +19,6 @@ class SVGEllipseElement final : public SVGGeometryElement {
 public:
     virtual ~SVGEllipseElement() override = default;
 
-    virtual void attribute_changed(Utf16FlyString const& name, Optional<Utf16String> const& old_value, Optional<Utf16String> const& value, Optional<Utf16FlyString> const& namespace_) override;
-
     virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
 
     // AD-HOC: The spec states that the cx, cy, rx and ry IDL attributes reflect the respective computed values and their
@@ -41,11 +39,6 @@ class SVGEllipseElement final : public SVGGeometryElement {
 
 private:
     SVGEllipseElement(DOM::Document&, DOM::QualifiedName);
-
-    Optional<NumberPercentage> m_center_x;
-    Optional<NumberPercentage> m_center_y;
-    Optional<NumberPercentage> m_radius_x;
-    Optional<NumberPercentage> m_radius_y;
 };
 
 }
diff --git a/Libraries/LibWeb/SVG/SVGImageElement.cpp b/Libraries/LibWeb/SVG/SVGImageElement.cpp
index b98b112c85808..3fcd65f32e9cb 100644
--- a/Libraries/LibWeb/SVG/SVGImageElement.cpp
+++ b/Libraries/LibWeb/SVG/SVGImageElement.cpp
@@ -7,6 +7,7 @@
 #include "SVGImageElement.h"
 #include <LibGC/Heap.h>
 #include <LibGfx/DecodedImageFrame.h>
+#include <LibWeb/CSS/Sizing.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/DocumentObserver.h>
 #include <LibWeb/DOM/Event.h>
@@ -55,15 +56,7 @@ void SVGImageElement::attribute_changed(Utf16FlyString const& name, Optional<Utf
 {
     Base::attribute_changed(name, old_value, value, namespace_);
 
-    if (name == SVG::AttributeNames::x) {
-        m_x = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::y) {
-        m_y = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::width) {
-        m_width = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::height) {
-        m_height = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::href) {
+    if (name == SVG::AttributeNames::href) {
         // https://svgwg.org/svg2-draft/linking.html#XLinkRefAttrs
         // For backwards compatibility, elements with an ‘href’ attribute also recognize an ‘href’ attribute in the
         // XLink namespace. If the element is in the XLink namespace, it does not recognize an ‘href’ attribute in the
@@ -82,31 +75,29 @@ void SVGImageElement::attribute_changed(Utf16FlyString const& name, Optional<Utf
 
 Gfx::FloatRect SVGImageElement::bounding_box(CSSPixelSize viewport_size) const
 {
-    Optional<float> width;
-    if (m_width.has_value())
-        width = m_width->resolve_relative_to(viewport_size.width().to_float());
+    auto computed_values = this->computed_values();
 
-    Optional<float> height;
-    if (m_height.has_value())
-        height = m_height->resolve_relative_to(viewport_size.height().to_float());
+    // https://w3c.github.io/svgwg/svg2-draft/embedded.html#Placement
+    // Computation of automatically-sized values follows the Default Sizing Algorithm defined for replaced elements in
+    // CSS layout [css-images-3]. In particular, when the referenced resource does not have an intrinsic size (such as
+    // image types with no defined dimensions), it is assumed to have a width of 300px and a height of 150px.
+    auto specified_width = computed_values->width().is_length_percentage() ? computed_values->width().to_px(viewport_size.width()) : Optional<CSSPixels> {};
+    auto specified_height = computed_values->height().is_length_percentage() ? computed_values->height().to_px(viewport_size.height()) : Optional<CSSPixels> {};
 
-    if (!height.has_value() && width.has_value() && intrinsic_aspect_ratio().has_value())
-        height = width.value() / intrinsic_aspect_ratio().value().to_float();
+    CSS::SizeWithAspectRatio intrinsic_size_with_aspect_ratio { this->intrinsic_width(), this->intrinsic_height(), this->intrinsic_aspect_ratio() };
 
-    if (!width.has_value() && height.has_value() && intrinsic_aspect_ratio().has_value())
-        width = height.value() * intrinsic_aspect_ratio().value().to_float();
+    CSSPixelSize default_size {};
 
-    if (!width.has_value() && intrinsic_width().has_value())
-        width = intrinsic_width()->to_float();
+    if (decoded_image_data())
+        default_size = CSSPixelSize { 300, 150 };
 
-    if (!height.has_value() && intrinsic_height().has_value())
-        height = intrinsic_height()->to_float();
+    auto sizing = CSS::run_default_sizing_algorithm(specified_width, specified_height, intrinsic_size_with_aspect_ratio, default_size);
 
     return {
-        m_x.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float()),
-        m_y.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float()),
-        width.value_or(0.0f),
-        height.value_or(0.0f),
+        computed_values->x().to_px(viewport_size.width()).to_float(),
+        computed_values->y().to_px(viewport_size.height()).to_float(),
+        sizing.width().to_float(),
+        sizing.height().to_float()
     };
 }
 
diff --git a/Libraries/LibWeb/SVG/SVGImageElement.h b/Libraries/LibWeb/SVG/SVGImageElement.h
index 4956d7de31839..e7ffd7df45cac 100644
--- a/Libraries/LibWeb/SVG/SVGImageElement.h
+++ b/Libraries/LibWeb/SVG/SVGImageElement.h
@@ -67,11 +67,6 @@ class SVGImageElement final
     virtual RefPtr<Layout::Node> create_layout_node(NonnullRefPtr<CSS::ComputedValues const>) override;
     virtual void decoded_image_data_did_update() override { set_needs_repaint(); }
 
-    Optional<NumberPercentage> m_x;
-    Optional<NumberPercentage> m_y;
-    Optional<NumberPercentage> m_width;
-    Optional<NumberPercentage> m_height;
-
     Optional<URL::URL> m_href;
 
     GC::Ptr<HTML::SharedResourceRequest> m_resource_request;
diff --git a/Libraries/LibWeb/SVG/SVGRectElement.cpp b/Libraries/LibWeb/SVG/SVGRectElement.cpp
index 635ae61d2afcc..8dda19225965d 100644
--- a/Libraries/LibWeb/SVG/SVGRectElement.cpp
+++ b/Libraries/LibWeb/SVG/SVGRectElement.cpp
@@ -5,10 +5,6 @@
  */
 
 #include <LibGfx/Path.h>
-#include <LibWeb/SVG/AttributeNames.h>
-#include <LibWeb/SVG/AttributeParser.h>
-#include <LibWeb/SVG/SVGAnimatedLength.h>
-#include <LibWeb/SVG/SVGLength.h>
 #include <LibWeb/SVG/SVGRectElement.h>
 
 namespace Web::SVG {
@@ -20,31 +16,20 @@ SVGRectElement::SVGRectElement(DOM::Document& document, DOM::QualifiedName quali
 {
 }
 
-void SVGRectElement::attribute_changed(Utf16FlyString const& name, Optional<Utf16String> const& old_value, Optional<Utf16String> const& value, Optional<Utf16FlyString> const& namespace_)
-{
-    Base::attribute_changed(name, old_value, value, namespace_);
-
-    if (name == SVG::AttributeNames::x) {
-        m_x = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::y) {
-        m_y = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::width) {
-        m_width = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::height) {
-        m_height = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::rx) {
-        m_radius_x = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::ry) {
-        m_radius_y = AttributeParser::parse_number_percentage(value.value_or({}));
-    }
-}
-
 Gfx::Path SVGRectElement::get_path(CSSPixelSize viewport_size)
 {
-    float width = m_width.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float());
-    float height = m_height.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float());
-    float x = m_x.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float());
-    float y = m_y.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float());
+    auto computed_values = this->computed_values();
+
+    auto computed_width = computed_values->width();
+    auto computed_height = computed_values->height();
+
+    // FIXME: to_px rounds prematurely here - we shouldn't round to fixed point CSSPixels until converting to CSS pixel
+    //        space from SVG user space - this likely extends to other SVG geometry elements as well.
+    auto width = computed_width.is_length_percentage() ? computed_width.length_percentage().to_px(viewport_size.width()).to_double() : 0.0;
+    auto height = computed_height.is_length_percentage() ? computed_height.length_percentage().to_px(viewport_size.height()).to_double() : 0.0;
+
+    auto x = computed_values->x().to_px(viewport_size.width()).to_double();
+    auto y = computed_values->y().to_px(viewport_size.height()).to_double();
 
     Gfx::Path path;
     // Non-positive dimensions disable rendering. In particular, a negative
@@ -53,7 +38,7 @@ Gfx::Path SVGRectElement::get_path(CSSPixelSize viewport_size)
     if (width <= 0 || height <= 0)
         return path;
 
-    auto corner_radii = calculate_used_corner_radius_values(viewport_size);
+    auto corner_radii = calculate_used_corner_radius_values(width, height);
     float rx = corner_radii.width();
     float ry = corner_radii.height();
 
@@ -106,45 +91,66 @@ Gfx::Path SVGRectElement::get_path(CSSPixelSize viewport_size)
     return path;
 }
 
-Gfx::FloatSize SVGRectElement::calculate_used_corner_radius_values(CSSPixelSize viewport_size) const
+Gfx::FloatSize SVGRectElement::calculate_used_corner_radius_values(float used_width, float used_height) const
 {
-    // 1. Let rx and ry be length values.
-    float rx = 0;
-    float ry = 0;
-
-    // 2. If neither ‘rx’ nor ‘ry’ are properly specified, then set both rx and ry to 0. (This will result in square corners.)
-    if (!m_radius_x.has_value() && !m_radius_y.has_value()) {
-        rx = 0;
-        ry = 0;
-    }
-    // 3. Otherwise, if a properly specified value is provided for ‘rx’, but not for ‘ry’, then set both rx and ry to the value of ‘rx’.
-    else if (m_radius_x.has_value() && !m_radius_y.has_value()) {
-        rx = m_radius_x.value().resolve_relative_to(viewport_size.width().to_float());
-        ry = m_radius_x.value().resolve_relative_to(viewport_size.width().to_float());
-    }
-    // 4. Otherwise, if a properly specified value is provided for ‘ry’, but not for ‘rx’, then set both rx and ry to the value of ‘ry’.
-    else if (m_radius_y.has_value() && !m_radius_x.has_value()) {
-        rx = m_radius_y.value().resolve_relative_to(viewport_size.height().to_float());
-        ry = m_radius_y.value().resolve_relative_to(viewport_size.height().to_float());
-    }
-    // 5. Otherwise, both ‘rx’ and ‘ry’ were specified properly. Set rx to the value of ‘rx’ and ry to the value of ‘ry’.
-    else {
-        rx = m_radius_x.value().resolve_relative_to(viewport_size.width().to_float());
-        ry = m_radius_y.value().resolve_relative_to(viewport_size.height().to_float());
+    // The used values for rx and ry are determined from the computed values by following these steps in order:
+
+    auto const& computed_values = this->computed_values();
+
+    auto computed_rx = computed_values->rx();
+    auto computed_ry = computed_values->ry();
+
+    // 1. If both rx and ry have a computed value of auto (since auto is the initial value for both properties, this
+    //    will also occur if neither are specified by the author or if all author-supplied values are invalid), then
+    //    the used value of both rx and ry is 0. (This will result in square corners.)
+    if (computed_rx.is_auto() && computed_ry.is_auto())
+        return { 0, 0 };
+
+    // 2. Otherwise, convert specified values to absolute values as follows:
+    float used_rx;
+    float used_ry;
+
+    {
+        // 1. If rx is set to a length value or a percentage, but ry is auto, calculate an absolute length equivalent
+        //    for rx, resolving percentages against the used width of the rectangle; the absolute value for ry is the
+        //    same.
+        if (!computed_rx.is_auto() && computed_ry.is_auto()) {
+            used_rx = computed_rx.to_px_or_zero(CSSPixels { used_width }).to_float();
+            used_ry = used_rx;
+        }
+
+        // 2. If ry is set to a length value or a percentage, but rx is auto, calculate the absolute length equivalent
+        //    for ry, resolving percentages against the used height of the rectangle; the absolute value for rx is the
+        //    same.
+        if (!computed_ry.is_auto() && computed_rx.is_auto()) {
+            used_ry = computed_ry.to_px_or_zero(CSSPixels { used_height }).to_float();
+            used_rx = used_ry;
+        }
+
+        // 3. If both rx and ry were set to lengths or percentages, absolute values are generated individually,
+        //    resolving rx percentages against the used width, and resolving ry percentages against the used height.
+        if (!computed_rx.is_auto() && !computed_ry.is_auto()) {
+            used_rx = computed_rx.to_px_or_zero(CSSPixels { used_width }).to_float();
+            used_ry = computed_ry.to_px_or_zero(CSSPixels { used_height }).to_float();
+        }
     }
 
-    // 6. If rx is greater than half of ‘width’, then set rx to half of ‘width’.
-    auto half_width = m_width.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float()) / 2;
-    if (rx > half_width)
-        rx = half_width;
+    // 3. Finally, apply clamping to generate the used values:
+    {
+        // 1. If the absolute rx (after the above steps) is greater than half of the used width, then the used value of
+        //    rx is half of the used width.
+        if (used_rx > used_width / 2)
+            used_rx = used_width / 2;
+
+        // 2. If the absolute ry (after the above steps) is greater than half of the used height, then the used value of
+        //    ry is half of the used height.
+        if (used_ry > used_height / 2)
+            used_ry = used_height / 2;
 
-    // 7. If ry is greater than half of ‘height’, then set ry to half of ‘height’.
-    auto half_height = m_height.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float()) / 2;
-    if (ry > half_height)
-        ry = half_height;
+        // 3. Otherwise, the used values of rx and ry are the absolute values computed previously.
+    }
 
-    // 8. The effective values of ‘rx’ and ‘ry’ are rx and ry, respectively.
-    return { rx, ry };
+    return { used_rx, used_ry };
 }
 
 // Reflected length accessors are generated by SVGElement's reflection macro.
diff --git a/Libraries/LibWeb/SVG/SVGRectElement.h b/Libraries/LibWeb/SVG/SVGRectElement.h
index 6d877f825e4f3..b9da19b07d1a6 100644
--- a/Libraries/LibWeb/SVG/SVGRectElement.h
+++ b/Libraries/LibWeb/SVG/SVGRectElement.h
@@ -19,8 +19,6 @@ class SVGRectElement final : public SVGGeometryElement {
 public:
     virtual ~SVGRectElement() override = default;
 
-    virtual void attribute_changed(Utf16FlyString const& name, Optional<Utf16String> const& old_value, Optional<Utf16String> const& value, Optional<Utf16FlyString> const& namespace_) override;
-
     virtual Gfx::Path get_path(CSSPixelSize viewport_size) override;
 
     // AD-HOC: The spec states that the x, y, width, height, rx and ry IDL attributes reflect the respective computed values
@@ -48,14 +46,7 @@ class SVGRectElement final : public SVGGeometryElement {
 private:
     SVGRectElement(DOM::Document&, DOM::QualifiedName);
 
-    Gfx::FloatSize calculate_used_corner_radius_values(CSSPixelSize viewport_size) const;
-
-    Optional<NumberPercentage> m_x;
-    Optional<NumberPercentage> m_y;
-    Optional<NumberPercentage> m_width;
-    Optional<NumberPercentage> m_height;
-    Optional<NumberPercentage> m_radius_x;
-    Optional<NumberPercentage> m_radius_y;
+    Gfx::FloatSize calculate_used_corner_radius_values(float used_width, float used_height) const;
 };
 
 }
diff --git a/Libraries/LibWeb/SVG/SVGUseElement.cpp b/Libraries/LibWeb/SVG/SVGUseElement.cpp
index dd97fba63b0c6..1a51113c6858b 100644
--- a/Libraries/LibWeb/SVG/SVGUseElement.cpp
+++ b/Libraries/LibWeb/SVG/SVGUseElement.cpp
@@ -170,12 +170,7 @@ void SVGUseElement::attribute_changed(Utf16FlyString const& name, Optional<Utf16
 {
     Base::attribute_changed(name, old_value, value, namespace_);
 
-    // https://svgwg.org/svg2-draft/struct.html#UseLayout
-    if (name == SVG::AttributeNames::x) {
-        m_x = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::y) {
-        m_y = AttributeParser::parse_number_percentage(value.value_or({}));
-    } else if (name == SVG::AttributeNames::href || name == SVG::AttributeNames::xlink_href) {
+    if (name == SVG::AttributeNames::href || name == SVG::AttributeNames::xlink_href) {
         // When the ‘href’ attribute is set (or, in the absence of an ‘href’ attribute, an ‘xlink:href’ attribute), the user agent must process the URL.
         process_the_url(value);
     }
@@ -222,8 +217,10 @@ Gfx::AffineTransform SVGUseElement::element_transform() const
             viewport_size = { svg_svg_layout_node->computed_values().width().to_px(0), svg_svg_layout_node->computed_values().height().to_px(0) };
     }
 
-    auto x = m_x.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.width().to_float());
-    auto y = m_y.value_or(NumberPercentage::create_number(0)).resolve_relative_to(viewport_size.height().to_float());
+    auto computed_values = this->computed_values();
+
+    auto x = computed_values->x().to_px(viewport_size.width()).to_float();
+    auto y = computed_values->y().to_px(viewport_size.height()).to_float();
 
     // The x and y properties define an additional transformation (translate(x,y), where x and y represent the computed value of the corresponding property)
     // to be applied to the ‘use’ element, after any transformations specified with other properties
diff --git a/Libraries/LibWeb/SVG/SVGUseElement.h b/Libraries/LibWeb/SVG/SVGUseElement.h
index d4df573b44d9c..18f1123c161f4 100644
--- a/Libraries/LibWeb/SVG/SVGUseElement.h
+++ b/Libraries/LibWeb/SVG/SVGUseElement.h
@@ -83,8 +83,6 @@ class SVGUseElement final
     void register_for_referenced_element_changes();
     void unregister_for_referenced_element_changes();
 
-    Optional<NumberPercentage> m_x;
-    Optional<NumberPercentage> m_y;
     bool m_needs_document_complete_reclone { false };
 
     Optional<URL::URL> m_href;
diff --git a/Tests/LibWeb/Layout/expected/svg/rect-percentages.txt b/Tests/LibWeb/Layout/expected/svg/rect-percentages.txt
index 677eecce829ca..a82922566514e 100644
--- a/Tests/LibWeb/Layout/expected/svg/rect-percentages.txt
+++ b/Tests/LibWeb/Layout/expected/svg/rect-percentages.txt
@@ -3,14 +3,14 @@ Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] [BFC] children
     BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 200 0+0+8] children: inline
       frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x200] baseline: 200
       SVGSVGBox <svg> at [8,8] [0+0+0 300 0+0+0] [0+0+0 200 0+0+0] [SVG] children: not-inline
-        SVGGeometryBox <rect> at [83,108] [0+0+0 99 0+0+0] [0+0+0 99 0+0+0] children: not-inline
+        SVGGeometryBox <rect> at [83,108] [0+0+0 98.953125 0+0+0] [0+0+0 98.953125 0+0+0] children: not-inline
       TextNode <#text> (not painted)
 
 ViewportPaintable (Viewport<#document>) [0,0 800x600]
   PaintableWithLines (BlockContainer<HTML>) [0,0 800x216]
     PaintableWithLines (BlockContainer<BODY>) [8,8 784x200]
       SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x200]
-        SVGPathPaintable (SVGGeometryBox<rect>) [83,108 99x99]
+        SVGPathPaintable (SVGGeometryBox<rect>) [83,108 98.953125x98.953125]
 
 SC for Viewport<#document> [0,0 800x600] (z-index: auto)
  SC for BlockContainer<HTML> [0,0 800x216] (z-index: auto)
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-images/object-position-svg-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-images/object-position-svg-001-ref.html
deleted file mode 100644
index 61c386d88f645..0000000000000
--- a/Tests/LibWeb/Ref/expected/wpt-import/css/css-images/object-position-svg-001-ref.html
+++ /dev/null
@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Reftest Reference</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <style type="text/css">
-      div {
-        background: lightgray;
-        margin-right: 2px;
-        background-image: url("support/colors-16x8.svg");
-        background-size: contain;
-        background-repeat: no-repeat;
-        float: left;
-        width: 20px;
-        height: 20px;
-      }
-
-      .op_y-7  { background-position: 50%  -7% }
-      .op_y13  { background-position: 50%  13% }
-      .op_y23  { background-position: 50%  23% }
-      .op_y50  { background-position: 50%  50% }
-      .op_y75  { background-position: 50%  75% }
-      .op_y88  { background-position: 50%  88% }
-      .op_y111 { background-position: 50% 111% }
-
-    </style>
-  </head>
-  <body>
-    <div class="op_y-7"></div>
-    <div class="op_y13"></div>
-    <div class="op_y23"></div>
-    <div class="op_y50"></div>
-    <div class="op_y75"></div>
-    <div class="op_y88"></div>
-    <div class="op_y111"></div>
-  </body>
-</html>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport-ref.html
new file mode 100644
index 0000000000000..70576349bc034
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport-ref.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<title>Changing container size of SVG with calc() cx/cy/rx/ry on &lt;ellipse> (reference)</title>
+<div id="hcontainer" style="width: 100px; height: 100px; position: absolute">
+  <svg width="100" height="100">
+    <ellipse cy="50" rx="100" ry="50"/>
+  </svg>
+  <svg width="100" height="100">
+    <ellipse cx="50" cy="50" rx="50" ry="50"/>
+  </svg>
+</div>
+<div id="vcontainer" style="width: 100px; height: 100px; position: absolute; left: 116px">
+  <svg width="100" height="100">
+    <ellipse cx="50" rx="50" ry="100"/>
+  </svg>
+  <svg width="100%" height="100%">
+    <ellipse cx="50" cy="50" rx="50" ry="50"/>
+  </svg>
+</div>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/svg/geometry/reftests/ellipse-ref.svg b/Tests/LibWeb/Ref/expected/wpt-import/svg/geometry/reftests/ellipse-ref.svg
new file mode 100644
index 0000000000000..57e6f4d5e854c
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/svg/geometry/reftests/ellipse-ref.svg
@@ -0,0 +1,4 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="75" cy="120" rx="60" ry="50" fill="blue" />
+</svg>
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath-ref.html
new file mode 100644
index 0000000000000..a3305134d8a21
--- /dev/null
+++ b/Tests/LibWeb/Ref/expected/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" type="text/css" href="../../..../../../fonts/ahem.css">
+<style>
+text { font-family: Ahem; font-size: 20px; fill: black; }
+</style>
+<svg width="320" height="200">
+  <defs>
+    <ellipse id="explicit-1" cx="80" cy="100" rx="60" ry="60"/>
+    <ellipse id="explicit-2" cx="240" cy="100" rx="60" ry="60"/>
+  </defs>
+  <text><textPath href="#explicit-1">XXXXXXXX</textPath></text>
+  <text><textPath href="#explicit-2">XXXXXXXX</textPath></text>
+</svg>
+</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-images/object-position-svg-001o.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-images/object-position-svg-001o.html
deleted file mode 100644
index f001c46a264a4..0000000000000
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-images/object-position-svg-001o.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<!--
-     Any copyright is dedicated to the Public Domain.
-     http://creativecommons.org/publicdomain/zero/1.0/
--->
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>CSS Test: various 'object-position' values on a fixed-size object element, with a SVG image and 'object-fit:contain'.</title>
-    <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
-    <link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
-    <link rel="match" href="../../../../expected/wpt-import/css/css-images/object-position-svg-001-ref.html">
-    <style type="text/css">
-      object {
-        background: lightgray;
-        margin-right: 2px;
-        object-fit: contain;
-        float: left;
-        width: 20px;
-        height: 20px;
-      }
-
-      .op_y-7  { object-position: 50%  -7% }
-      .op_y13  { object-position: 50%  13% }
-      .op_y23  { object-position: 50%  23% }
-      .op_y50  { object-position: 50%  50% }
-      .op_y75  { object-position: 50%  75% }
-      .op_y88  { object-position: 50%  88% }
-      .op_y111 { object-position: 50% 111% }
-
-    </style>
-  </head>
-  <body>
-    <object data="support/colors-16x8.svg" class="op_y-7"></object>
-    <object data="support/colors-16x8.svg" class="op_y13"></object>
-    <object data="support/colors-16x8.svg" class="op_y23"></object>
-    <object data="support/colors-16x8.svg" class="op_y50"></object>
-    <object data="support/colors-16x8.svg" class="op_y75"></object>
-    <object data="support/colors-16x8.svg" class="op_y88"></object>
-    <object data="support/colors-16x8.svg" class="op_y111"></object>
-  </body>
-</html>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-images/support/colors-16x8.svg b/Tests/LibWeb/Ref/input/wpt-import/css/css-images/support/colors-16x8.svg
deleted file mode 100644
index 08e36594026d0..0000000000000
--- a/Tests/LibWeb/Ref/input/wpt-import/css/css-images/support/colors-16x8.svg
+++ /dev/null
@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- This SVG file is meant to mimic colors-8x16.png as closely
-     as possible. In particular, this SVG has:
-      (1) an intrinsic size (from the 'width' & 'height' attributes)
-      (2) preserveAspectRatio="none", allowing it to stretch in the
-          same way that a raster image would.
--->
-<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"
-     width="16" height="8" viewBox="0 0 16 8">
-  <rect x="0" y="0" width="8px" height="4px" style="fill: blue"/>
-  <rect x="8" y="0" width="8px" height="4px" style="fill: black"/>
-  <rect x="0" y="4" width="8px" height="4px" style="fill: rgb(255,128,128)"/>
-  <rect x="8" y="4" width="8px" height="4px" style="fill: lime"/>
-</svg>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/svg/geometry/reftests/ellipse-001.svg b/Tests/LibWeb/Ref/input/wpt-import/svg/geometry/reftests/ellipse-001.svg
new file mode 100644
index 0000000000000..1097497f605fa
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/svg/geometry/reftests/ellipse-001.svg
@@ -0,0 +1,17 @@
+<svg width="300" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>Ellipse coordinates and radii specified by properties</title>
+  <html:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/geometry.html"/>
+  <html:link rel="match"  href="../../../../../expected/wpt-import/svg/geometry/reftests/ellipse-ref.svg" />
+  <style>
+    ellipse {
+      cx: 75px;
+      cy: 120px;
+      rx: 60px;
+      ry: 50px;
+      fill: blue;
+    }
+  </style>
+  <ellipse />
+</svg>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport.html b/Tests/LibWeb/Ref/input/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport.html
new file mode 100644
index 0000000000000..83f57bc08a869
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html class="reftest-wait">
+<title>Changing container size of SVG with calc() cx/cy/rx/ry on &lt;ellipse></title>
+<link rel="match" href="../../../../../expected/wpt-import/svg/geometry/reftests/ellipse-calc-dynamic-viewport-ref.html">
+<script src="../../../common/rendering-utils.js"></script>
+<script src="../../../common/reftest-wait.js"></script>
+<div id="hcontainer" style="width: 50px; height: 100px; position: absolute">
+  <svg width="100%" height="100%">
+    <ellipse cy="50" style="rx: calc(50% + 50px)" ry="50"/>
+  </svg>
+  <svg width="100%" height="100%">
+    <ellipse style="cx: calc(25% + 25px)" cy="50" rx="50" ry="50"/>
+  </svg>
+</div>
+<div id="vcontainer" style="width: 100px; height: 50px; position: absolute; left: 116px">
+  <svg width="100%" height="100%">
+    <ellipse cx="50" rx="50" style="ry: calc(50% + 50px)"/>
+  </svg>
+  <svg width="100%" height="100%">
+    <ellipse cx="50" style="cy: calc(25% + 25px)" rx="50" ry="50"/>
+  </svg>
+</div>
+<script>
+  waitForAtLeastOneFrame().then(() => {
+    document.getElementById('hcontainer').style.width = '100px';
+    document.getElementById('vcontainer').style.height = '100px';
+    takeScreenshot();
+  });
+</script>
diff --git a/Tests/LibWeb/Ref/input/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath.html b/Tests/LibWeb/Ref/input/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath.html
new file mode 100644
index 0000000000000..a37665bd95f19
--- /dev/null
+++ b/Tests/LibWeb/Ref/input/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<title>SVG ellipse with auto rx/ry referenced from &lt;textPath&gt; resolves per SVG 2</title>
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/shapes.html#EllipseElement">
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/text.html#TextPathElement">
+<link rel="match" href="../../../../../expected/wpt-import/svg/shapes/reftests/ellipse-auto-rx-textpath-ref.html">
+<link rel="stylesheet" type="text/css" href="../../..../../../fonts/ahem.css">
+<meta name="assert" content="An ellipse with auto rx (or auto ry) referenced as the path geometry of a <textPath> must lay glyphs out identically to an ellipse with the resolved explicit value, per SVG 2 §10.4.">
+<style>
+text { font-family: Ahem; font-size: 20px; fill: black; }
+</style>
+<svg width="320" height="200">
+  <defs>
+    <ellipse id="auto-rx" cx="80" cy="100" rx="auto" ry="60"/>
+    <ellipse id="auto-ry" cx="240" cy="100" rx="60" ry="auto"/>
+  </defs>
+  <text><textPath href="#auto-rx">XXXXXXXX</textPath></text>
+  <text><textPath href="#auto-ry">XXXXXXXX</textPath></text>
+</svg>
+</html>
diff --git a/Tests/LibWeb/Text/expected/SVG/use-element-css-x-y.txt b/Tests/LibWeb/Text/expected/SVG/use-element-css-x-y.txt
new file mode 100644
index 0000000000000..fa3d26eaa433d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/SVG/use-element-css-x-y.txt
@@ -0,0 +1,2 @@
+computed: x=50px y=40px
+client rect: x=50 y=40 width=10 height=10
diff --git a/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/parsing/height-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/parsing/height-computed.txt
new file mode 100644
index 0000000000000..47db1fd0563ea
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/parsing/height-computed.txt
@@ -0,0 +1,40 @@
+Harness status: OK
+
+Found 34 tests
+
+19 Pass
+15 Fail
+Pass	SVG Geometry Properties: getComputedStyle().height, <rect> initial
+Pass	SVG Geometry Properties: getComputedStyle().height, <rect> presentation attribute
+Pass	SVG Geometry Properties: getComputedStyle().height, <rect> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().height, <rect> inline style (pixels)
+Pass	SVG Geometry Properties: getComputedStyle().height, <rect> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().height, <rect> inline style but "display: none"
+Pass	SVG Geometry Properties: getComputedStyle().height, <image> initial
+Pass	SVG Geometry Properties: getComputedStyle().height, <image> presentation attribute
+Pass	SVG Geometry Properties: getComputedStyle().height, <image> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().height, <image> inline style (pixels)
+Pass	SVG Geometry Properties: getComputedStyle().height, <image> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().height, <image> inline style but "display: none"
+Pass	SVG Geometry Properties: getComputedStyle().height, <foreignObject> initial
+Pass	SVG Geometry Properties: getComputedStyle().height, <foreignObject> presentation attribute
+Pass	SVG Geometry Properties: getComputedStyle().height, <foreignObject> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().height, <foreignObject> inline style (pixels)
+Fail	SVG Geometry Properties: getComputedStyle().height, <foreignObject> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().height, <foreignObject> inline style but "display: none"
+Fail	SVG Geometry Properties: getComputedStyle().height, <svg> initial
+Fail	SVG Geometry Properties: getComputedStyle().height, <svg> presentation attribute
+Fail	SVG Geometry Properties: getComputedStyle().height, <svg> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().height, <svg> inline style (pixels)
+Fail	SVG Geometry Properties: getComputedStyle().height, <svg> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().height, <svg> inline style but "display: none"
+Fail	SVG Geometry Properties: getComputedStyle().height, <g> initial
+Fail	SVG Geometry Properties: getComputedStyle().height, <g> initial (with dummy attribute)
+Fail	SVG Geometry Properties: getComputedStyle().height, <g> inline style (auto)
+Fail	SVG Geometry Properties: getComputedStyle().height, <g> inline style (pixels)
+Fail	SVG Geometry Properties: getComputedStyle().height, <g> inline style (percentage)
+Fail	SVG Geometry Properties: getComputedStyle().height, <text> initial
+Fail	SVG Geometry Properties: getComputedStyle().height, <text> initial (with dummy attribute)
+Fail	SVG Geometry Properties: getComputedStyle().height, <text> inline style (auto)
+Fail	SVG Geometry Properties: getComputedStyle().height, <text> inline style (pixels)
+Fail	SVG Geometry Properties: getComputedStyle().height, <text> inline style (percentage)
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/parsing/width-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/parsing/width-computed.txt
new file mode 100644
index 0000000000000..69b8b097eae3d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/parsing/width-computed.txt
@@ -0,0 +1,40 @@
+Harness status: OK
+
+Found 34 tests
+
+19 Pass
+15 Fail
+Pass	SVG Geometry Properties: getComputedStyle().width, <rect> initial
+Pass	SVG Geometry Properties: getComputedStyle().width, <rect> presentation attribute
+Pass	SVG Geometry Properties: getComputedStyle().width, <rect> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().width, <rect> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().width, <rect> inline style (pixels)
+Pass	SVG Geometry Properties: getComputedStyle().width, <rect> inline style but "display: none"
+Pass	SVG Geometry Properties: getComputedStyle().width, <image> initial
+Pass	SVG Geometry Properties: getComputedStyle().width, <image> presentation attribute
+Pass	SVG Geometry Properties: getComputedStyle().width, <image> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().width, <image> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().width, <image> inline style (pixels)
+Pass	SVG Geometry Properties: getComputedStyle().width, <image> inline style but "display: none"
+Pass	SVG Geometry Properties: getComputedStyle().width, <foreignObject> initial
+Pass	SVG Geometry Properties: getComputedStyle().width, <foreignObject> presentation attribute
+Fail	SVG Geometry Properties: getComputedStyle().width, <foreignObject> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().width, <foreignObject> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().width, <foreignObject> inline style (pixels)
+Pass	SVG Geometry Properties: getComputedStyle().width, <foreignObject> inline style but "display: none"
+Fail	SVG Geometry Properties: getComputedStyle().width, <svg> initial
+Fail	SVG Geometry Properties: getComputedStyle().width, <svg> presentation attribute
+Fail	SVG Geometry Properties: getComputedStyle().width, <svg> inline style (auto)
+Pass	SVG Geometry Properties: getComputedStyle().width, <svg> inline style (pixels)
+Fail	SVG Geometry Properties: getComputedStyle().width, <svg> inline style (percentage)
+Pass	SVG Geometry Properties: getComputedStyle().width, <svg> inline style but "display: none"
+Fail	SVG Geometry Properties: getComputedStyle().width, <g> initial
+Fail	SVG Geometry Properties: getComputedStyle().width, <g> initial (with dummy attribute)
+Fail	SVG Geometry Properties: getComputedStyle().width, <g> inline style (percentage)
+Fail	SVG Geometry Properties: getComputedStyle().width, <g> inline style (auto)
+Fail	SVG Geometry Properties: getComputedStyle().width, <g> inline style (pixels)
+Fail	SVG Geometry Properties: getComputedStyle().width, <text> initial
+Fail	SVG Geometry Properties: getComputedStyle().width, <text> initial (with dummy attribute)
+Fail	SVG Geometry Properties: getComputedStyle().width, <text> inline style (percentage)
+Fail	SVG Geometry Properties: getComputedStyle().width, <text> inline style (auto)
+Fail	SVG Geometry Properties: getComputedStyle().width, <text> inline style (pixels)
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.txt b/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.txt
new file mode 100644
index 0000000000000..b66eb2542649d
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.txt
@@ -0,0 +1,37 @@
+Harness status: OK
+
+Found 32 tests
+
+32 Pass
+Pass	<svg:image> 'auto' sizing with 256x256 png image, attributes width='64' height='64'
+Pass	<svg:image> 'auto' sizing with 256x256 png image, attributes width='128' height='64' and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with 256x256 png image, attributes width='64' height='128' and CSS 'height:auto'
+Pass	<svg:image> 'auto' sizing with 256x256 png image, attributes width='64' height='64' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image, attributes width='50' height='50'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image, attributes width='50' height='50' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image, attributes width='50' height='50' and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image, without attributes width and height and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image, attributes height='50' and 'width:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image, attributes width='50' and CSS height:auto
+Pass	<svg:image> 'auto' sizing with default sized svg image, attributes width='200' height='200' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image, attributes height='200' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image, attributes width='200' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image, without attributes width and height, no css width/height specified
+Pass	<svg:image> 'auto' sizing with default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified
+Pass	<svg:image> 'auto' sizing with default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified
+Pass	<svg:image> 'auto' sizing with svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'
+Pass	<svg:image> 'auto' sizing with svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified
+Pass	<svg:image> 'auto' sizing with svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'
+Pass	<svg:image> 'auto' sizing with svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified
+Pass	<svg:image> 'auto' sizing with 200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'
+Pass	<svg:image> 'auto' sizing with 200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image, attributes width='60' height='60' and CSS 'height:auto'
+Pass	<svg:image> 'auto' sizing with default sized svg image, attributes width='60' height='60' and CSS 'width:auto'
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/expected/wpt-import/svg/types/scripted/SVGGraphicsElement.getBBox-08.txt b/Tests/LibWeb/Text/expected/wpt-import/svg/types/scripted/SVGGraphicsElement.getBBox-08.txt
new file mode 100644
index 0000000000000..3861f6f25d564
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/wpt-import/svg/types/scripted/SVGGraphicsElement.getBBox-08.txt
@@ -0,0 +1,26 @@
+Harness status: OK
+
+Found 20 tests
+
+18 Pass
+2 Fail
+Pass	image with zero width
+Pass	image with zero height
+Pass	image with zero width and height
+Pass	image with no width/height attributes
+Pass	foreignObject with zero width
+Pass	foreignObject with zero height
+Pass	foreignObject with zero width and height
+Pass	foreignObject with no width/height attributes
+Fail	empty nested SVG element
+Pass	empty nested SVG with no attributes
+Pass	empty nested SVG with zero width and height
+Pass	anchor element wrapping zero-dimension rect
+Fail	anchor element with zero-dim and normal child: zero-dim child does not affect bbox
+Pass	zero-dim rect with translate transform
+Pass	rect with negative width and scale(2) (not rendered)
+Pass	zero-dim rect inside rotated group (not rendered)
+Pass	zero-width rect with scale(3) (not rendered)
+Pass	zero-radius circle with translate (not rendered)
+Pass	group with translate transform — bbox in group's local coords
+Pass	rotated group with zero-dim child — bbox is zero
\ No newline at end of file
diff --git a/Tests/LibWeb/Text/input/SVG/use-element-css-x-y.html b/Tests/LibWeb/Text/input/SVG/use-element-css-x-y.html
new file mode 100644
index 0000000000000..6b81b5bc9220b
--- /dev/null
+++ b/Tests/LibWeb/Text/input/SVG/use-element-css-x-y.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<script src="../include.js"></script>
+<style>
+    body {
+        margin: 0;
+    }
+
+    #target {
+        x: 50px;
+        y: 40px;
+    }
+</style>
+<svg width="200" height="100">
+    <defs>
+        <rect id="source" width="10" height="10"></rect>
+    </defs>
+    <use id="target" href="#source" x="5" y="6"></use>
+</svg>
+<script>
+    test(() => {
+        const target = document.getElementById("target");
+        const style = getComputedStyle(target);
+        println(`computed: x=${style.x} y=${style.y}`);
+
+        const box = target.getBoundingClientRect();
+        println(`client rect: x=${box.x} y=${box.y} width=${box.width} height=${box.height}`);
+    });
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/svg/geometry/parsing/height-computed.svg b/Tests/LibWeb/Text/input/wpt-import/svg/geometry/parsing/height-computed.svg
new file mode 100644
index 0000000000000..057b21516f4ce
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/svg/geometry/parsing/height-computed.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG Geometry Properties: getComputedStyle().height</title>
+  <metadata>
+    <h:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing"/>
+    <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
+  </metadata>
+  <h:script src="../../../resources/testharness.js"/>
+  <h:script src="../../../resources/testharnessreport.js"/>
+  <svg width="200" height="100" id="test-content">
+    <rect/>
+    <rect width="100" height="200"/>
+    <rect width="42" style="height: auto"/>
+    <rect width="42" style="height: 20px"/>
+    <rect width="42" style="height: 40%"/>
+    <rect width="42" style="height: 80%; display: none"/>
+
+    <g><rect width="100" height="100"/></g>
+    <g width="100" height="42px"><rect width="100" height="100"/></g>
+    <g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
+    <g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
+    <g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
+
+    <image/>
+    <image width="42" height="200"/>
+    <image width="42" style="height: auto"/>
+    <image width="42" style="height: 230px"/>
+    <image width="42" style="height: 25%"/>
+    <image width="42" style="height: 25%; display: none"/>
+
+    <foreignObject>Some content</foreignObject>
+    <foreignObject height="200">Some content</foreignObject>
+    <foreignObject style="height: auto">Some content</foreignObject>
+    <foreignObject style="height: 75px">Some content</foreignObject>
+    <foreignObject style="height: 50%">Some content</foreignObject>
+    <foreignObject style="height: auto; display: none">Some content</foreignObject>
+
+    <svg/>
+    <svg height="200"/>
+    <svg style="height: auto"/>
+    <svg style="height: 200px"/>
+    <svg style="height: 50%"/>
+    <svg style="height: auto; display: none"/>
+
+    <text>Text1</text>
+    <text width="100px" height="42">Text2</text>
+    <text style="width: 30%; height: auto">Text3</text>
+    <text style="width: auto; height: 20px">Text3</text>
+    <text style="width: 20px; height: 30%">Text3</text>
+  </svg>
+  <script><![CDATA[
+[
+  // Cases where computed 'height' return the used value.
+  {
+    element: 'rect',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '40px', description: 'inline style (percentage)' },
+      { value: '80%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'image',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '230px', description: 'inline style (pixels)' },
+      { value: '25px', description: 'inline style (percentage)' },
+      { value: '25%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'foreignObject',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '200px', description: 'presentation attribute' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '75px', description: 'inline style (pixels)' },
+      { value: '50px', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+  // Negative test for nested <svg>: verify computed 'height' is auto when not specified explicitly.
+  // Nested <svg> don't support width and height as CSS style attributes.
+  //
+  // https://github.com/w3c/svgwg/issues/1057
+  {
+    element: 'svg',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'presentation attribute' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '200px', description: 'inline style (pixels)' },
+      { value: '50%', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+
+  // Cases where computed 'height' return the computed value.
+  {
+    element: 'g',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '10%', description: 'inline style (percentage)' },
+    ]
+  },
+  {
+    element: 'text',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '30%', description: 'inline style (percentage)' },
+    ]
+  },
+].forEach(function(entry) {
+  let element_set = document.querySelectorAll('#test-content > ' + entry.element);
+  entry.expected.forEach(function(expected, index) {
+    test(function() {
+      let style = getComputedStyle(element_set[index]);
+      assert_equals(style.height, expected.value, expected.description);
+    }, document.title + ', <' + entry.element + '> ' + expected.description);
+  });
+});
+  ]]></script>
+</svg>
diff --git a/Tests/LibWeb/Text/input/wpt-import/svg/geometry/parsing/width-computed.svg b/Tests/LibWeb/Text/input/wpt-import/svg/geometry/parsing/width-computed.svg
new file mode 100644
index 0000000000000..84ad61a380eb7
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/svg/geometry/parsing/width-computed.svg
@@ -0,0 +1,134 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVG Geometry Properties: getComputedStyle().width</title>
+  <metadata>
+    <h:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing"/>
+    <h:link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values"/>
+  </metadata>
+  <h:script src="../../../resources/testharness.js"/>
+  <h:script src="../../../resources/testharnessreport.js"/>
+  <svg width="200" height="100" id="test-content">
+    <rect/>
+    <rect width="100" height="200"/>
+    <rect height="42" style="width: 40%"/>
+    <rect height="42" style="width: auto"/>
+    <rect height="42" style="width: 20px"/>
+    <rect height="42" style="width: 42%; display: none"/>
+
+    <g><rect width="100" height="100"/></g>
+    <g width="100" height="42px"><rect width="100" height="100"/></g>
+    <g style="width: 10%; height: auto"><rect width="100" height="100"/></g>
+    <g style="width: auto; height: 20px"><rect width="100" height="100"/></g>
+    <g style="width: 20px; height: 10%"><rect width="100" height="100"/></g>
+
+    <image/>
+    <image width="100"/>
+    <image height="42" style="width: 25%"/>
+    <image height="42" style="width: auto"/>
+    <image height="42" style="width: 230px"/>
+    <image height="42" style="width: 25%; display: none"/>
+
+    <foreignObject>Some content</foreignObject>
+    <foreignObject width="100">Some content</foreignObject>
+    <foreignObject style="width: 50%">Some content</foreignObject>
+    <foreignObject style="width: auto">Some content</foreignObject>
+    <foreignObject style="width: 75px">Some content</foreignObject>
+    <foreignObject style="width: auto; display: none">Some content</foreignObject>
+
+    <svg/>
+    <svg width="100"/>
+    <svg style="width: auto"/>
+    <svg style="width: 200px"/>
+    <svg style="width: 50%"/>
+    <svg style="width: auto; display: none"/>
+
+    <text>Text1</text>
+    <text width="100px" height="42">Text2</text>
+    <text style="width: 30%; height: auto">Text3</text>
+    <text style="width: auto; height: 20px">Text3</text>
+    <text style="width: 20px; height: 30%">Text3</text>
+  </svg>
+  <script><![CDATA[
+[
+  // Cases where computed 'width' return the used value.
+  {
+    element: 'rect',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '80px', description: 'inline style (percentage)' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+      { value: '42%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'image',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '50px', description: 'inline style (percentage)' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '230px', description: 'inline style (pixels)' },
+      { value: '25%', description: 'inline style but "display: none"' },
+    ]
+  },
+  {
+    element: 'foreignObject',
+    expected: [
+      { value: '0px', description: 'initial' },
+      { value: '100px', description: 'presentation attribute' },
+      { value: '100px', description: 'inline style (percentage)' },
+      { value: '0px', description: 'inline style (auto)' },
+      { value: '75px', description: 'inline style (pixels)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+  // Negative test for nested <svg>: verify computed 'width' is auto when not specified explicitly.
+  // Nested <svg> don't support width and height as CSS style attributes.
+  //
+  // https://github.com/w3c/svgwg/issues/1057
+  {
+    element: 'svg',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'presentation attribute' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '200px', description: 'inline style (pixels)' },
+      { value: '50%', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style but "display: none"' },
+    ]
+  },
+
+  // Cases where computed 'width' return the computed value.
+  {
+    element: 'g',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: '10%', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+    ]
+  },
+  {
+    element: 'text',
+    expected: [
+      { value: 'auto', description: 'initial' },
+      { value: 'auto', description: 'initial (with dummy attribute)' },
+      { value: '30%', description: 'inline style (percentage)' },
+      { value: 'auto', description: 'inline style (auto)' },
+      { value: '20px', description: 'inline style (pixels)' },
+    ]
+  },
+].forEach(function(entry) {
+  let element_set = document.querySelectorAll('#test-content > ' + entry.element);
+  entry.expected.forEach(function(expected, index) {
+    test(function() {
+      let style = getComputedStyle(element_set[index]);
+      assert_equals(style.width, expected.value, expected.description);
+    }, document.title + ', <' + entry.element + '> ' + expected.description);
+  });
+});
+  ]]></script>
+</svg>
diff --git a/Tests/LibWeb/Text/input/wpt-import/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html b/Tests/LibWeb/Text/input/wpt-import/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html
new file mode 100644
index 0000000000000..c2b023ea71dc9
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/svg/geometry/svg-image-intrinsic-size-with-cssstyle-auto.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<title>&lt;svg:image> 'auto' sizing</title>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/single-page.html#geometry-Sizing"/>
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/single-page.html#embedded-Placement"/>
+<svg height="0">
+  <image width="64" height="64" xlink:href="../../images/green-256x256.png" />
+  <image width="128" height="64" xlink:href="../../images/green-256x256.png" style="width:auto"/>
+  <image width="64" height="128" xlink:href="../../images/green-256x256.png" style="height:auto"/>
+  <image width="128" height="64" xlink:href="../../images/green-256x256.png" style="width:auto; height:auto"/>
+  <image width="50" height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/>
+  <image width="50" height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto; height:auto'/>
+  <image width="50" height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+  <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+  <image height="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='width:auto;'/>
+  <image width="50"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'></svg>" style='height:auto;'/>
+  <image width="200" height="200"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/>
+  <image height="200"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/>
+  <image width="200"
+         xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto; height:auto'/>
+  <image xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>"/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='width:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100' viewBox='0 0 400 100'></svg>" style='width:auto; height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='height:auto'/>
+  <image width="60" height="60" xlink:href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>" style='width:auto'/>
+</svg>
+<script>
+const expectedBoxes = [
+  { dimensions: [64, 64], description: "256x256 png image, attributes width='64' height='64'"},
+  { dimensions: [64, 64], description: "256x256 png image, attributes width='128' height='64' and CSS 'width:auto'"},
+  { dimensions: [64, 64], description: "256x256 png image, attributes width='64' height='128' and CSS 'height:auto'"},
+  { dimensions: [256, 256], description: "256x256 png image, attributes width='64' height='64' and CSS 'width:auto; height:auto'"},
+  { dimensions: [50, 50], description: "default sized svg image, attributes width='50' height='50'"},
+  { dimensions: [200, 100], description: "200x100 svg image, attributes width='50' height='50' and CSS 'width:auto; height:auto'"},
+  { dimensions: [100, 50], description: "200x100 svg image, attributes width='50' height='50' and CSS 'width:auto'"},
+  { dimensions: [200, 100], description: "200x100 svg image, without attributes width and height and CSS 'width:auto'"},
+  { dimensions: [100, 50], description: "200x100 svg image, attributes height='50' and 'width:auto'"},
+  { dimensions: [50, 25], description: "200x100 svg image, attributes width='50' and CSS height:auto"},
+  { dimensions: [300, 150], description: "default sized svg image, attributes width='200' height='200' and CSS 'width:auto; height:auto'"},
+  { dimensions: [300, 150], description: "default sized svg image, attributes height='200' and CSS 'width:auto; height:auto'"},
+  { dimensions: [300, 150], description: "default sized svg image, attributes width='200' and CSS 'width:auto; height:auto'"},
+  { dimensions: [300, 150], description: "default sized svg image, without attributes width and height, no css width/height specified"},
+  { dimensions: [60, 60], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [240, 60], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 15], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [300, 75], description: "default sized svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 60], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [240, 60], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 15], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [200, 50], description: "svg image width='200' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 60], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [240, 60], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 15], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [400, 100], description: "svg image height='100' viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 60], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and no css width/height specified"},
+  { dimensions: [120, 60], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto'"},
+  { dimensions: [60, 30], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [200, 100], description: "200x100 svg image viewBox='0 0 400 100', attributes width='60' height='60' and CSS 'width:auto; height:auto'"},
+  { dimensions: [60, 150], description: "default sized svg image, attributes width='60' height='60' and CSS 'height:auto'"},
+  { dimensions: [300, 60], description: "default sized svg image, attributes width='60' height='60' and CSS 'width:auto'"},
+];
+
+const images = document.getElementsByTagName('image');
+for (var i = 0, length = images.length; i < length; ++i) {
+  async_test(t => {
+    const image = images[i];
+    const expected = expectedBoxes[i];
+    window.addEventListener('load', t.step_func_done(() => {
+      const [expectedWidth, expectedHeight] = expected.dimensions;
+      const bbox = image.getBBox();
+      assert_equals(bbox.width, expectedWidth, 'width');
+      assert_equals(bbox.height, expectedHeight, 'height');
+    }));
+  }, document.title + ' with ' + expectedBoxes[i].description);
+}
+</script>
diff --git a/Tests/LibWeb/Text/input/wpt-import/svg/types/scripted/SVGGraphicsElement.getBBox-08.html b/Tests/LibWeb/Text/input/wpt-import/svg/types/scripted/SVGGraphicsElement.getBBox-08.html
new file mode 100644
index 0000000000000..14962bc00bca4
--- /dev/null
+++ b/Tests/LibWeb/Text/input/wpt-import/svg/types/scripted/SVGGraphicsElement.getBBox-08.html
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<title>SVGGraphicsElement.prototype.getBBox for image, foreignObject, containers, and transforms</title>
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGraphicsElement__getBBox">
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/coords.html#BoundingBoxes">
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/geometry.html#Sizing">
+<link rel="help" href="https://github.com/w3c/svgwg/issues/1018">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<svg width="0" height="0" style="position:absolute">
+
+  <!-- G. image: zero and missing dimensions (no href, so intrinsic size doesn't apply) -->
+  <image id="img_zero_w" x="10" y="20" width="0" height="50"/>
+  <image id="img_zero_h" x="10" y="20" width="50" height="0"/>
+  <image id="img_zero_wh" x="10" y="20" width="0" height="0"/>
+  <image id="img_no_wh" x="10" y="20"/>
+
+  <!-- G. foreignObject: zero and missing dimensions -->
+  <foreignObject id="fo_zero_w" x="10" y="20" width="0" height="50"/>
+  <foreignObject id="fo_zero_h" x="10" y="20" width="50" height="0"/>
+  <foreignObject id="fo_zero_wh" x="10" y="20" width="0" height="0"/>
+  <foreignObject id="fo_no_wh" x="10" y="20"/>
+
+  <!-- E2. Empty nested SVG -->
+  <svg id="nested_svg_empty" x="10" y="20" width="100" height="80"/>
+  <svg id="nested_svg_no_attrs"/>
+  <svg id="nested_svg_zero" x="10" y="20" width="0" height="0"/>
+
+  <!-- E7. Anchor wrapping zero-dim shape -->
+  <a id="a_zero_child">
+    <rect x="10" y="20" width="0" height="0"/>
+  </a>
+  <a id="a_normal_and_zero">
+    <rect x="10" y="20" width="0" height="0"/>
+    <rect id="a_normal_rect" x="30" y="40" width="50" height="60"/>
+  </a>
+
+  <!-- H. Transforms on zero/invalid dimension elements -->
+  <!-- getBBox returns bbox in element's local coordinate system,
+       so transform does not affect the returned values. -->
+  <rect id="h_zero_translate" width="0" height="0" transform="translate(10,20)"/>
+  <rect id="h_neg_scale" width="-5" height="10" transform="scale(2)"/>
+  <g id="h_rotated_group" transform="rotate(45)">
+    <rect id="h_rotated_child" x="10" y="20" width="0" height="0"/>
+  </g>
+  <rect id="h_zero_w_scale" x="10" y="20" width="0" height="50" transform="scale(3)"/>
+  <circle id="h_zero_r_translate" cx="10" cy="20" r="0" transform="translate(100,200)"/>
+
+  <!-- H. Group transform with normal child — getBBox of group is in group's
+       local coordinate system, so child positions are untransformed. -->
+  <g id="h_group_translate" transform="translate(100,200)">
+    <rect id="h_group_child" x="10" y="20" width="30" height="40"/>
+  </g>
+
+</svg>
+<script>
+function assert_bbox(id, expected_x, expected_y, expected_w, expected_h) {
+  var el = document.getElementById(id);
+  var bbox = el.getBBox();
+  assert_equals(bbox.x, expected_x, "x");
+  assert_equals(bbox.y, expected_y, "y");
+  assert_equals(bbox.width, expected_w, "width");
+  assert_equals(bbox.height, expected_h, "height");
+}
+
+function test_bbox(id, expected_x, expected_y, expected_w, expected_h, desc) {
+  test(() => { assert_bbox(id, expected_x, expected_y, expected_w, expected_h); }, desc);
+}
+
+// ========================================================================
+// G. image — zero and missing dimensions (no href)
+// Per resolution (issue #1018): not rendered → getBBox returns (0,0,0,0).
+// Note: negative dimension images are tested in getBBox-03.
+// ========================================================================
+
+test_bbox("img_zero_w", 0, 0, 0, 0,
+  "image with zero width");
+test_bbox("img_zero_h", 0, 0, 0, 0,
+  "image with zero height");
+test_bbox("img_zero_wh", 0, 0, 0, 0,
+  "image with zero width and height");
+test_bbox("img_no_wh", 0, 0, 0, 0,
+  "image with no width/height attributes");
+
+// ========================================================================
+// G. foreignObject — zero and missing dimensions
+// Per resolution (issue #1018): not rendered → getBBox returns (0,0,0,0).
+// Note: negative dimension foreignObjects are tested in getBBox-03.
+// ========================================================================
+
+test_bbox("fo_zero_w", 0, 0, 0, 0,
+  "foreignObject with zero width");
+test_bbox("fo_zero_h", 0, 0, 0, 0,
+  "foreignObject with zero height");
+test_bbox("fo_zero_wh", 0, 0, 0, 0,
+  "foreignObject with zero width and height");
+test_bbox("fo_no_wh", 0, 0, 0, 0,
+  "foreignObject with no width/height attributes");
+
+// ========================================================================
+// E. Containers — nested SVG and anchor elements
+// ========================================================================
+
+// Nested SVG with no children: bbox is (0, 0, 0, 0) since container
+// algorithm unions over rendered children.
+test_bbox("nested_svg_empty", 0, 0, 0, 0,
+  "empty nested SVG element");
+test_bbox("nested_svg_no_attrs", 0, 0, 0, 0,
+  "empty nested SVG with no attributes");
+test_bbox("nested_svg_zero", 0, 0, 0, 0,
+  "empty nested SVG with zero width and height");
+
+// Anchor wrapping zero-dimension shapes (not rendered → zero bbox).
+test_bbox("a_zero_child", 0, 0, 0, 0,
+  "anchor element wrapping zero-dimension rect");
+
+test(function() {
+  var a = document.getElementById("a_normal_and_zero");
+  var bbox = a.getBBox();
+  // Zero-dim child returns (0,0,0,0), so group bbox equals normal child's bbox.
+  assert_equals(bbox.x, 30, "x equals normal child x");
+  assert_equals(bbox.y, 40, "y equals normal child y");
+  assert_equals(bbox.width, 50, "width equals normal child width");
+  assert_equals(bbox.height, 60, "height equals normal child height");
+}, "anchor element with zero-dim and normal child: zero-dim child does not affect bbox");
+
+// ========================================================================
+// H. Transforms on zero/invalid dimension elements
+// getBBox returns the bbox in the element's own coordinate system (user
+// space), so transforms on the element itself do not change the returned
+// values. Transforms on ancestors also do not affect the result since
+// getBBox uses the element's own coordinate system.
+// ========================================================================
+
+test_bbox("h_zero_translate", 0, 0, 0, 0,
+  "zero-dim rect with translate transform");
+test_bbox("h_neg_scale", 0, 0, 0, 0,
+  "rect with negative width and scale(2) (not rendered)");
+test_bbox("h_rotated_child", 0, 0, 0, 0,
+  "zero-dim rect inside rotated group (not rendered)");
+test_bbox("h_zero_w_scale", 0, 0, 0, 0,
+  "zero-width rect with scale(3) (not rendered)");
+test_bbox("h_zero_r_translate", 0, 0, 0, 0,
+  "zero-radius circle with translate (not rendered)");
+
+test(function() {
+  var g = document.getElementById("h_group_translate");
+  var bbox = g.getBBox();
+  // Group bbox is in the group's own coordinate system, so child at (10,20)
+  // with (30,40) is reported directly, unaffected by group's translate.
+  assert_equals(bbox.x, 10, "x");
+  assert_equals(bbox.y, 20, "y");
+  assert_equals(bbox.width, 30, "width");
+  assert_equals(bbox.height, 40, "height");
+}, "group with translate transform — bbox in group's local coords");
+
+test(function() {
+  var g = document.getElementById("h_rotated_group");
+  var bbox = g.getBBox();
+  // Group's only child is zero-dim (not rendered → (0,0,0,0)),
+  // so group bbox is also (0,0,0,0).
+  assert_equals(bbox.x, 0, "x");
+  assert_equals(bbox.y, 0, "y");
+  assert_equals(bbox.width, 0, "width");
+  assert_equals(bbox.height, 0, "height");
+}, "rotated group with zero-dim child — bbox is zero");
+</script>