LibWeb: Improve support for SVG text positioning attributes

Previously, we only supported very basic numbers and a single level of
text positioning support in the `x`, `y`, `dx` and `dy` attributes in
`<text>` and `<tspan>` SVG elements.

This improves our support for them in the following ways:

  * Any `length-percentage` or `number` type value is accepted;
  * Nested `<text>` and `<tspan>` use the 'current text position'
    concept to determine where the next text run should go;
  * We expose the attributes' values through the API.

Though we still do not support:

  * Applying the `rotate` attribute;
  * Applying transformations on a per-character basis.
  * Proper horizontal and vertical glyph advancing (we just use the path
    bounding box for now).

Libraries/LibWeb/Layout/SVGFormattingContext.cpp

@@ -3,6 +3,7 @@
  * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
  * Copyright (c) 2022, Tobias Christiansen <tobyase@serenityos.org>
  * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -343,14 +344,14 @@ void SVGFormattingContext::layout_nested_viewport(Box const& viewport)
     nested_context.run(*m_available_space);
 }
 
-Gfx::Path SVGFormattingContext::compute_path_for_text(SVGTextBox const& text_box)
+Gfx::Path SVGFormattingContext::compute_path_for_text(SVGTextBox const& text_box) const
 {
-    auto& text_element = static_cast<SVG::SVGTextPositioningElement const&>(text_box.dom_node());
+    auto& text_element = text_box.dom_node();
     // FIXME: Use per-code-point fonts.
     auto& font = text_box.first_available_font();
     auto text_contents = text_element.text_contents();
     auto text_width = font.width(text_contents);
-    auto text_offset = text_element.get_offset(m_viewport_size);
+    auto text_offset = m_current_text_position;
 
     // https://svgwg.org/svg2-draft/text.html#TextAnchoringProperties
     switch (text_element.text_anchor().value_or(SVG::TextAnchor::Start)) {
@@ -381,7 +382,7 @@ Gfx::Path SVGFormattingContext::compute_path_for_text(SVGTextBox const& text_box
     return path;
 }
 
-Gfx::Path SVGFormattingContext::compute_path_for_text_path(SVGTextPathBox const& text_path_box)
+Gfx::Path SVGFormattingContext::compute_path_for_text_path(SVGTextPathBox const& text_path_box) const
 {
     auto& text_path_element = static_cast<SVG::SVGTextPathElement const&>(text_path_box.dom_node());
     auto path_or_shape = text_path_element.path_or_shape();
@@ -409,27 +410,33 @@ void SVGFormattingContext::layout_path_like_element(SVGGraphicsBox const& graphi
     if (is<SVGGeometryBox>(graphics_box)) {
         auto& geometry_box = static_cast<SVGGeometryBox const&>(graphics_box);
         path = const_cast<SVGGeometryBox&>(geometry_box).dom_node().get_path(m_viewport_size);
-    } else if (is<SVGTextBox>(graphics_box)) {
+    } else if (auto* text_box = as_if<SVGTextBox>(graphics_box)) {
-        auto& text_box = static_cast<SVGTextBox const&>(graphics_box);
+        // FIXME: Text offsets must be calculated per character. This only applies the first character's offset.
-        path = compute_path_for_text(text_box);
+        auto text_positioning = text_box->dom_node().text_positioning();
+        text_positioning.apply_to_text_position(*text_box, m_viewport_size, m_current_text_position, 0u);
+
+        path = compute_path_for_text(*text_box);
+
         // <text> and <tspan> elements can contain more text elements.
-        text_box.for_each_child_of_type<SVGGraphicsBox>([&](auto& child) {
+        text_box->for_each_child_of_type<SVGGraphicsBox>([&](auto& child) {
             if (is<SVGTextBox>(child) || is<SVGTextPathBox>(child))
                 layout_graphics_element(child);
             return IterationDecision::Continue;
         });
-    } else if (is<SVGTextPathBox>(graphics_box)) {
+    } else if (auto* text_path_box = as_if<SVGTextPathBox>(graphics_box)) {
         // FIXME: Support <tspan> in <textPath>.
-        path = compute_path_for_text_path(static_cast<SVGTextPathBox const&>(graphics_box));
+        path = compute_path_for_text_path(*text_path_box);
     }
 
-    auto path_bounding_box = to_css_pixels_transform.map(path.bounding_box()).to_type<CSSPixels>();
+    auto path_bounding_box = path.bounding_box();
+    m_current_text_position = path_bounding_box.bottom_right();
+    auto transformed_bounding_box = to_css_pixels_transform.map(path_bounding_box).to_type<CSSPixels>();
     // Stroke increases the path's size by stroke_width/2 per side.
     CSSPixels stroke_width = CSSPixels::nearest_value_for(graphics_box.dom_node().visible_stroke_width() * m_current_viewbox_transform.x_scale());
-    path_bounding_box.inflate(stroke_width, stroke_width);
+    transformed_bounding_box.inflate(stroke_width, stroke_width);
-    graphics_box_state.set_content_offset(path_bounding_box.top_left());
+    graphics_box_state.set_content_offset(transformed_bounding_box.top_left());
-    graphics_box_state.set_content_width(path_bounding_box.width());
+    graphics_box_state.set_content_width(transformed_bounding_box.width());
-    graphics_box_state.set_content_height(path_bounding_box.height());
+    graphics_box_state.set_content_height(transformed_bounding_box.height());
     graphics_box_state.set_has_definite_width(true);
     graphics_box_state.set_has_definite_height(true);
     graphics_box_state.set_computed_svg_path(move(path));

Libraries/LibWeb/Layout/SVGFormattingContext.h

@@ -15,7 +15,7 @@
 
 namespace Web::Layout {
 
-class SVGFormattingContext : public FormattingContext {
+class SVGFormattingContext final : public FormattingContext {
 public:
     explicit SVGFormattingContext(LayoutState&, LayoutMode, Box const&, FormattingContext* parent, Gfx::AffineTransform parent_viewbox_transform = {});
     ~SVGFormattingContext();
@@ -33,8 +33,8 @@ private:
     void layout_mask_or_clip(SVGBox const&);
     void layout_image_element(SVGImageBox const& image_box);
 
-    [[nodiscard]] Gfx::Path compute_path_for_text(SVGTextBox const&);
+    [[nodiscard]] Gfx::Path compute_path_for_text(SVGTextBox const&) const;
-    [[nodiscard]] Gfx::Path compute_path_for_text_path(SVGTextPathBox const&);
+    [[nodiscard]] Gfx::Path compute_path_for_text_path(SVGTextPathBox const&) const;
 
     Gfx::AffineTransform m_parent_viewbox_transform {};
 
@@ -42,6 +42,7 @@ private:
     Gfx::AffineTransform m_current_viewbox_transform {};
     CSSPixelSize m_viewport_size {};
     CSSPixelPoint m_svg_offset {};
+    Gfx::FloatPoint m_current_text_position {};
 };
 
 }

Libraries/LibWeb/SVG/AttributeNames.h

@@ -84,6 +84,7 @@ namespace Web::SVG::AttributeNames {
     __ENUMERATE_SVG_ATTRIBUTE(requiredExtensions, "requiredExtensions")   \
     __ENUMERATE_SVG_ATTRIBUTE(requiredFeatures, "requiredFeatures")       \
     __ENUMERATE_SVG_ATTRIBUTE(result, "result")                           \
+    __ENUMERATE_SVG_ATTRIBUTE(rotate, "rotate")                           \
     __ENUMERATE_SVG_ATTRIBUTE(rx, "rx")                                   \
     __ENUMERATE_SVG_ATTRIBUTE(ry, "ry")                                   \
     __ENUMERATE_SVG_ATTRIBUTE(slope, "slope")                             \

Libraries/LibWeb/SVG/AttributeParser.h

@@ -115,6 +115,7 @@ public:
     float resolve_relative_to(float length) const;
 
     float value() const { return m_value; }
+    bool is_percentage() const { return m_is_percentage; }
 
 private:
     float m_value;

Libraries/LibWeb/SVG/SVGTextPositioningElement.cpp

@@ -1,14 +1,26 @@
 /*
  * Copyright (c) 2022, Andreas Kling <andreas@ladybird.org>
  * Copyright (c) 2023, Aliaksandr Kalenik <kalenik.aliaksandr@gmail.com>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
 
 #include <LibWeb/Bindings/SVGTextPositioningElementPrototype.h>
+#include <LibWeb/CSS/Parser/Parser.h>
+#include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
+#include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
+#include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
 #include <LibWeb/DOM/Document.h>
+#include <LibWeb/Layout/Node.h>
 #include <LibWeb/SVG/AttributeNames.h>
 #include <LibWeb/SVG/AttributeParser.h>
+#include <LibWeb/SVG/SVGAnimatedLengthList.h>
+#include <LibWeb/SVG/SVGAnimatedNumberList.h>
+#include <LibWeb/SVG/SVGLength.h>
+#include <LibWeb/SVG/SVGLengthList.h>
+#include <LibWeb/SVG/SVGNumber.h>
+#include <LibWeb/SVG/SVGNumberList.h>
 #include <LibWeb/SVG/SVGTextPositioningElement.h>
 
 namespace Web::SVG {
@@ -24,32 +36,121 @@ void SVGTextPositioningElement::initialize(JS::Realm& realm)
     Base::initialize(realm);
 }
 
+void SVGTextPositioningElement::visit_edges(Visitor& visitor)
+{
+    Base::visit_edges(visitor);
+    visitor.visit(m_x);
+    visitor.visit(m_y);
+    visitor.visit(m_dx);
+    visitor.visit(m_dy);
+    visitor.visit(m_rotate);
+}
+
 void SVGTextPositioningElement::attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_)
 {
     Base::attribute_changed(name, old_value, value, namespace_);
 
-    if (name == SVG::AttributeNames::x) {
+    if (name == AttributeNames::x)
-        m_x = AttributeParser::parse_number_percentage(value.value_or(String {}));
+        m_x = {};
-    } else if (name == SVG::AttributeNames::y) {
+    else if (name == AttributeNames::y)
-        m_y = AttributeParser::parse_number_percentage(value.value_or(String {}));
+        m_y = {};
-    } else if (name == SVG::AttributeNames::dx) {
+    else if (name == AttributeNames::dx)
-        m_dx = AttributeParser::parse_number_percentage(value.value_or(String {}));
+        m_dx = {};
-    } else if (name == SVG::AttributeNames::dy) {
+    else if (name == AttributeNames::dy)
-        m_dy = AttributeParser::parse_number_percentage(value.value_or(String {}));
+        m_dy = {};
-    }
+    else if (name == AttributeNames::rotate)
+        m_rotate = {};
 }
 
-Gfx::FloatPoint SVGTextPositioningElement::get_offset(CSSPixelSize const& viewport_size) const
+TextPositioning SVGTextPositioningElement::text_positioning() const
 {
-    auto const viewport_width = viewport_size.width().to_float();
+    CSS::Parser::ParsingParams const parsing_params { document() };
-    auto const viewport_height = viewport_size.height().to_float();
 
-    float const x = m_x.value_or({ 0, false }).resolve_relative_to(viewport_width);
+    // https://svgwg.org/svg2-draft/text.html#TSpanAttributes
-    float const y = m_y.value_or({ 0, false }).resolve_relative_to(viewport_height);
+    // FIXME: This only handles single values, not lists.
-    float const dx = m_dx.value_or({ 0, false }).resolve_relative_to(viewport_width);
+    auto resolve_value = [&](FlyString const& attribute) -> Vector<TextPositioning::Position> {
-    float const dy = m_dy.value_or({ 0, false }).resolve_relative_to(viewport_height);
+        auto raw_value = get_attribute_value(attribute);
 
-    return { x + dx, y + dy };
+        auto style_value = parse_css_type(parsing_params, raw_value, CSS::ValueType::LengthPercentage);
+        if (auto const* length_style_value = as_if<CSS::LengthStyleValue>(style_value.ptr()))
+            return { CSS::LengthPercentage::from_style_value(*length_style_value) };
+
+        if (auto const* percentage_style_value = as_if<CSS::PercentageStyleValue>(style_value.ptr()))
+            return { CSS::LengthPercentage::from_style_value(*percentage_style_value) };
+
+        style_value = parse_css_type(parsing_params, raw_value, CSS::ValueType::Number);
+        if (auto const* number_style_value = as_if<CSS::NumberStyleValue>(style_value.ptr()))
+            return { CSS::Number { CSS::Number::Type::Number, number_style_value->number() } };
+
+        return {};
+    };
+
+    // FIXME: Implement support for the rotate attribute.
+    return {
+        .x = resolve_value(AttributeNames::x),
+        .y = resolve_value(AttributeNames::y),
+        .dx = resolve_value(AttributeNames::dx),
+        .dy = resolve_value(AttributeNames::dy),
+        .rotate = Vector<float> {},
+    };
+}
+
+GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::ensure_length_list(GC::Ptr<SVGAnimatedLengthList>& list,
+    FlyString const& attribute_name) const
+{
+    if (!list) {
+        // FIXME: This only handles single values, not lists.
+        float value = 0.f;
+        auto maybe_number_percentage = AttributeParser::parse_number_percentage(get_attribute_value(attribute_name));
+        if (maybe_number_percentage.has_value())
+            value = maybe_number_percentage.release_value().value();
+
+        auto length = SVGLength::create(realm(), SVGLength::SVG_LENGTHTYPE_NUMBER, value, SVGLength::ReadOnly::Yes);
+        auto length_list = SVGLengthList::create(realm(), { length }, ReadOnlyList::Yes);
+        list = SVGAnimatedLengthList::create(realm(), length_list);
+    }
+    return *list;
+}
+
+// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__x
+GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::x()
+{
+    return ensure_length_list(m_x, AttributeNames::x);
+}
+
+// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__y
+GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::y()
+{
+    return ensure_length_list(m_y, AttributeNames::y);
+}
+
+// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__dx
+GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::dx()
+{
+    return ensure_length_list(m_dx, AttributeNames::dx);
+}
+
+// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__dy
+GC::Ref<SVGAnimatedLengthList> SVGTextPositioningElement::dy()
+{
+    return ensure_length_list(m_dy, AttributeNames::dy);
+}
+
+// https://svgwg.org/svg2-draft/text.html#__svg__SVGTextPositioningElement__rotate
+GC::Ref<SVGAnimatedNumberList> SVGTextPositioningElement::rotate()
+{
+    if (!m_rotate) {
+        // FIXME: This only handles single values, not lists.
+        float value = 0.f;
+        auto maybe_number_percentage = AttributeParser::parse_number_percentage(get_attribute_value(AttributeNames::rotate));
+        if (maybe_number_percentage.has_value() && !maybe_number_percentage.value().is_percentage())
+            value = maybe_number_percentage.release_value().value();
+
+        auto number = SVGNumber::create(realm(), value, SVGNumber::ReadOnly::Yes);
+        auto number_list = SVGNumberList::create(realm(), { number }, ReadOnlyList::Yes);
+        m_rotate = SVGAnimatedNumberList::create(realm(), number_list);
+    }
+    return *m_rotate;
 }
 
 }

Libraries/LibWeb/SVG/SVGTextPositioningElement.h

@@ -1,5 +1,6 @@
 /*
  * Copyright (c) 2023, MacDue <macdue@dueutil.tech>
+ * Copyright (c) 2025, Jelle Raaijmakers <jelle@ladybird.org>
  *
  * SPDX-License-Identifier: BSD-2-Clause
  */
@@ -7,10 +8,45 @@
 #pragma once
 
 #include <LibWeb/SVG/SVGTextContentElement.h>
-#include <LibWeb/WebIDL/ExceptionOr.h>
 
 namespace Web::SVG {
 
+// https://svgwg.org/svg2-draft/text.html#TSpanNotes
+// https://svgwg.org/svg2-draft/text.html#TSpanAttributes
+struct TextPositioning {
+    using Position = Variant<CSS::LengthPercentage, CSS::Number>;
+
+    Vector<Position> x;
+    Vector<Position> y;
+    Vector<Position> dx;
+    Vector<Position> dy;
+    Vector<float> rotate;
+
+    void apply_to_text_position(Layout::Node const& node, CSSPixelSize viewport, Gfx::FloatPoint& current_text_position,
+        size_t character_index) const
+    {
+        auto value_for_character = [&](Vector<Position> const& values) -> float {
+            if (values.is_empty())
+                return 0.f;
+
+            auto position = character_index < values.size() ? values[character_index] : values.last();
+            return position.visit(
+                [](CSS::Number const& number) { return static_cast<float>(number.value()); },
+                [&](CSS::LengthPercentage const& length_percentage) {
+                    auto reference = &values == &x || &values == &dx ? viewport.width() : viewport.height();
+                    return length_percentage.to_px(node, reference).to_float();
+                });
+        };
+
+        if (!x.is_empty())
+            current_text_position.set_x(value_for_character(x));
+        if (!y.is_empty())
+            current_text_position.set_y(value_for_character(y));
+
+        current_text_position.translate_by(value_for_character(dx), value_for_character(dy));
+    }
+};
+
 // https://svgwg.org/svg2-draft/text.html#InterfaceSVGTextPositioningElement
 class SVGTextPositioningElement : public SVGTextContentElement {
     WEB_PLATFORM_OBJECT(SVGTextPositioningElement, SVGTextContentElement);
@@ -18,23 +54,28 @@ class SVGTextPositioningElement : public SVGTextContentElement {
 public:
     virtual void attribute_changed(FlyString const& name, Optional<String> const& old_value, Optional<String> const& value, Optional<FlyString> const& namespace_) override;
 
-    Gfx::FloatPoint get_offset(CSSPixelSize const& viewport_size) const;
+    TextPositioning text_positioning() const;
 
-    GC::Ref<SVGAnimatedLength> x() const;
+    GC::Ref<SVGAnimatedLengthList> x();
-    GC::Ref<SVGAnimatedLength> y() const;
+    GC::Ref<SVGAnimatedLengthList> y();
-    GC::Ref<SVGAnimatedLength> dx() const;
+    GC::Ref<SVGAnimatedLengthList> dx();
-    GC::Ref<SVGAnimatedLength> dy() const;
+    GC::Ref<SVGAnimatedLengthList> dy();
+    GC::Ref<SVGAnimatedNumberList> rotate();
 
 protected:
     SVGTextPositioningElement(DOM::Document&, DOM::QualifiedName);
 
     virtual void initialize(JS::Realm&) override;
+    virtual void visit_edges(Visitor&) override;
 
 private:
-    Optional<NumberPercentage> m_x;
+    GC::Ref<SVGAnimatedLengthList> ensure_length_list(GC::Ptr<SVGAnimatedLengthList>&, FlyString const& attribute_name) const;
-    Optional<NumberPercentage> m_y;
+
-    Optional<NumberPercentage> m_dx;
+    GC::Ptr<SVGAnimatedLengthList> m_x;
-    Optional<NumberPercentage> m_dy;
+    GC::Ptr<SVGAnimatedLengthList> m_y;
+    GC::Ptr<SVGAnimatedLengthList> m_dx;
+    GC::Ptr<SVGAnimatedLengthList> m_dy;
+    GC::Ptr<SVGAnimatedNumberList> m_rotate;
 };
 
 }

Libraries/LibWeb/SVG/SVGTextPositioningElement.idl

@@ -1,11 +1,13 @@
+#import <SVG/SVGAnimatedLengthList.idl>
+#import <SVG/SVGAnimatedNumberList.idl>
 #import <SVG/SVGTextContentElement.idl>
 
 // https://svgwg.org/svg2-draft/text.html#InterfaceSVGTextPositioningElement
 [Exposed=Window]
 interface SVGTextPositioningElement : SVGTextContentElement {
-    [FIXME, SameObject] readonly attribute SVGAnimatedLengthList x;
+    [SameObject] readonly attribute SVGAnimatedLengthList x;
-    [FIXME, SameObject] readonly attribute SVGAnimatedLengthList y;
+    [SameObject] readonly attribute SVGAnimatedLengthList y;
-    [FIXME, SameObject] readonly attribute SVGAnimatedLengthList dx;
+    [SameObject] readonly attribute SVGAnimatedLengthList dx;
-    [FIXME, SameObject] readonly attribute SVGAnimatedLengthList dy;
+    [SameObject] readonly attribute SVGAnimatedLengthList dy;
-    [FIXME, SameObject] readonly attribute SVGAnimatedNumberList rotate;
+    [SameObject] readonly attribute SVGAnimatedNumberList rotate;
 };

Tests/LibWeb/Layout/expected/svg/svg-text-positioning.txt

@@ -0,0 +1,34 @@
+Viewport <#document> at [0,0] [0+0+0 800 0+0+0] [0+0+0 600 0+0+0] children: not-inline
+  BlockContainer <html> at [0,0] [0+0+0 800 0+0+0] [0+0+0 136 0+0+0] [BFC] children: not-inline
+    BlockContainer <body> at [8,8] [8+0+0 784 0+0+8] [8+0+0 120 0+0+8] children: inline
+      frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 300x120] baseline: 120
+      SVGSVGBox <svg> at [8,8] [0+0+0 300 0+0+0] [0+0+0 120 0+0+0] [SVG] children: inline
+        TextNode <#text> (not painted)
+        SVGGeometryBox <rect> at [8,8] [0+0+0 300 0+0+0] [0+0+0 120 0+0+0] children: not-inline
+        TextNode <#text> (not painted)
+        SVGTextBox <text> at [8,8] [0+0+0 0 0+0+0] [0+0+0 0 0+0+0] children: inline
+          TextNode <#text> (not painted)
+          SVGTextBox <tspan> at [48.796875,23.140625] [0+0+0 44.46875 0+0+0] [0+0+0 22.125 0+0+0] children: inline
+            TextNode <#text> (not painted)
+          TextNode <#text> (not painted)
+          SVGTextBox <tspan> at [114.390625,48.9375] [0+0+0 45.765625 0+0+0] [0+0+0 20.53125 0+0+0] children: inline
+            TextNode <#text> (not painted)
+          TextNode <#text> (not painted)
+          SVGTextBox <tspan> at [191.28125,84.15625] [0+0+0 45.09375 0+0+0] [0+0+0 20.53125 0+0+0] children: inline
+            TextNode <#text> (not painted)
+          TextNode <#text> (not painted)
+        TextNode <#text> (not painted)
+      TextNode <#text> (not painted)
+
+ViewportPaintable (Viewport<#document>) [0,0 800x600]
+  PaintableWithLines (BlockContainer<HTML>) [0,0 800x136]
+    PaintableWithLines (BlockContainer<BODY>) [8,8 784x120]
+      SVGSVGPaintable (SVGSVGBox<svg>) [8,8 300x120]
+        SVGPathPaintable (SVGGeometryBox<rect>) [8,8 300x120]
+        SVGPathPaintable (SVGTextBox<text>) [8,8 0x0]
+          SVGPathPaintable (SVGTextBox<tspan>) [48.796875,23.140625 44.46875x22.125]
+          SVGPathPaintable (SVGTextBox<tspan>) [114.390625,48.9375 45.765625x20.53125]
+          SVGPathPaintable (SVGTextBox<tspan>) [191.28125,84.15625 45.09375x20.53125]
+
+SC for Viewport<#document> [0,0 800x600] [children: 1] (z-index: auto)
+ SC for BlockContainer<HTML> [0,0 800x136] [children: 0] (z-index: auto)

Tests/LibWeb/Layout/input/svg/svg-text-positioning.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<svg width="300" height="120" viewBox="0 0 300 120" xmlns="http://www.w3.org/2000/svg">
+    <rect width="100%" height="100%" fill="black" />
+    <text x="20" y="30%" fill="white" font-family="sans-serif" font-size="28">
+        <tspan dx="20" dy="0">foo</tspan>
+        <tspan dx="20" dy="20%">bar</tspan>
+        <tspan dx="10%" dy="35">baz</tspan>
+    </text>
+</svg>

Tests/LibWeb/Text/expected/wpt-import/svg/idlharness.window.txt

@@ -2,8 +2,8 @@ Harness status: OK
 
 Found 1781 tests
 
-1028 Pass
+1068 Pass
-753 Fail
+713 Fail
 Pass	idl_test setup
 Pass	idl_test validation
 Pass	Partial interface Document: original interface defined
@@ -202,23 +202,23 @@ Pass	SVGNumberList interface: operation insertItemBefore(SVGNumber, unsigned lon
 Pass	SVGNumberList interface: operation replaceItem(SVGNumber, unsigned long)
 Pass	SVGNumberList interface: operation removeItem(unsigned long)
 Pass	SVGNumberList interface: operation appendItem(SVGNumber)
-Fail	SVGNumberList must be primary interface of objects.text.rotate.baseVal
+Pass	SVGNumberList must be primary interface of objects.text.rotate.baseVal
-Fail	Stringification of objects.text.rotate.baseVal
+Pass	Stringification of objects.text.rotate.baseVal
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "length" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "length" with the proper type
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "numberOfItems" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "numberOfItems" with the proper type
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "clear()" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "clear()" with the proper type
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "initialize(SVGNumber)" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "initialize(SVGNumber)" with the proper type
-Fail	SVGNumberList interface: calling initialize(SVGNumber) on objects.text.rotate.baseVal with too few arguments must throw TypeError
+Pass	SVGNumberList interface: calling initialize(SVGNumber) on objects.text.rotate.baseVal with too few arguments must throw TypeError
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "getItem(unsigned long)" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "getItem(unsigned long)" with the proper type
-Fail	SVGNumberList interface: calling getItem(unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
+Pass	SVGNumberList interface: calling getItem(unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "insertItemBefore(SVGNumber, unsigned long)" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "insertItemBefore(SVGNumber, unsigned long)" with the proper type
-Fail	SVGNumberList interface: calling insertItemBefore(SVGNumber, unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
+Pass	SVGNumberList interface: calling insertItemBefore(SVGNumber, unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "replaceItem(SVGNumber, unsigned long)" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "replaceItem(SVGNumber, unsigned long)" with the proper type
-Fail	SVGNumberList interface: calling replaceItem(SVGNumber, unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
+Pass	SVGNumberList interface: calling replaceItem(SVGNumber, unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "removeItem(unsigned long)" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "removeItem(unsigned long)" with the proper type
-Fail	SVGNumberList interface: calling removeItem(unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
+Pass	SVGNumberList interface: calling removeItem(unsigned long) on objects.text.rotate.baseVal with too few arguments must throw TypeError
-Fail	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "appendItem(SVGNumber)" with the proper type
+Pass	SVGNumberList interface: objects.text.rotate.baseVal must inherit property "appendItem(SVGNumber)" with the proper type
-Fail	SVGNumberList interface: calling appendItem(SVGNumber) on objects.text.rotate.baseVal with too few arguments must throw TypeError
+Pass	SVGNumberList interface: calling appendItem(SVGNumber) on objects.text.rotate.baseVal with too few arguments must throw TypeError
 Pass	SVGLengthList interface: existence and properties of interface object
 Pass	SVGLengthList interface object length
 Pass	SVGLengthList interface object name
@@ -370,10 +370,10 @@ Pass	SVGAnimatedNumberList interface: existence and properties of interface prot
 Pass	SVGAnimatedNumberList interface: existence and properties of interface prototype object's @@unscopables property
 Pass	SVGAnimatedNumberList interface: attribute baseVal
 Pass	SVGAnimatedNumberList interface: attribute animVal
-Fail	SVGAnimatedNumberList must be primary interface of objects.text.rotate
+Pass	SVGAnimatedNumberList must be primary interface of objects.text.rotate
-Fail	Stringification of objects.text.rotate
+Pass	Stringification of objects.text.rotate
-Fail	SVGAnimatedNumberList interface: objects.text.rotate must inherit property "baseVal" with the proper type
+Pass	SVGAnimatedNumberList interface: objects.text.rotate must inherit property "baseVal" with the proper type
-Fail	SVGAnimatedNumberList interface: objects.text.rotate must inherit property "animVal" with the proper type
+Pass	SVGAnimatedNumberList interface: objects.text.rotate must inherit property "animVal" with the proper type
 Pass	SVGAnimatedLengthList interface: existence and properties of interface object
 Pass	SVGAnimatedLengthList interface object length
 Pass	SVGAnimatedLengthList interface object name
@@ -382,10 +382,10 @@ Pass	SVGAnimatedLengthList interface: existence and properties of interface prot
 Pass	SVGAnimatedLengthList interface: existence and properties of interface prototype object's @@unscopables property
 Pass	SVGAnimatedLengthList interface: attribute baseVal
 Pass	SVGAnimatedLengthList interface: attribute animVal
-Fail	SVGAnimatedLengthList must be primary interface of objects.text.x
+Pass	SVGAnimatedLengthList must be primary interface of objects.text.x
-Fail	Stringification of objects.text.x
+Pass	Stringification of objects.text.x
-Fail	SVGAnimatedLengthList interface: objects.text.x must inherit property "baseVal" with the proper type
+Pass	SVGAnimatedLengthList interface: objects.text.x must inherit property "baseVal" with the proper type
-Fail	SVGAnimatedLengthList interface: objects.text.x must inherit property "animVal" with the proper type
+Pass	SVGAnimatedLengthList interface: objects.text.x must inherit property "animVal" with the proper type
 Pass	SVGUnitTypes interface: existence and properties of interface object
 Pass	SVGUnitTypes interface object length
 Pass	SVGUnitTypes interface object name
@@ -1117,11 +1117,11 @@ Pass	SVGTextPositioningElement interface object name
 Pass	SVGTextPositioningElement interface: existence and properties of interface prototype object
 Pass	SVGTextPositioningElement interface: existence and properties of interface prototype object's "constructor" property
 Pass	SVGTextPositioningElement interface: existence and properties of interface prototype object's @@unscopables property
-Fail	SVGTextPositioningElement interface: attribute x
+Pass	SVGTextPositioningElement interface: attribute x
-Fail	SVGTextPositioningElement interface: attribute y
+Pass	SVGTextPositioningElement interface: attribute y
-Fail	SVGTextPositioningElement interface: attribute dx
+Pass	SVGTextPositioningElement interface: attribute dx
-Fail	SVGTextPositioningElement interface: attribute dy
+Pass	SVGTextPositioningElement interface: attribute dy
-Fail	SVGTextPositioningElement interface: attribute rotate
+Pass	SVGTextPositioningElement interface: attribute rotate
 Pass	SVGTextElement interface: existence and properties of interface object
 Pass	SVGTextElement interface object length
 Pass	SVGTextElement interface object name
@@ -1130,11 +1130,11 @@ Pass	SVGTextElement interface: existence and properties of interface prototype o
 Pass	SVGTextElement interface: existence and properties of interface prototype object's @@unscopables property
 Pass	SVGTextElement must be primary interface of objects.text
 Pass	Stringification of objects.text
-Fail	SVGTextPositioningElement interface: objects.text must inherit property "x" with the proper type
+Pass	SVGTextPositioningElement interface: objects.text must inherit property "x" with the proper type
-Fail	SVGTextPositioningElement interface: objects.text must inherit property "y" with the proper type
+Pass	SVGTextPositioningElement interface: objects.text must inherit property "y" with the proper type
-Fail	SVGTextPositioningElement interface: objects.text must inherit property "dx" with the proper type
+Pass	SVGTextPositioningElement interface: objects.text must inherit property "dx" with the proper type
-Fail	SVGTextPositioningElement interface: objects.text must inherit property "dy" with the proper type
+Pass	SVGTextPositioningElement interface: objects.text must inherit property "dy" with the proper type
-Fail	SVGTextPositioningElement interface: objects.text must inherit property "rotate" with the proper type
+Pass	SVGTextPositioningElement interface: objects.text must inherit property "rotate" with the proper type
 Pass	SVGTextContentElement interface: objects.text must inherit property "LENGTHADJUST_UNKNOWN" with the proper type
 Pass	SVGTextContentElement interface: objects.text must inherit property "LENGTHADJUST_SPACING" with the proper type
 Pass	SVGTextContentElement interface: objects.text must inherit property "LENGTHADJUST_SPACINGANDGLYPHS" with the proper type
@@ -1176,11 +1176,11 @@ Pass	SVGTSpanElement interface: existence and properties of interface prototype
 Pass	SVGTSpanElement interface: existence and properties of interface prototype object's @@unscopables property
 Pass	SVGTSpanElement must be primary interface of objects.tspan
 Pass	Stringification of objects.tspan
-Fail	SVGTextPositioningElement interface: objects.tspan must inherit property "x" with the proper type
+Pass	SVGTextPositioningElement interface: objects.tspan must inherit property "x" with the proper type
-Fail	SVGTextPositioningElement interface: objects.tspan must inherit property "y" with the proper type
+Pass	SVGTextPositioningElement interface: objects.tspan must inherit property "y" with the proper type
-Fail	SVGTextPositioningElement interface: objects.tspan must inherit property "dx" with the proper type
+Pass	SVGTextPositioningElement interface: objects.tspan must inherit property "dx" with the proper type
-Fail	SVGTextPositioningElement interface: objects.tspan must inherit property "dy" with the proper type
+Pass	SVGTextPositioningElement interface: objects.tspan must inherit property "dy" with the proper type
-Fail	SVGTextPositioningElement interface: objects.tspan must inherit property "rotate" with the proper type
+Pass	SVGTextPositioningElement interface: objects.tspan must inherit property "rotate" with the proper type
 Pass	SVGTextContentElement interface: objects.tspan must inherit property "LENGTHADJUST_UNKNOWN" with the proper type
 Pass	SVGTextContentElement interface: objects.tspan must inherit property "LENGTHADJUST_SPACING" with the proper type
 Pass	SVGTextContentElement interface: objects.tspan must inherit property "LENGTHADJUST_SPACINGANDGLYPHS" with the proper type