Bug 1643727 [wpt PR 24013] - When SVGGeometryElement.getPointAtLength is called with with non-rendered, throw exception, a=testonly

Automatic update from web-platform-tests
When SVGGeometryElement.getPointAtLength is called with with non-rendered, throw exception

getPointAtLength[1] on SVGGeometryElement should throw InvalidStateError
for with non-rendered, so this patch throws InvalidStateError if there is no LayoutObject on the target element.

[1] https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength

Bug: 972979
Change-Id: I26eb5330127ebbca9fbf55d796ce8159a09bfcb4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2147168
Commit-Queue: Hyunjune Kim <hyunjune.kim@samsung.com>
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Reviewed-by: Stephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#790367}

--

wpt-commits: c04dcf9876cb706a3b25ff95c2ca104c8454112a
wpt-pr: 24013

testing/web-platform/tests/svg/types/scripted/SVGGeometryElement.getPointAtLength-02.svg

@@ -1,13 +1,12 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
   <title>SVGGeometryElement.prototype.getPointAtLength() query with 'pathLength'</title>
   <h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength"/>
+  <path id='pathElement' d='M0,0L100,0L100,100' pathLength="1000"/>
   <h:script src="/resources/testharness.js"/>
   <h:script src="/resources/testharnessreport.js"/>
   <script>
 test(function() {
-    let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-    path.setAttribute('d', 'M0,0L100,0L100,100');
-    path.setAttribute('pathLength', '1000');
+    let path = document.getElementById('pathElement');
 
     var point = path.getPointAtLength(50);
     assert_approx_equals(point.x, 50, 1e-5);

testing/web-platform/tests/svg/types/scripted/SVGGeometryElement.getPointAtLength-03.svg

@@ -0,0 +1,30 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     xmlns:html="http://www.w3.org/1999/xhtml">
+  <title>When SVGGeometryElement.getPointAtLength is called with an element that is not in the document, throw exception</title>
+  <html:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength"/>
+  <html:script src="/resources/testharness.js"/>
+  <html:script src="/resources/testharnessreport.js"/>
+  <script><![CDATA[
+  test(function() {
+    var pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    pathElement.setAttribute("d", 'M0,20 L400,20 L640,20');
+    assert_throws_dom("InvalidStateError", function() { pathElement.getPointAtLength(700) });
+  }, document.title + " with SVGPathElement");
+
+  test(function() {
+    var rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rectElement.setAttribute("rx", 0);
+    rectElement.setAttribute("ry", 0);
+    rectElement.setAttribute("width", 200);
+    rectElement.setAttribute("height", 300);
+    assert_throws_dom("InvalidStateError", function() { rectElement.getPointAtLength(300); });
+  }, document.title + " with SVGRectElement");
+
+  test(function() {
+    var circleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+    circleElement.setAttribute("r", 10);
+    assert_throws_dom("InvalidStateError", function() { circleElement.getPointAtLength(100); });
+  }, document.title + " with SVGCircleElement");
+  ]]></script>
+</svg>

testing/web-platform/tests/svg/types/scripted/SVGGeometryElement.getPointAtLength-04.svg

@@ -0,0 +1,79 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVGGeometryElement.getPointAtLength: 'display' and a valid path</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength"/>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <path id='pathElement1' d='M0,0L100,0L100,100' description='path with display: defualt'/>
+  <path id='pathElement2' style='display:none' d='M0,0L100,0L100,100' description='path with display: none'/>
+  <rect id='rectElement1' x='0' y='0' width='50' height='50' description='rect with display: default'/>
+  <rect id='rectElement2' style='display:none' x='0' y='0' width='50' height='50' description='rect with display: none'/>
+  <circle id='circleElement1' cx='0' cy='0' r='50' description='circle with display: defualt'/>
+  <circle id='circleElement2' style='display:none' cx='0' cy='0' r='50' description='circle with display: none'/>
+  <polygon id='polygonElement1' points="0,0 50,0 50,50 0,50" description='polygon with display: default'/>
+  <polygon id='polygonElement2' style='display:none' points="0,0 50,0 50,50 0,50" description='polygon with display: none'/>
+  <polyline id='polylineElement1' points="0,0 50,0 50,50 0,50" description='polyline with display: default'/>
+  <polyline id='polylineElement2' style='display:none' points="0,0 50,0 50,50 0,50" description='polyline with display: none'/>
+  <ellipse id='ellipseElement1' cx='0' cy='0' rx='50' ry='50' description='ellipse with display: default'/>
+  <ellipse id='ellipseElement2' style='display:none' cx='0' cy='0' rx='50' ry='50' description='ellipse with display: none'/>
+  <script>
+['pathElement1', 'pathElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    var point = element.getPointAtLength(50);
+    assert_approx_equals(point.x, 50, 1e-5);
+    assert_approx_equals(point.y, 0, 1e-5);
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['rectElement1', 'rectElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    var point = element.getPointAtLength(50);
+    assert_approx_equals(point.x, 50, 1e-5);
+    assert_approx_equals(point.y, 0, 1e-5);
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['circleElement1', 'circleElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    var point = element.getPointAtLength(0);
+    assert_approx_equals(point.x, 50, 1e-5);
+    assert_approx_equals(point.y, 0, 1e-5);
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['polygonElement1', 'polygonElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    var point = element.getPointAtLength(50);
+    assert_approx_equals(point.x, 50, 1e-5);
+    assert_approx_equals(point.y, 0, 1e-5);
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['polylineElement1', 'polylineElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    var point = element.getPointAtLength(50);
+    assert_approx_equals(point.x, 50, 1e-5);
+    assert_approx_equals(point.y, 0, 1e-5);
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['ellipseElement1', 'ellipseElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    var point = element.getPointAtLength(0);
+    assert_approx_equals(point.x, 50, 1e-5);
+    assert_approx_equals(point.y, 0, 1e-5);
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+  </script>
+</svg>

testing/web-platform/tests/svg/types/scripted/SVGGeometryElement.getPointAtLength-05.svg

@@ -0,0 +1,67 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
+  <title>SVGGeometryElement.getPointAtLength: 'display' and empty path</title>
+  <h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength"/>
+  <h:script src="/resources/testharness.js"/>
+  <h:script src="/resources/testharnessreport.js"/>
+  <path id='pathElement1' description='path with display: defualt and an empty path'/>
+  <path id='pathElement2' style='display:none' description='path with display: none and an empty path'/>
+  <rect id='rectElement1' description='rect with display: defualt and an empty path'/>
+  <rect id='rectElement2' style='display:none' description='rect with display: none and an empty path'/>
+  <circle id='circleElement1' description='circle with display: default and an empty path'/>
+  <circle id='circleElement2' style='display:none' description='circle with display: none and an empty path'/>
+  <polygon id='polygonElement1' description='polygon with display: defualt and an empty path'/>
+  <polygon id='polygonElement2' style='display:none' description='polygon with display: none and an empty path'/>
+  <polyline id='polylineElement1' description='polyline with display: default and an empty path'/>
+  <polyline id='polylineElement2' style='display:none' description='polyline with display: none and an empty path'/>
+  <ellipse id='ellipseElement1' description='ellipse with display: default and an empty path'/>
+  <ellipse id='ellipseElement2' style='display:none' description='ellipse with display: none and an empty path'/>
+  <script>
+['pathElement1', 'pathElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    assert_throws_dom("InvalidStateError", function() { element.getPointAtLength(300); });
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['rectElement1', 'rectElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    assert_throws_dom("InvalidStateError", function() { element.getPointAtLength(300); });
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['circleElement1', 'circleElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    assert_throws_dom("InvalidStateError", function() { element.getPointAtLength(300); });
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['polygonElement1', 'polygonElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    assert_throws_dom("InvalidStateError", function() { element.getPointAtLength(300); });
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['polylineElement1', 'polylineElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    assert_throws_dom("InvalidStateError", function() { element.getPointAtLength(300); });
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+
+['ellipseElement1', 'ellipseElement2'].forEach(elementId => {
+  test(function() {
+    let element = document.getElementById(elementId);
+    assert_throws_dom("InvalidStateError", function() { element.getPointAtLength(300); });
+  }, document.title + ', ' +
+     document.getElementById(elementId).getAttribute('description'));
+});
+  </script>
+</svg>