diff options
Diffstat (limited to 'testing/web-platform/tests/svg/shapes')
47 files changed, 810 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/shapes/animatedPoints-non-animated.html b/testing/web-platform/tests/svg/shapes/animatedPoints-non-animated.html new file mode 100644 index 0000000000..5c17589086 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/animatedPoints-non-animated.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>animatedPoints non-animated</title> +<link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#InterfaceSVGAnimatedPoints"> +<meta name="assert" content="animatedPoints represents the current non-animated value"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +</head> +<body> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="200" height="200"> + <polyline fill="none" stroke="blue" stroke-width="5" + points="20,30 50,70" id="stripe"> + <set id="anim" attributeType="XML" attributeName="points" fill="freeze" + to="170,150 130,120" begin="indefinite" onbegin="measure()"/> + </polyline> +</svg> +<script> + +'use strict'; + +var measure; + +async_test(t => { + + measure = t.step_func(() => { + const stripe = document.getElementById('stripe'); + const animatedPoints = stripe.animatedPoints; + assert_equals(animatedPoints.numberOfItems, 2); + assert_equals(animatedPoints.getItem(0).x, 20); + assert_equals(animatedPoints.getItem(0).y, 30); + assert_equals(animatedPoints.getItem(1).x, 50); + assert_equals(animatedPoints.getItem(1).y, 70); + t.done(); + }); + + const anim = document.getElementById('anim'); + if (anim.beginElement) { + anim.beginElement(); + } else { + // SMIL not supported. + requestAnimationFrame(measure); + } +}, 'animatedPoints represents non-animated value'); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/svg/shapes/circle-01-ref.svg b/testing/web-platform/tests/svg/shapes/circle-01-ref.svg new file mode 100644 index 0000000000..1d62e8e2af --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/circle-01-ref.svg @@ -0,0 +1,3 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/circle-01.svg b/testing/web-platform/tests/svg/shapes/circle-01.svg new file mode 100644 index 0000000000..8eecd6621f --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/circle-01.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#CircleElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="circle-01-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="r 0 disables rendering."/> + </metadata> + <circle cx="50" cy="50" r="0" fill="red" stroke="red" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-01-ref.svg b/testing/web-platform/tests/svg/shapes/ellipse-01-ref.svg new file mode 100644 index 0000000000..c4ab1bd039 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-01-ref.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <ellipse cx="50" cy="50" rx="40" ry="30" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-01.svg b/testing/web-platform/tests/svg/shapes/ellipse-01.svg new file mode 100644 index 0000000000..1b1124e4c5 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-01.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-01-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="ellipse element uses rx/ry properties."/> + </metadata> + <style> + ellipse { + rx: 40px; + ry: 30px; + } + </style> + <ellipse cx="50" cy="50" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-02-ref.svg b/testing/web-platform/tests/svg/shapes/ellipse-02-ref.svg new file mode 100644 index 0000000000..1a4b455d03 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-02-ref.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <ellipse cx="50" cy="50" rx="40" ry="40" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-02.svg b/testing/web-platform/tests/svg/shapes/ellipse-02.svg new file mode 100644 index 0000000000..c4727b84b2 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-02.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-02-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="ry auto means rx is used"/> + </metadata> + <style> + ellipse { + rx: 40px; + ry: auto; + } + </style> + <ellipse cx="50" cy="50" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-03-ref.svg b/testing/web-platform/tests/svg/shapes/ellipse-03-ref.svg new file mode 100644 index 0000000000..15fae5e844 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-03-ref.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <ellipse cx="50" cy="50" rx="30" ry="30" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-03.svg b/testing/web-platform/tests/svg/shapes/ellipse-03.svg new file mode 100644 index 0000000000..e0aacefd70 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-03.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-03-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rx auto means ry is used."/> + </metadata> + <style> + ellipse { + rx: auto; + ry: 30px; + } + </style> + <ellipse cx="50" cy="50" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-04-ref.svg b/testing/web-platform/tests/svg/shapes/ellipse-04-ref.svg new file mode 100644 index 0000000000..1d62e8e2af --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-04-ref.svg @@ -0,0 +1,3 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-04.svg b/testing/web-platform/tests/svg/shapes/ellipse-04.svg new file mode 100644 index 0000000000..79e6d0674a --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-04.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-04-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rx and ry auto disables rendering."/> + </metadata> + <style> + ellipse { + rx: auto; + ry: auto; + } + </style> + <ellipse cx="50" cy="50" fill="none" stroke="red" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-05.svg b/testing/web-platform/tests/svg/shapes/ellipse-05.svg new file mode 100644 index 0000000000..e86f1052dd --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-05.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-02-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="ry defaults to auto."/> + </metadata> + <style> + ellipse { + rx: 40px; + } + </style> + <ellipse cx="50" cy="50" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-06.svg b/testing/web-platform/tests/svg/shapes/ellipse-06.svg new file mode 100644 index 0000000000..80f36a9adc --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-06.svg @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-03-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rx defaults to auto."/> + </metadata> + <style> + ellipse { + ry: 30px; + } + </style> + <ellipse cx="50" cy="50" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-07-ref.svg b/testing/web-platform/tests/svg/shapes/ellipse-07-ref.svg new file mode 100644 index 0000000000..bd84518021 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-07-ref.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="160px" viewBox="0 0 60 40"> + <ellipse cx="20" cy="20" rx="15" ry="15" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-07.svg b/testing/web-platform/tests/svg/shapes/ellipse-07.svg new file mode 100644 index 0000000000..396e5f3f62 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-07.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="160px" viewBox="0 0 60 40"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-07-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="ry auto means rx absolute length is used"/> + </metadata> + <style> + ellipse { + rx: 25%; + ry: auto; + } + </style> + <ellipse cx="20" cy="20" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-08.svg b/testing/web-platform/tests/svg/shapes/ellipse-08.svg new file mode 100644 index 0000000000..1ff393beb0 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-08.svg @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="240px" height="160px" viewBox="0 0 60 40"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-07-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rx auto means ry absolute length is used"/> + </metadata> + <style> + ellipse { + rx: auto; + ry: 37.5%; + } + </style> + <ellipse cx="20" cy="20" fill="none" stroke="blue" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/ellipse-09.svg b/testing/web-platform/tests/svg/shapes/ellipse-09.svg new file mode 100644 index 0000000000..77e3f3fe70 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/ellipse-09.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="ellipse-04-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rx or ry 0 disables rendering."/> + </metadata> + <ellipse cx="30" cy="50" rx="0" ry="10" fill="red" stroke="red" stroke-width="5"/> + <ellipse cx="50" cy="50" rx="10" ry="0" fill="red" stroke="red" stroke-width="5"/> + <ellipse cx="70" cy="50" rx="0" ry="0" fill="red" stroke="red" stroke-width="5"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/line-dasharray-ref.svg b/testing/web-platform/tests/svg/shapes/line-dasharray-ref.svg new file mode 100644 index 0000000000..5b1caaa8bc --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/line-dasharray-ref.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + width="300" height="200"> + <style> + line { + stroke: blue; + stroke-dasharray: 24 8; + } + </style> + <line id="interval" x1="50" y1="100" x2="250" y2="100"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/line-dasharray.svg b/testing/web-platform/tests/svg/shapes/line-dasharray.svg new file mode 100644 index 0000000000..3ac8b19b1c --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/line-dasharray.svg @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml" + width="300" height="200"> + <metadata> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/painting.html#StrokeDashing"/> + <h:link rel="match" href="line-dasharray-ref.svg"/> + <h:meta name="assert" content="The ‘pathLength’ attribute on a ‘path’ element affects stroke-dasharray."/> + </metadata> + <style> + line { + stroke: blue; + stroke-dasharray: 3 1; + } + </style> + <line id="interval" x1="50" y1="100" x2="250" y2="100" pathLength="25"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/line-getPointAtLength.svg b/testing/web-platform/tests/svg/shapes/line-getPointAtLength.svg new file mode 100644 index 0000000000..472a64480a --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/line-getPointAtLength.svg @@ -0,0 +1,35 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#InterfaceSVGLineElement"/> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGGeometryElement"/> + <h:meta name="assert" content="The line element supports getPointAtLength."/> + </metadata> + <line id="interval" x1="300" y1="400" x2="500" y2="400"/> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var interval = document.getElementById('interval'); + assert_not_equals(interval.getTotalLength, undefined, 'getTotalLength is defined for SVGLineElement'); + assert_not_equals(interval.getPointAtLength, undefined, 'getPointAtLength is defined for SVGLineElement'); + assert_equals(interval.getTotalLength(), 200, 'total length'); + + var point = interval.getPointAtLength(10); + assert_equals(point.x, 310, 'x'); + assert_equals(point.y, 400, 'y'); + }, 'line supports getPointAtLength'); + + test(function() { + var interval = document.getElementById('interval'); + interval.setAttribute('pathLength', '25'); + + assert_equals(interval.getTotalLength(), 200, 'total length'); + + var point = interval.getPointAtLength(10); + assert_equals(point.x, 310, 'x'); + assert_equals(point.y, 400, 'y'); + }, 'line getPointAtLength ignores pathLength'); + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/line-pathLength.svg b/testing/web-platform/tests/svg/shapes/line-pathLength.svg new file mode 100644 index 0000000000..c6802d70a1 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/line-pathLength.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#InterfaceSVGLineElement"/> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/types.html#InterfaceSVGGeometryElement"/> + <h:meta name="assert" content="The pathLength IDL attribute reflects the ‘pathLength’ content attribute."/> + </metadata> + <line id="interval" x1="300" y1="400" x2="500" y2="400" pathLength="25"/> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var interval = document.getElementById('interval'); + assert_not_equals(interval.pathLength, undefined, "pathLength is defined for SVGLineElement"); + assert_equals(interval.pathLength.baseVal, 25); + }, 'line supports pathLength attribute'); + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-01-ref.html b/testing/web-platform/tests/svg/shapes/rect-01-ref.html new file mode 100644 index 0000000000..5e851e37e5 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-01-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; background-color: blue;"></div> diff --git a/testing/web-platform/tests/svg/shapes/rect-01.svg b/testing/web-platform/tests/svg/shapes/rect-01.svg new file mode 100644 index 0000000000..a580807cbe --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-01.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="http://www.w3.org/TR/SVG2/shapes.html#RectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="rect-01-ref.html"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rect element renders correctly."/> + </metadata> + <rect x="10" y="10" width="50" height="50" fill="blue"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-02-ref.html b/testing/web-platform/tests/svg/shapes/rect-02-ref.html new file mode 100644 index 0000000000..b20895255e --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-02-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="position: absolute; top: 8px; left: 8px; width: 46px; height: 46px; border: 4px solid blue;"></div> diff --git a/testing/web-platform/tests/svg/shapes/rect-02.svg b/testing/web-platform/tests/svg/shapes/rect-02.svg new file mode 100644 index 0000000000..123203e97f --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-02.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="http://www.w3.org/TR/SVG2/shapes.html#RectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="rect-02-ref.html"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rect element with stroke renders correctly."/> + </metadata> + <rect x="10" y="10" width="50" height="50" fill="none" stroke="blue" stroke-width="4"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-03-ref.html b/testing/web-platform/tests/svg/shapes/rect-03-ref.html new file mode 100644 index 0000000000..97abb41241 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-03-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<div style="position: absolute; top: 10px; left: 10px; width: 50px; height: 50px; border-radius: 8px; background-color: blue;"></div> diff --git a/testing/web-platform/tests/svg/shapes/rect-03.svg b/testing/web-platform/tests/svg/shapes/rect-03.svg new file mode 100644 index 0000000000..f4b59c91b1 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-03.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="http://www.w3.org/TR/SVG2/shapes.html#RectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="rect-03-ref.html"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rect element with rounded corners renders correctly."/> + </metadata> + <rect x="10" y="10" width="50" height="50" rx="8" ry="8" fill="blue"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-04-ref.html b/testing/web-platform/tests/svg/shapes/rect-04-ref.html new file mode 100644 index 0000000000..f47ba82cb3 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-04-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<!-- + border-radius is 10px since it measures to the outside edge of the border, + as opposed to SVG's rect radius attributes, which measure to the middle + of the stroke +--> +<div style="position: absolute; top: 8px; left: 8px; width: 46px; height: 46px; border-radius: 10px; border: 4px solid blue;"></div> diff --git a/testing/web-platform/tests/svg/shapes/rect-04.svg b/testing/web-platform/tests/svg/shapes/rect-04.svg new file mode 100644 index 0000000000..37c4c9b2ab --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-04.svg @@ -0,0 +1,9 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="author" title="Cameron McCormack" href="mailto:cam@mcc.id.au"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="http://www.w3.org/TR/SVG2/shapes.html#RectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="rect-04-ref.html"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rect element with rounded corners and stroke renders correctly."/> + </metadata> + <rect x="10" y="10" width="50" height="50" rx="8" ry="8" fill="none" stroke="blue" stroke-width="4"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-05-ref.svg b/testing/web-platform/tests/svg/shapes/rect-05-ref.svg new file mode 100644 index 0000000000..1d62e8e2af --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-05-ref.svg @@ -0,0 +1,3 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-05.svg b/testing/web-platform/tests/svg/shapes/rect-05.svg new file mode 100644 index 0000000000..27d01efc64 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-05.svg @@ -0,0 +1,11 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="http://www.w3.org/TR/SVG2/shapes.html#RectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="rect-05-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="width or height 0 disables rendering."/> + </metadata> + <rect x="30" y="50" width="0" height="10" fill="red" stroke="red" stroke-width="4"/> + <rect x="50" y="50" width="10" height="0" fill="red" stroke="red" stroke-width="4"/> + <rect x="70" y="50" width="0" height="0" fill="red" stroke="red" stroke-width="4"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css-expected.svg b/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css-expected.svg new file mode 100644 index 0000000000..2b53158c0a --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css-expected.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <rect width="100" height="100" rx="40" /> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css-ref.svg b/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css-ref.svg new file mode 100644 index 0000000000..2b53158c0a --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css-ref.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <rect width="100" height="100" rx="40" /> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css.svg b/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css.svg new file mode 100644 index 0000000000..375147a7d2 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rect-rx-set-by-css.svg @@ -0,0 +1,9 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> + <metadata> + <link xmlns="http://www.w3.org/1999/xhtml" rel="help" href="http://www.w3.org/TR/SVG/shapes.html#RectElement"/> + <link xmlns="http://www.w3.org/1999/xhtml" rel="match" href="rect-rx-set-by-css-ref.svg"/> + <meta xmlns="http://www.w3.org/1999/xhtml" name="assert" content="rx can be set via CSS."/> + </metadata> + <rect width="100" height="100" style="rx: 40px" /> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/disabled-shapes-01.svg b/testing/web-platform/tests/svg/shapes/reftests/disabled-shapes-01.svg new file mode 100644 index 0000000000..49572fe71e --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/disabled-shapes-01.svg @@ -0,0 +1,61 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Disabled shapes are not rendered</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#RectElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#CircleElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#EllipseElement"/> + <h:link rel="match" href="reference/empty.svg"/> + </metadata> + <g stroke="red" stroke-width="100"> + <g transform="translate(50, 50)"> + <rect/> + <rect width="10"/> + <rect height="10"/> + <rect width="10%"/> + <rect height="10%"/> + <rect width="0" height="10"/> + <rect width="-10" height="10"/> + <rect height="0" width="10"/> + <rect height="-10" width="10"/> + <rect style="width: 0"/> + <rect style="width: 10px"/> + <rect style="width: 10%"/> + <rect style="width: calc(10%+10px)"/> + <rect style="width: 0" height="10"/> + <rect style="width: -10px"/> + <rect style="width: -10px" height="10"/> + <rect style="height: 0"/> + <rect style="height: 10px"/> + <rect style="height: 10%"/> + <rect style="height: calc(10%+10px)"/> + <rect style="height: 0" width="10"/> + <rect style="height: -10px"/> + <rect style="height: -10px" width="10"/> + <rect style="width: calc(-10px); height: calc(-10px)"/> + </g> + + <g transform="translate(150, 50)"> + <circle/> + <circle r="0"/> + <circle r="-10"/> + <circle style="r: 0"/> + <circle style="r: -10px"/> + <circle style="r: calc(-10px)"/> + </g> + + <g transform="translate(250, 50)"> + <ellipse/> + <ellipse rx="0"/> + <ellipse rx="0" ry="10"/> + <ellipse ry="0"/> + <ellipse ry="0" rx="10"/> + <ellipse style="rx: 0"/> + <ellipse style="rx: -10px"/> + <ellipse style="rx: 0" ry="10"/> + <ellipse style="ry: 0"/> + <ellipse style="ry: -10px"/> + <ellipse style="ry: 0" rx="10"/> + <ellipse style="rx: calc(-10px); ry: calc(-10px)"/> + </g> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/pathlength-001-ref.svg b/testing/web-platform/tests/svg/shapes/reftests/pathlength-001-ref.svg new file mode 100644 index 0000000000..0ec9e0353a --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/pathlength-001-ref.svg @@ -0,0 +1,18 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Test of 'pathLength' on shapes.</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + </g> + + <g id="test-reference" style="fill:none;stroke:black;stroke-width:5"> + <path d="m 20,140 200,0 0,200 -200,0 z" style="stroke-dasharray:50" /> + <path d="m 260,140 200,0 0,200 -200,0 z" style="stroke-dasharray:0.25" pathLength="4"/> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/pathlength-001.svg b/testing/web-platform/tests/svg/shapes/reftests/pathlength-001.svg new file mode 100644 index 0000000000..cd60c05239 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/pathlength-001.svg @@ -0,0 +1,21 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Test of 'pathLength' on shapes.</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/shapes.html#RectElement"/> + <html:link rel="match" href="pathlength-001-ref.svg" /> + </g> + + <g id="test-body-content" style="fill:none;stroke:black;stroke-width:5px"> + <rect x="20" y="140" width="200" height="200" style="stroke-dasharray:50"/> + <rect x="260" y="140" width="200" height="200" style="stroke-dasharray:0.25" pathLength="4"/> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/pathlength-002-ref.svg b/testing/web-platform/tests/svg/shapes/reftests/pathlength-002-ref.svg new file mode 100644 index 0000000000..21ec28a244 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/pathlength-002-ref.svg @@ -0,0 +1,18 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Test of 'pathLength' on shapes.</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + </g> + + <g id="test-reference" style="fill:none;stroke:black;stroke-width:5"> + <path d="m 220,240 a 100,100 0 0 1 -200,0 100,100 0 0 1 200,0 z" style="stroke-dasharray:39.27" /> + <path d="m 460,240 a 100,100 0 0 1 -200,0 100,100 0 0 1 200,0 z" style="stroke-dasharray:0.25" pathLength="4"/> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/pathlength-002.svg b/testing/web-platform/tests/svg/shapes/reftests/pathlength-002.svg new file mode 100644 index 0000000000..bdae7e75f2 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/pathlength-002.svg @@ -0,0 +1,21 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Test of 'pathLength' on shapes.</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/shapes.html#CircleElement"/> + <html:link rel="match" href="pathlength-002-ref.svg" /> + </g> + + <g id="test-body-content" style="fill:none;stroke:black;stroke-width:5px"> + <circle cx="120" cy="240" r="100" style="stroke-dasharray:39.27"/> + <circle cx="360" cy="240" r="100" style="stroke-dasharray:0.25" pathLength="4"/> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/pathlength-003-ref.svg b/testing/web-platform/tests/svg/shapes/reftests/pathlength-003-ref.svg new file mode 100644 index 0000000000..8d6f43f9d8 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/pathlength-003-ref.svg @@ -0,0 +1,40 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Test of 'pathLength' on shapes.</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("../fonts/FreeSans.woff") format("woff"); + } + text { + font-family: FreeSans, sans-serif; + text-anchor: middle; + fill: black; + } + #title { + font-size: 24px; + } + .label { + font-size: 18px; + } + </style> + + + <g id="test-reference" style="fill:none;stroke:black;stroke-width:1px"> + <path id="circle1" d="m 220,240 a 100,100 0 0 1 -200,0 100,100 0 0 1 200,0 z"/> + <path id="circle2" d="m 460,240 a 100,100 0 0 1 -200,0 100,100 0 0 1 200,0 z" pathLength="4"/> + <text><textPath xlink:href="#circle1" startOffset="471.8" style="font-size:24px;stroke:none">Some text on a circle!</textPath></text> + <text><textPath xlink:href="#circle2" startOffset="3" style="font-size:24px;stroke:none">Some text on a circle!</textPath></text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/pathlength-003.svg b/testing/web-platform/tests/svg/shapes/reftests/pathlength-003.svg new file mode 100644 index 0000000000..506952f54b --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/pathlength-003.svg @@ -0,0 +1,43 @@ +<svg id="svg-root" + width="100%" height="100%" viewBox="0 0 480 360" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + xmlns:html="http://www.w3.org/1999/xhtml"> + <g id="testmeta"> + <title>Test of 'pathLength' on shapes.</title> + <html:link rel="author" + title="Tavmjong Bah" + href="http://tavmjong.free.fr"/> + <html:link rel="help" + href="https://www.w3.org/TR/SVG2/shapes.html#CircleElement"/> + <html:link rel="match" href="pathlength-003-ref.svg" /> + </g> + + <style id="test-font" type="text/css"> + /* Standard Font (if needed). */ + @font-face { + font-family: FreeSans; + src: url("../fonts/FreeSans.woff") format("woff"); + } + text { + font-family: FreeSans, sans-serif; + text-anchor: middle; + fill: black; + } + #title { + font-size: 24px; + } + .label { + font-size: 18px; + } + </style> + + + <g id="test-body-content" style="fill:none;stroke:black;stroke-width:1px"> + <circle id="circle1" cx="120" cy="240" r="100"/> + <circle id="circle2" cx="360" cy="240" r="100" pathLength="4"/> + <text><textPath xlink:href="#circle1" startOffset="471.8" style="font-size:24px;stroke:none">Some text on a circle!</textPath></text> + <text><textPath xlink:href="#circle2" startOffset="3" style="font-size:24px;stroke:none">Some text on a circle!</textPath></text> + </g> + +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/polygon-with-filtered-marker.html b/testing/web-platform/tests/svg/shapes/reftests/polygon-with-filtered-marker.html new file mode 100644 index 0000000000..def8adc685 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/polygon-with-filtered-marker.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>Filtered <marker> with <clipPath> ancestor on <polygon></title> +<link rel="match" href="../../struct/reftests/reference/green-100x100.html"> +<svg> + <clipPath> + <marker id="m" filter="url(#f)"/> + <filter id="f"/> + </clipPath> + <polygon points="0,0 100,0 100,100 0,100" fill="green" marker-start="url(#m)"/> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/reftests/reference/empty.svg b/testing/web-platform/tests/svg/shapes/reftests/reference/empty.svg new file mode 100644 index 0000000000..0c7be4e2da --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/reftests/reference/empty.svg @@ -0,0 +1 @@ +<svg xmlns="http://www.w3.org/2000/svg"/> diff --git a/testing/web-platform/tests/svg/shapes/rx-ry-not-inherited.svg b/testing/web-platform/tests/svg/shapes/rx-ry-not-inherited.svg new file mode 100644 index 0000000000..ff943e8b5c --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/rx-ry-not-inherited.svg @@ -0,0 +1,30 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <metadata> + <h:link rel="help" href="https://www.w3.org/TR/SVG2/shapes.html#EllipseElement"/> + <h:meta name="assert" content="rx,ry are not inherited by default"/> + </metadata> + <style> + g { + rx: 10px; + ry: 20px; + } + </style> + <g> + <ellipse id="spot" cx="50" cy="50"/> + </g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var spot = document.getElementById('spot'); + assert_equals(getComputedStyle(spot).rx, "auto"); + assert_equals(getComputedStyle(spot).ry, "auto"); + spot.style.rx = 'inherit'; + spot.style.ry = 'inherit'; + assert_equals(getComputedStyle(spot).rx, "10px"); + assert_equals(getComputedStyle(spot).ry, "20px"); + }); + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/scripted/disabled-shapes-not-hit.svg b/testing/web-platform/tests/svg/shapes/scripted/disabled-shapes-not-hit.svg new file mode 100644 index 0000000000..21ea907878 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/scripted/disabled-shapes-not-hit.svg @@ -0,0 +1,69 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Disabled shapes are not rendered and cannot be hit</title> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#RectElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#CircleElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#EllipseElement"/> + </metadata> + <g stroke="red" stroke-width="100"> + <g transform="translate(50, 50)"> + <rect/> + <rect width="0" height="10"/> + <rect width="-10" height="10"/> + <rect height="0" width="10"/> + <rect height="-10" width="10"/> + <rect style="width: 0"/> + <rect style="width: 0" height="10"/> + <rect style="width: -10px"/> + <rect style="width: -10px" height="10"/> + <rect style="height: 0"/> + <rect style="height: 0" width="10"/> + <rect style="height: -10px"/> + <rect style="height: -10px" width="10"/> + <rect style="width: calc(-10px); height: calc(-10px)"/> + </g> + + <g transform="translate(150, 50)"> + <circle/> + <circle r="0"/> + <circle r="-10"/> + <circle style="r: 0"/> + <circle style="r: -10px"/> + <circle style="r: calc(-10px)"/> + </g> + + <g transform="translate(250, 50)"> + <ellipse/> + <ellipse rx="0"/> + <ellipse rx="0" ry="10"/> + <ellipse ry="0"/> + <ellipse ry="0" rx="10"/> + <ellipse style="rx: 0"/> + <ellipse style="rx: -10px"/> + <ellipse style="rx: 0" ry="10"/> + <ellipse style="ry: 0"/> + <ellipse style="ry: -10px"/> + <ellipse style="ry: 0" rx="10"/> + <ellipse style="rx: calc(-10px); ry: calc(-10px)"/> + </g> + </g> + <script><![CDATA[ + test(function() { + let element = document.elementFromPoint(50, 50); + assert_equals(element, document.documentElement, "does not hit one of the shapes"); + }, document.title + ": <rect>"); + + test(function() { + let element = document.elementFromPoint(150, 50); + assert_equals(element, document.documentElement, "does not hit one of the shapes"); + }, document.title + ": <circle>"); + + test(function() { + let element = document.elementFromPoint(250, 50); + assert_equals(element, document.documentElement, "does not hit one of the shapes"); + }, document.title + ": <ellipse>"); + ]]> + </script> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/scripted/shapes-clip-path.svg b/testing/web-platform/tests/svg/shapes/scripted/shapes-clip-path.svg new file mode 100644 index 0000000000..a8277226a5 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/scripted/shapes-clip-path.svg @@ -0,0 +1,78 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Clipped shapes can be hit when rendered</title> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#RectElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#CircleElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#EllipseElement"/> + </metadata> + <defs> + <clipPath id="clip1"> + <circle cx="100" cy="100" r="25"/> + </clipPath> + <clipPath id="clip2"> + <circle cx="150" cy="150" r="25"/> + </clipPath> + <clipPath id="clip3"> + <circle cx="250" cy="150" r="25"/> + </clipPath> + <clipPath id="clip4"> + <circle cx="350" cy="150" r="25"/> + </clipPath> + </defs> + <g> + <circle id="circle1" cx="100" cy="100" r="25"/> + <circle id="circle2" cx="150" cy="100" r="25" clip-path="url(#unknown)"/> + <circle id="circle3" cx="100" cy="150" r="25" clip-path="url(#clip1)"/> + <circle id="circle4" cx="150" cy="150" r="25" clip-path="url(#clip2)"/> + </g> + <g> + <ellipse id="ellipse1" cx="200" cy="100" rx="25" ry="15"/> + <ellipse id="ellipse2" cx="250" cy="100" rx="25" ry="15" clip-path="url(#unknown)"/> + <ellipse id="ellipse3" cx="200" cy="150" rx="25" ry="15" clip-path="url(#clip1)"/> + <ellipse id="ellipse4" cx="250" cy="150" rx="25" ry="15" clip-path="url(#clip3)"/> + </g> + <g> + <rect id="rect1" x="285" y="85" width="30" height="30"/> + <rect id="rect2" x="335" y="85" width="30" height="30" clip-path="url(#unknown)"/> + <rect id="rect3" x="285" y="135" width="30" height="30" clip-path="url(#clip1)"/> + <rect id="rect4" x="335" y="135" width="30" height="30" clip-path="url(#clip4)"/> + </g> + <script><![CDATA[ + class Expectation { + constructor(x, y, id = null) { + this.x = x; + this.y = y; + this.element = id ? document.getElementById(id) : document.documentElement; + } + } + class Shape { + constructor(name, offset) { + this.name = name; + this.offset = offset; + } + } + let shapes = []; + shapes.push(new Shape("circle", 0)); + shapes.push(new Shape("ellipse", 100)); + shapes.push(new Shape("rect", 200)); + + shapes.forEach(shape => { + test(function() { + let expectations = []; + + expectations.push(new Expectation(100 + shape.offset, 100, shape.name + "1")); + expectations.push(new Expectation(150 + shape.offset, 100, shape.name + "2")); + expectations.push(new Expectation(100 + shape.offset, 150)); + expectations.push(new Expectation(150 + shape.offset, 150, shape.name + "4")); + + expectations.forEach(expectation => { + let element = document.elementFromPoint(expectation.x, expectation.y); + assert_equals(element, expectation.element, "finds " + shape.name); + }); + }, document.title + ": " + shape.name); + }); + ]]> + </script> +</svg> diff --git a/testing/web-platform/tests/svg/shapes/scripted/stroke-dashes-hit-at-high-scale.svg b/testing/web-platform/tests/svg/shapes/scripted/stroke-dashes-hit-at-high-scale.svg new file mode 100644 index 0000000000..b57a9e0aa7 --- /dev/null +++ b/testing/web-platform/tests/svg/shapes/scripted/stroke-dashes-hit-at-high-scale.svg @@ -0,0 +1,27 @@ +<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml" viewBox="0 0 36 36" width="600" height="600"> + <title>Strokes w/dashes are properly hit-tested, even at large scale factors</title> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/shapes.html#CircleElement"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#StrokeProperties"/> + </metadata> + <circle id="circle" cx="6" cy="10" r="5" stroke="blue" stroke-width="1" stroke-dasharray="10 21.4159" fill="none"/> + <script> + <![CDATA[ + test(function() { + let svg = document.getElementById("svg"); + let circle = document.getElementById("circle"); + let hitTest = function(x, y) { + return document.elementFromPoint( + x * svg.width.baseVal.value / svg.viewBox.baseVal.width, + y * svg.height.baseVal.value / svg.viewBox.baseVal.height); + } + assert_equals(hitTest(11, 10), circle, "hit-test the beginning of the dash (t=0)"); + assert_equals(hitTest(8.70, 14.21), circle, "hit-test the middle of the dash (t=5)"); + assert_equals(hitTest(4.10, 14.63), circle, "hit-test the end of the dash (t=9.8)"); + assert_equals(hitTest(3.74, 14.46), svg, "hit-test past the end of the dash (t=10.2)"); + }); + ]]> + </script> +</svg> |
