LibWeb: Implement SVGGeometryElement.getTotalLength()

Libraries/LibWeb/DOM/Document.h

@@ -152,6 +152,7 @@ enum class InvalidateLayoutTreeReason {
     X(ProcessScreenshot)                     \
     X(SVGGraphicsElementGetBBox)             \
     X(SVGLengthValue)                        \
+    X(SVGPathLength)                         \
     X(SourceSetNormalizeSourceDensities)     \
     X(ViewTransitionCapture)                 \
     X(WindowScroll)

Libraries/LibWeb/SVG/SVGCircleElement.cpp

@@ -38,18 +38,13 @@ static CSSPixels normalized_diagonal_length(CSSPixelSize viewport_size)
 
 Gfx::Path SVGCircleElement::get_path(CSSPixelSize viewport_size)
 {
-    // NB: Called during SVG layout.
-    auto node = unsafe_layout_node();
-    if (!node) {
-        dbgln("FIXME: Null layout node in SVGCircleElement::get_path");
-        return {};
-    }
+    auto computed_values = this->computed_values();
 
-    auto cx = float(node->computed_values().cx().to_px(viewport_size.width()));
-    auto cy = float(node->computed_values().cy().to_px(viewport_size.height()));
+    auto cx = float(computed_values->cx().to_px(viewport_size.width()));
+    auto cy = float(computed_values->cy().to_px(viewport_size.height()));
     // Percentages refer to the normalized diagonal of the current SVG viewport
     // (see Units: https://svgwg.org/svg2-draft/coords.html#Units)
-    auto r = float(node->computed_values().r().to_px(normalized_diagonal_length(viewport_size)));
+    auto r = float(computed_values->r().to_px(normalized_diagonal_length(viewport_size)));
 
     // A zero radius disables rendering.
     if (r == 0)

Libraries/LibWeb/SVG/SVGElement.cpp

@@ -13,6 +13,7 @@
 #include <LibWeb/CSS/StyleValues/KeywordStyleValue.h>
 #include <LibWeb/DOM/Document.h>
 #include <LibWeb/DOM/ShadowRoot.h>
+#include <LibWeb/Painting/SVGSVGPaintable.h>
 #include <LibWeb/SVG/SVGAnimatedLength.h>
 #include <LibWeb/SVG/SVGDescElement.h>
 #include <LibWeb/SVG/SVGElement.h>
@@ -393,6 +394,44 @@ GC::Ptr<SVGElement> SVGElement::viewport_element()
     return nullptr;
 }
 
+Gfx::Size<double> SVGElement::viewport_size_for_percentage_resolution()
+{
+    auto viewport_size_from_layout = [&](SVGSVGElement const& viewport_element) -> Gfx::Size<double> {
+        // NB: A disconnected element may have stale layout objects from before it was removed.
+        if (!viewport_element.is_connected())
+            return {};
+
+        if (auto const* svg_paintable = as_if<Painting::SVGSVGPaintable>(viewport_element.paintable().ptr()))
+            return svg_paintable->svg_viewport_size().to_type<double>();
+
+        return {};
+    };
+
+    // NB: Percentages for SVGSVGElements are resolved irrespective of it's own viewBox (which only affects the internal
+    //     coordinate system)
+    if (auto* svg_element = as_if<SVGSVGElement>(*this)) {
+        auto const* parent = svg_element->parent_or_shadow_host_element();
+
+        // https://w3c.github.io/svgwg/svg2-draft/coords.html#InitialViewport
+        if (!parent || !is<SVGElement>(*parent))
+            return viewport_size_from_layout(*svg_element);
+
+        // https://w3c.github.io/svgwg/svg2-draft/coords.html#EstablishingANewSVGViewport
+        if (is<SVGForeignObjectElement>(*parent))
+            return viewport_size_from_layout(*svg_element);
+    }
+
+    auto const& viewport_element = const_cast<SVGElement*>(this)->owner_svg_element().ptr();
+
+    if (!viewport_element)
+        return {};
+
+    if (auto view_box = viewport_element->active_view_box(); view_box.has_value() && view_box->width > 0 && view_box->height > 0)
+        return { view_box->width, view_box->height };
+
+    return viewport_size_from_layout(*viewport_element);
+}
+
 GC::Ref<SVGAnimatedLength> SVGElement::svg_animated_length_for_attribute(Utf16FlyString const& attribute_name, SVGLength::Directionality directionality, NonnullRefPtr<CSS::StyleValue const>&& default_value)
 {
     if (auto cached = m_reflected_attribute_cache.get(attribute_name); cached.has_value())

Libraries/LibWeb/SVG/SVGElement.h

@@ -39,6 +39,8 @@ class WEB_API SVGElement
     bool should_include_in_accessibility_tree() const;
     virtual Optional<ARIA::Role> default_role() const override;
 
+    Gfx::Size<double> viewport_size_for_percentage_resolution();
+
     GC::Ref<SVGAnimatedLength> svg_animated_length_for_attribute(Utf16FlyString const&, SVGLength::Directionality, NonnullRefPtr<CSS::StyleValue const>&& default_value);
 
     virtual bool is_presentational_hint(Utf16FlyString const&) const final override;

Libraries/LibWeb/SVG/SVGGeometryElement.cpp

@@ -6,6 +6,7 @@
 
 #include <LibWeb/Bindings/Intrinsics.h>
 #include <LibWeb/Bindings/SVGGeometryElement.h>
+#include <LibWeb/DOM/Document.h>
 #include <LibWeb/Layout/SVGGeometryBox.h>
 #include <LibWeb/SVG/SVGGeometryElement.h>
 
@@ -33,9 +34,25 @@ RefPtr<Layout::Node> SVGGeometryElement::create_layout_node(NonnullRefPtr<CSS::C
     return make_ref_counted<Layout::SVGGeometryBox>(document(), *this, style);
 }
 
-float SVGGeometryElement::get_total_length()
+// https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength
+WebIDL::ExceptionOr<float> SVGGeometryElement::get_total_length()
 {
-    return 0;
+    // When getTotalLength() is called, the user agent's computed value for the total length of the path, in user units,
+    // is returned.
+
+    // NB: Update layout so that the viewport size is resolved correctly
+    document().update_layout(DOM::UpdateLayoutReason::SVGPathLength);
+
+    auto viewport_size = viewport_size_for_percentage_resolution();
+
+    // NB: Update style for the element so that the correct computed values are used to generate the path - this is done
+    //     separately from the layout update above since it may have been skipped if the element was display: none or
+    //     disconnected.
+    document().update_style_for_element(*this);
+
+    VERIFY(computed_values());
+
+    return get_path({ viewport_size.width(), viewport_size.height() }).length();
 }
 
 GC::Ref<Geometry::DOMPoint> SVGGeometryElement::get_point_at_length(float distance)

Libraries/LibWeb/SVG/SVGGeometryElement.h

@@ -20,7 +20,7 @@ class SVGGeometryElement : public SVGGraphicsElement {
 
     virtual Gfx::Path get_path(CSSPixelSize viewport_size) = 0;
 
-    float get_total_length();
+    WebIDL::ExceptionOr<float> get_total_length();
     GC::Ref<Geometry::DOMPoint> get_point_at_length(float distance);
 
     GC::Ref<SVGAnimatedNumber> path_length();

Libraries/LibWeb/SVG/SVGLength.cpp

@@ -55,44 +55,6 @@ void SVGLength::visit_edges(Cell::Visitor& visitor)
 
 SVGLength::~SVGLength() = default;
 
-static Gfx::Size<double> svg_viewport_size(SVGElement& element)
-{
-    auto viewport_size_from_layout = [](SVGSVGElement& viewport_element) -> Gfx::Size<double> {
-        // NB: A disconnected element may have stale layout objects from before it was removed.
-        if (!viewport_element.is_connected())
-            return {};
-
-        if (auto const* svg_paintable = as_if<Painting::SVGSVGPaintable>(viewport_element.paintable().ptr()))
-            return svg_paintable->svg_viewport_size().to_type<double>();
-
-        return {};
-    };
-
-    // NB: Presentational attributes on SVGSVGElements are resolved irrespective of it's own viewBox (which only affects
-    //     the internal coordinate system)
-    if (auto* svg_element = as_if<SVGSVGElement>(element)) {
-        auto const* parent = svg_element->parent_or_shadow_host_element();
-
-        // https://w3c.github.io/svgwg/svg2-draft/coords.html#InitialViewport
-        if (!parent || !is<SVGElement>(*parent))
-            return viewport_size_from_layout(*svg_element);
-
-        // https://w3c.github.io/svgwg/svg2-draft/coords.html#EstablishingANewSVGViewport
-        if (is<SVGForeignObjectElement>(*parent))
-            return viewport_size_from_layout(*svg_element);
-    }
-
-    auto viewport_element = element.owner_svg_element();
-
-    if (!viewport_element)
-        return {};
-
-    if (auto view_box = viewport_element->active_view_box(); view_box.has_value() && view_box->width > 0 && view_box->height > 0)
-        return { view_box->width, view_box->height };
-
-    return viewport_size_from_layout(*viewport_element);
-}
-
 static double percentage_resolution_basis_for_attribute_reflecting_length(GC::Ptr<SVGElement> element, SVGLength::Directionality directionality)
 {
     // AD-HOC: This is defined in the algorithms of both SVGLength::value and SVGLength::convertToSpecifiedUnits so we
@@ -107,7 +69,7 @@ static double percentage_resolution_basis_for_attribute_reflecting_length(GC::Pt
     // NB: Make sure the SVG layout is up to date so the viewport size is up to date.
     element->document().update_layout(DOM::UpdateLayoutReason::SVGLengthValue);
 
-    auto viewport = svg_viewport_size(*element);
+    auto viewport = element->viewport_size_for_percentage_resolution();
 
     switch (directionality) {
     case SVGLength::Directionality::Horizontal:

Tests/LibWeb/Text/expected/wpt-import/svg/types/scripted/SVGGeometryElement.getTotalLength-01.txt

@@ -0,0 +1,12 @@
+Harness status: OK
+
+Found 6 tests
+
+5 Pass
+1 Fail
+Pass	SVGGeometryElement.prototype.getTotalLength(), getTotalLength - path with pathLength
+Pass	SVGGeometryElement.prototype.getTotalLength(), getTotalLength - rect
+Pass	SVGGeometryElement.prototype.getTotalLength(), getTotalLength - rect in document
+Pass	SVGGeometryElement.prototype.getTotalLength(), getTotalLength - rect in document with percent units
+Pass	SVGGeometryElement.prototype.getTotalLength(), getTotalLength - rect in document with display none
+Fail	SVGGeometryElement.prototype.getTotalLength(), getTotalLength - path modified with setPathData

Tests/LibWeb/Text/expected/wpt-import/svg/types/scripted/SVGGeometryElement.getTotalLength-02.txt

@@ -0,0 +1,6 @@
+Harness status: OK
+
+Found 1 tests
+
+1 Pass
+Pass	SVGGeometryElement.getTotalLength: 'display:none'

Tests/LibWeb/Text/expected/wpt-import/svg/types/scripted/SVGPathElement.getTotalLength-01.txt

@@ -0,0 +1,8 @@
+Harness status: OK
+
+Found 3 tests
+
+3 Pass
+Pass	SVGPathElement.getTotalLength: 'display:none', path with d attribute specified on element
+Pass	SVGPathElement.getTotalLength: 'display:none', path with d attribute specified as styles
+Pass	SVGPathElement.getTotalLength: 'display:none', path with d attribute specified on element and as styles

Tests/LibWeb/Text/input/wpt-import/svg/types/scripted/SVGGeometryElement.getTotalLength-02.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<title>SVGGeometryElement.getTotalLength: 'display:none'</title>
+<link rel="author" title="Divyansh Mangal" href="mailto:dmangal@microsoft.com">
+<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength"/>
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+  <rect id="rectTest" style="display:none" x="30" y="30" width="10" height="10"></rect>
+  <circle id="circleTest" style="display:none" cx="50" cy="50" r="5" />
+</svg>
+<script>
+  test(function() {
+    let perimeter = (width, height) => 2 * width + 2 * height;
+    assert_equals(rectTest.getTotalLength(), perimeter(rectTest.width.baseVal.value, rectTest.height.baseVal.value));
+    let circumference = (r) => 2 * Math.PI * r;
+    assert_approx_equals(circleTest.getTotalLength(), circumference(circleTest.r.baseVal.value), 1);
+  });
+</script>

Tests/LibWeb/Text/input/wpt-import/svg/types/scripted/SVGPathElement.getTotalLength-01.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<title>SVGPathElement.getTotalLength: 'display:none'</title>
+<link rel="author" title="Divyansh Mangal" href="mailto:dmangal@microsoft.com">
+<script src="../../../resources/testharness.js"></script>
+<script src="../../../resources/testharnessreport.js"></script>
+<style>
+  #path2, #path3 {
+    d:path("M 0 0 t 0 100");
+  }
+</style>
+<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <path id="path1" d="M 0 0 t 0 100" style="display:none" />
+    <path id="path2" style="display:none;" />
+    <path id="path3" d="M 110,10 l 80,80 v -80 h -40" style="display:none;" />
+</svg>
+<script>
+  test(function() {
+    assert_equals(path1.getTotalLength(), 100);
+  },document.title + ', ' + 'path with d attribute specified on element');
+  test(function() {
+    assert_equals(path2.getTotalLength(), 100);
+  },document.title + ', ' + 'path with d attribute specified as styles');
+  test(function() {
+    assert_equals(path3.getTotalLength(), 100);
+  },document.title + ', ' + 'path with d attribute specified on element and as styles');
+</script>