Commit c2f97606 authored by Fredrik Söderquist's avatar Fredrik Söderquist Committed by Commit Bot

Move pathLength tests to WPT

Moves svg/stroke/pathlength-* and svg/dom/path-queries-pathLength.html
to WPT, splitting the latter into two while converting the former to
SVG.

Change-Id: I04d404dc5f074d4278e5d081a12b960cf1ec98fc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2019366
Commit-Queue: Stephen Chenney <schenney@chromium.org>
Auto-Submit: Fredrik Söderquist <fs@opera.com>
Reviewed-by: default avatarStephen Chenney <schenney@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735178}
parent 363dd38d
...@@ -10,8 +10,7 @@ ...@@ -10,8 +10,7 @@
</metadata> </metadata>
<defs> <defs>
<path id="track" stroke="lightblue" fill="none" <path id="track" stroke="lightblue" fill="none" d="M 50 50 h 200" pathLength="2"/>
d="M 50 50 h 200" pathLength="2"/>
</defs> </defs>
<g> <g>
......
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait">
<title>Mutating the 'pathLength' attribute ('path' element)</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#PathLengthAttribute"/>
<h:link rel="match" href="reference/pathlength-path-mutating-ref.svg"/>
<path pathLength="800" d="M100,100h100v100h-100z" fill="none"
stroke="blue" stroke-width="20" stroke-dasharray="25"/>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector('path').setAttribute('pathLength', 200);
document.documentElement.classList.toggle("reftest-wait");
});
});
</script>
</svg>
<!DOCTYPE html> <svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<svg> <title>The 'pathLength' attribute set to a negative value ('path' element)</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#PathLengthAttribute"/>
<h:link rel="match" href="reference/pathlength-path-negative-ref.svg"/>
<path d="M10,10L110,10L110,110L10,110Z" pathLength="-4" stroke-dashoffset="1" stroke-dasharray="1 1" <path d="M10,10L110,10L110,110L10,110Z" pathLength="-4" stroke-dashoffset="1" stroke-dasharray="1 1"
fill="none" stroke="black" stroke-width="10"></path> fill="none" stroke="black" stroke-width="10"></path>
</svg> </svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>The 'pathLength' attribute set to zero ('path' element)</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#PathLengthAttribute"/>
<h:link rel="match" href="reference/pathlength-path-zero-ref.svg"/>
<path d="M10,10L110,10L110,110L10,110Z" pathLength="0" stroke-dashoffset="1" stroke-dasharray="1 1"
fill="none" stroke="black" stroke-width="10"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>The 'pathLength' attribute ('path' element)</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#PathLengthAttribute"/>
<h:link rel="match" href="reference/pathlength-path-ref.svg"/>
<path d="M10,10L110,10L110,110L10,110Z" pathLength="4"
stroke-dashoffset="1" stroke-dasharray="1 1"
fill="none" stroke="black" stroke-width="10"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" class="reftest-wait"
width="100" height="100">
<title>Mutating the 'pathLength' attribute ('rect' element)</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#PathLengthAttribute"/>
<h:link rel="match" href="reference/pathlength-rect-mutating-ref.svg"/>
<rect y="50" width="200" height="100" fill="red"
stroke="green" stroke-width="100" stroke-dasharray="100"
pathLength="4800"/>
<script>
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.querySelector('rect').setAttribute('pathLength', 600);
document.documentElement.classList.toggle("reftest-wait");
});
});
</script>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>The 'pathLength' attribute ('rect' element)</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/paths.html#PathLengthAttribute"/>
<h:link rel="match" href="reference/pathlength-rect-ref.svg"/>
<rect width="50" height="50" pathLength="4" fill="blue"
stroke-dashoffset="1" stroke-dasharray="1 1" stroke="black" stroke-width="10"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<title>Mutating the 'pathLength' attribute ('path' element; reference)</title>
<path d="M100,100h100v100h-100z" fill="none" stroke="blue"
stroke-width="20" stroke-dasharray="50"/>
</svg>
<!DOCTYPE html> <svg xmlns="http://www.w3.org/2000/svg">
<svg> <title>The 'pathLength' attribute set to a negative value ('path' element; reference)</title>
<path d="M10,10L110,10L110,110L10,110Z" stroke-dashoffset="1" stroke-dasharray="1 1" <path d="M10,10L110,10L110,110L10,110Z" stroke-dashoffset="1" stroke-dasharray="1 1"
fill="none" stroke="black" stroke-width="10"></path> fill="none" stroke="black" stroke-width="10"></path>
</svg> </svg>
<!DOCTYPE html> <svg xmlns="http://www.w3.org/2000/svg">
<svg> <title>The 'pathLength' attribute ('path' element; reference)</title>
<path d="M10,10L110,10L110,110L10,110Z" stroke-dashoffset="100" stroke-dasharray="100 100" <path d="M10,10L110,10L110,110L10,110Z" stroke-dashoffset="100" stroke-dasharray="100 100"
fill="none" stroke="black" stroke-width="10"></path> fill="none" stroke="black" stroke-width="10"></path>
</svg> </svg>
<!DOCTYPE html> <svg xmlns="http://www.w3.org/2000/svg">
<svg> <title>The 'pathLength' attribute set to zero ('path' element; reference)</title>
<path d="M10,10L110,10L110,110L10,110Z" fill="none" stroke="black" stroke-width="10"></path> <path d="M10,10L110,10L110,110L10,110Z" fill="none" stroke="black" stroke-width="10"/>
</svg> </svg>
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="green"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<title>The 'pathLength' attribute ('rect' element; reference)</title>
<rect width="50" height="50" fill="blue"
stroke-dashoffset="50" stroke-dasharray="50 50" stroke="black" stroke-width="10"/>
</svg>
<!DOCTYPE html> <svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>SVGPathElement path metrics query w/ pathLength</title> <title>SVGGeometryElement.prototype.getPointAtLength() query with 'pathLength'</title>
<script src=../../resources/testharness.js></script> <h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getPointAtLength"/>
<script src=../../resources/testharnessreport.js></script> <h:script src="/resources/testharness.js"/>
<script> <h:script src="/resources/testharnessreport.js"/>
setup(function() { <script>
window.path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); test(function() {
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d', 'M0,0L100,0L100,100'); path.setAttribute('d', 'M0,0L100,0L100,100');
path.setAttribute('pathLength', '1000'); path.setAttribute('pathLength', '1000');
});
test(function() {
assert_approx_equals(path.getTotalLength(), 200, 1e-5);
}, document.title+', getTotalLength');
test(function() {
var point = path.getPointAtLength(50); var point = path.getPointAtLength(50);
assert_approx_equals(point.x, 50, 1e-5); assert_approx_equals(point.x, 50, 1e-5);
assert_approx_equals(point.y, 0, 1e-5); assert_approx_equals(point.y, 0, 1e-5);
var point = path.getPointAtLength(150); var point = path.getPointAtLength(150);
assert_approx_equals(point.x, 100, 1e-5); assert_approx_equals(point.x, 100, 1e-5);
assert_approx_equals(point.y, 50, 1e-5); assert_approx_equals(point.y, 50, 1e-5);
}, document.title+', getPointAtLength'); });
</script> </script>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml">
<title>SVGGeometryElement.prototype.getTotalLength() query with 'pathLength'</title>
<h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__getTotalLength"/>
<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');
assert_approx_equals(path.getTotalLength(), 200, 1e-5);
}, document.title+', getTotalLength');
</script>
</svg>
<!DOCTYPE html>
<svg>
<path d="M10,10L110,10L110,110L10,110Z" pathLength="4" stroke-dashoffset="1" stroke-dasharray="1 1"
fill="none" stroke="black" stroke-width="10"></path>
</svg>
<!DOCTYPE html>
<svg width="400" height="400">
<path d="M100,100h100v100h-100z" fill="none" stroke="blue" stroke-width="20" stroke-dasharray="50"/>
</svg>
<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<svg width="400" height="400">
<path pathLength="800" d="M100,100h100v100h-100z" fill="none"
stroke="blue" stroke-width="20" stroke-dasharray="25"/>
</svg>
<script>
runAfterLayoutAndPaint(function() {
document.querySelector('path').setAttribute('pathLength', 200);
}, true);
</script>
<!DOCTYPE html>
<svg>
<path d="M10,10L110,10L110,110L10,110Z" pathLength="0" stroke-dashoffset="1" stroke-dasharray="1 1"
fill="none" stroke="black" stroke-width="10"></path>
</svg>
<!DOCTYPE html>
<div style="width: 100px; height: 100px; background-color: green"></div>
<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<svg width="100" height="100">
<rect y="50" width="200" height="100" fill="red"
stroke="green" stroke-width="100" stroke-dasharray="100"
pathLength="4800"/>
</svg>
<script>
runAfterLayoutAndPaint(function() {
document.querySelector('rect').setAttribute('pathLength', 600);
}, true);
</script>
CONSOLE ERROR: line 4: Error: <path> attribute pathLength: A negative value is not valid. ("-4")
<!DOCTYPE html>
<svg>
<rect width="50" height="50" fill="blue" stroke-dashoffset="50" stroke-dasharray="50 50" stroke="black" stroke-width="10"/>
</svg>
<!DOCTYPE html>
<svg>
<rect width="50" height="50" pathLength="4" fill="blue" stroke-dashoffset="1" stroke-dasharray="1 1" stroke="black" stroke-width="10"/>
</svg>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment