diff options
Diffstat (limited to 'testing/web-platform/tests/svg/linking')
46 files changed, 1260 insertions, 0 deletions
diff --git a/testing/web-platform/tests/svg/linking/reftests/href-a-element-attr-change.html b/testing/web-platform/tests/svg/linking/reftests/href-a-element-attr-change.html new file mode 100644 index 0000000000..c74b2e0156 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-a-element-attr-change.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>href - a element</title> +<meta name="assert" + content="The a element should keep its link status after removing href if there is still xlink:href"> +<link rel="match" href="href-a-element-ref.html"> +<style> +a:link rect { + fill: lime; +} +</style> +<body> + <svg width="100" height="100" viewBox="0 0 100 100" + xmlns:xlink="http://www.w3.org/1999/xlink" onload="loaded();"> + <a id="link" href="abc.html" xlink:href="def.html"> + <rect width="100%" height="100%" fill="red"/> + </a> + </svg> +</body> +<script> + function loaded() { + document.getElementById('link').removeAttribute('href'); + requestAnimationFrame(function() { + document.documentElement.classList.remove("reftest-wait"); + }); + } +</script> +</html> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-a-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-a-element-ref.html new file mode 100644 index 0000000000..0c67c98b02 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-a-element-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - a element reference</title> +<body> + <svg width="100" height="100" viewBox="0 0 100 100"> + <rect width="100%" height="100%" fill="lime"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-feImage-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-feImage-element-ref.html new file mode 100644 index 0000000000..cb3758dfa7 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-feImage-element-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - feImage element reference</title> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <filter id="Fitted" primitiveUnits="objectBoundingBox"> + <feImage xlink:href="/images/rgrg-256x256.png" + x="0" y="0" width="100%" height="100%" + preserveAspectRatio="none"/> + </filter> + <rect x="20" y="25" width="100" height="110" filter="url(#Fitted)"/> + <rect x="20" y="25" width="100" height="110" fill="none" stroke="green"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-feImage-element.html b/testing/web-platform/tests/svg/linking/reftests/href-feImage-element.html new file mode 100644 index 0000000000..efdbe63a1f --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-feImage-element.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - feImage element</title> +<meta name="assert" content="The feImage element should accept href"> +<link rel="match" href="href-feImage-element-ref.html"> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <filter id="Fitted" primitiveUnits="objectBoundingBox"> + <feImage href="/images/rgrg-256x256.png" + xlink:href="/images/grgr-256x256.png" + x="0" y="0" width="100%" height="100%" + preserveAspectRatio="none"/> + </filter> + <rect x="20" y="25" width="100" height="110" filter="url(#Fitted)"/> + <rect x="20" y="25" width="100" height="110" fill="none" stroke="green"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-filter-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-filter-element-ref.html new file mode 100644 index 0000000000..9b009e31d1 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-filter-element-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - filter element reference</title> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <filter id="blurMe"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + <circle cx="60" cy="60" r="50" fill="green" filter="url(#blurMe)" /> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-filter-element.html b/testing/web-platform/tests/svg/linking/reftests/href-filter-element.html new file mode 100644 index 0000000000..3f718d0c55 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-filter-element.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - filter element</title> +<meta name="assert" content="The filter element should accept href"> +<link rel="match" href="href-filter-element-ref.html"> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <filter id="blurMe"> + <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> + </filter> + <filter id="dropShadow"> + <feGaussianBlur in="SourceAlpha" stdDeviation="3" /> + <feOffset dx="2" dy="4" /> + <feMerge> + <feMergeNode /> + <feMergeNode in="SourceGraphic" /> + </feMerge> + </filter> + <filter id="Copied" href="#blurMe" xlink:href="#dropShadow"> + </filter> + <circle cx="60" cy="60" r="50" fill="green" filter="url(#Copied)"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-gradient-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-gradient-element-ref.html new file mode 100644 index 0000000000..279be683df --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-gradient-element-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - gradient element reference</title> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="green"/> + <stop offset="95%" stop-color="gold"/> + </linearGradient> + <rect fill="url(#MyGradient)" stroke="black" x="0" y="0" + width="100" height="100"/> + + <radialGradient id="MyRadialGradient"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <rect x="110" y="0" rx="15" ry="15" width="100" height="100" + fill="url(#MyRadialGradient)"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-gradient-element.html b/testing/web-platform/tests/svg/linking/reftests/href-gradient-element.html new file mode 100644 index 0000000000..2442b6f3d4 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-gradient-element.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - gradient element</title> +<meta name="assert" content="The gradient element should accept href"> +<link rel="match" href="href-gradient-element-ref.html"> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <linearGradient id="MyGradient"> + <stop offset="5%" stop-color="green"/> + <stop offset="95%" stop-color="gold"/> + </linearGradient> + <linearGradient id="MyGradient2"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="CopiedGradient" href="#MyGradient" + xlink:href="#MyGradient2"> + </linearGradient> + <rect fill="url(#CopiedGradient)" stroke="black" x="0" y="0" + width="100" height="100"/> + + <radialGradient id="MyRadialGradient"> + <stop offset="0%" stop-color="red"/> + <stop offset="100%" stop-color="blue"/> + </radialGradient> + <radialGradient id="CopiedRadialGradient" href="#MyRadialGradient"/> + <rect x="110" y="0" rx="15" ry="15" width="100" height="100" + fill="url(#CopiedRadialGradient)"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-image-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-image-element-ref.html new file mode 100644 index 0000000000..c51906fdec --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-image-element-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - image element reference</title> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image xlink:href="/images/green.png" width="100px" height="100px"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-image-element.html b/testing/web-platform/tests/svg/linking/reftests/href-image-element.html new file mode 100644 index 0000000000..779e33f620 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-image-element.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - image element</title> +<meta name="assert" content="The image should accept href"> +<link rel="match" href="href-image-element-ref.html"> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <image href="/images/green.png" xlink:href="/images/red.png" + width="100px" height="100px"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-pattern-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-pattern-element-ref.html new file mode 100644 index 0000000000..bd8770c974 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-pattern-element-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - pattern element reference</title> +<body> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="25" height="25" fill="skyblue"/> + <circle cx="25" cy="25" r="20" fill="green" fill-opacity="0.5"/> + </pattern> + <rect fill="url(#Pattern)" stroke="black" x="0" y="0" + width="200" height="200"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-pattern-element.html b/testing/web-platform/tests/svg/linking/reftests/href-pattern-element.html new file mode 100644 index 0000000000..89aa243152 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-pattern-element.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - pattern element</title> +<meta name="assert" content="The pattern element should accept href"> +<link rel="match" href="href-pattern-element-ref.html"> +<body> + <svg width="300" height="300" viewBox="0 0 300 300"> + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="25" height="25" fill="skyblue"/> + <circle cx="25" cy="25" r="20" fill="green" fill-opacity="0.5"/> + </pattern> + <pattern id="Pattern2" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="25" height="25" fill="skyblue"/> + <circle cx="25" cy="25" r="20" fill="red" fill-opacity="0.5"/> + </pattern> + <pattern id="CopiedPattern" href="#Pattern" xlink:href="#Pattern2"> + </pattern> + <rect fill="url(#CopiedPattern)" stroke="black" x="0" y="0" + width="200" height="200"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-textPath-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-textPath-element-ref.html new file mode 100644 index 0000000000..4e1fd3531d --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-textPath-element-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - textPath element reference</title> +<body> + <svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <path id="MyPath" + d="M 100 200 + C 200 100 300 0 400 100 + C 500 200 600 300 700 200 + C 800 100 900 100 900 100" /> + </defs> + <text font-family="Verdana" font-size="40"> + <textPath xlink:href="#MyPath"> + We go up, then we go down, then up again + </textPath> + </text> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-textPath-element.html b/testing/web-platform/tests/svg/linking/reftests/href-textPath-element.html new file mode 100644 index 0000000000..b31e92224a --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-textPath-element.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - textPath element</title> +<meta name="assert" content="The textPath element should accept href"> +<link rel="match" href="href-textPath-element-ref.html"> +<body> + <svg width="100%" height="100%" viewBox="0 0 1000 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <path id="MyPath" + d="M 100 200 + C 200 100 300 0 400 100 + C 500 200 600 300 700 200 + C 800 100 900 100 900 100" /> + <path id="MyPath2" d="M 100 100 L 900 100" /> + </defs> + <text font-family="Verdana" font-size="40"> + <textPath href="#MyPath" xlink:href="#MyPath2"> + We go up, then we go down, then up again + </textPath> + </text> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-use-element-ref.html b/testing/web-platform/tests/svg/linking/reftests/href-use-element-ref.html new file mode 100644 index 0000000000..93577b7643 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-use-element-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - use element reference</title> +<body> + <svg style="display: none"> + <rect id='refRect' style="fill: red" width="100" height="100" /> + </svg> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use xlink:href="#refRect"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/href-use-element.html b/testing/web-platform/tests/svg/linking/reftests/href-use-element.html new file mode 100644 index 0000000000..e6b37f29e5 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-use-element.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>href - use element</title> +<meta name="assert" content="The use element should accept href"> +<link rel="match" href="href-use-element-ref.html"> +<body> + <svg style="display: none"> + <circle id="refCircle" style="fill: orange" cx="50px" cy="50px" r="50px" /> + <rect id='refRect' style="fill: red" width="100" height="100" /> + </svg> + <svg width="300" height="300" viewBox="0 0 300 300" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <use href="#refRect" xlink:href="#refCircle"/> + </svg> +</body> diff --git a/testing/web-platform/tests/svg/linking/reftests/reference/green-100x100.svg b/testing/web-platform/tests/svg/linking/reftests/reference/green-100x100.svg new file mode 100644 index 0000000000..120941444a --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/reference/green-100x100.svg @@ -0,0 +1,3 @@ +<svg xmlns="http://www.w3.org/2000/svg"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/url-processing-invalid-base.svg b/testing/web-platform/tests/svg/linking/reftests/url-processing-invalid-base.svg new file mode 100644 index 0000000000..fc5d7c6b06 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/url-processing-invalid-base.svg @@ -0,0 +1,15 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <title>An invalid base URL makes all internal references invalid</title> + <html:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#processingURL"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#SpecifyingPaint"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#PaintServerTemplates"/> + <html:link rel="match" href="reference/green-100x100.svg"/> + <html:base href="invalid:"/> + <linearGradient id="p2"> + <stop stop-color="orange"/> + </linearGradient> + <linearGradient id="p" href="#p2"/> + <rect width="100" height="100" fill="red"/> + <rect width="100" height="100" fill="url(#p) green"/> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-001.svg b/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-001.svg new file mode 100644 index 0000000000..6baa0fdd84 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-001.svg @@ -0,0 +1,17 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <title>Leading and trailing whitespace is stripped from (local) URL references (<paint>)</title> + <html:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#processingURL"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/painting.html#SpecifyingPaint"/> + <html:link rel="match" href="reference/green-100x100.svg"/> + <linearGradient id="green"> + <stop stop-color="green"/> + </linearGradient> + <linearGradient id="red"> + <stop stop-color="red"/> + </linearGradient> + <rect width="50" height="50" fill="url(' #green') red"/> + <rect width="50" height="50" fill="url('#green ') red" x="50"/> + <rect width="50" height="50" fill="url(' #green ') red" y="50"/> + <rect width="50" height="50" fill="url(' # red ') green" y="50" x="50"/> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-002.svg b/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-002.svg new file mode 100644 index 0000000000..ee4969a532 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-002.svg @@ -0,0 +1,19 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <title>Leading and trailing whitespace is stripped from (local) URL references (<use> href)</title> + <html:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#processingURL"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElementHrefAttribute"/> + <html:link rel="match" href="reference/green-100x100.svg"/> + <defs> + <rect id="green" width="50" height="50" fill="green"/> + <rect id="red" width="50" height="50" fill="red"/> + </defs> + <rect width="100" height="100" fill="red"/> + <use href=" #green"/> + <use href="#green " x="50"/> + <use href=" #green " y="50"/> + <g transform="translate(50 50)"> + <rect id="green" width="50" height="50" fill="green"/> + <use href=" # red "/> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-003.svg b/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-003.svg new file mode 100644 index 0000000000..1dabd9f8f9 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/url-processing-whitespace-003.svg @@ -0,0 +1,24 @@ +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:html="http://www.w3.org/1999/xhtml"> + <title>Leading and trailing whitespace is stripped from (local) URL references (<linearGradient> href)</title> + <html:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#processingURL"/> + <html:link rel="help" href="https://svgwg.org/svg2-draft/pservers.html#PaintServerTemplates"/> + <html:link rel="match" href="reference/green-100x100.svg"/> + <linearGradient id="green"> + <stop stop-color="green"/> + </linearGradient> + <linearGradient id="red"> + <stop stop-color="red"/> + </linearGradient> + <linearGradient id="g1" href=" #green"/> + <linearGradient id="g2" href="#green "/> + <linearGradient id="g3" href=" #green "/> + <linearGradient id="g4" href=" # red "> + <stop stop-color="green"/> + </linearGradient> + <rect width="100" height="100" fill="red"/> + <rect width="50" height="50" fill="url(#g1) red"/> + <rect width="50" height="50" fill="url(#g2) red" x="50"/> + <rect width="50" height="50" fill="url(#g3) red" y="50"/> + <rect width="50" height="50" fill="url(#g4) red" y="50" x="50"/> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/url-reference-local-textpath.svg b/testing/web-platform/tests/svg/linking/reftests/url-reference-local-textpath.svg new file mode 100644 index 0000000000..c90cfb317f --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/url-reference-local-textpath.svg @@ -0,0 +1,10 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Local URL reference on <textPath> with base URL different from document URL</title> + <h:link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#linkRefAttrs"/> + <h:link rel="match" href="reference/green-100x100.svg"/> + <h:base href="http://www.example.com/"/> + + <path id="path" d="M0,80h100"/> + <text font-size="100" font-family="Ahem" fill="green"><textPath href="#path">X</textPath></text> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-001.html b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-001.html new file mode 100644 index 0000000000..5619e0ba69 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-001.html @@ -0,0 +1,28 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test: use element doesn't cross shadow tree boundaries in selector-matching</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement"> +<link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> +<style> +#test rect { + stroke: red; + stroke-width: 10px; +} +</style> +<p> + You should see a green square, and no red. +</p> +<svg + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="square"> + <rect width="100" height="100"/> + </g> + </defs> + <g id="test"> + <use xlink:href="#square" fill="green" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-002.html b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-002.html new file mode 100644 index 0000000000..643f20d16d --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-002.html @@ -0,0 +1,33 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test: use element doesn't cross shadow tree boundaries in selector-matching</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement"> +<link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> +<style> +#test rect { + stroke: red; + stroke-width: 10px; +} +.inside-use rect { + fill: green; +} +</style> +<p> + You should see a green square, and no red. +</p> +<svg + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <g id="square"> + <g class="inside-use"> + <rect width="100" height="100"/> + </g> + </g> + </defs> + <g id="test"> + <use xlink:href="#square" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-003.html b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-003.html new file mode 100644 index 0000000000..14bf5bd122 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-003.html @@ -0,0 +1,37 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test: use element doesn't cross shadow tree boundaries in selector-matching, and is invalidated properly</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement"> +<link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> +<style> +#test rect { + stroke: red; + stroke-width: 10px; +} +.inside-use rect { + fill: red; +} +defs .inside-use rect { + fill: red; +} +</style> +<p> + You should see a green square, and no red. +</p> +<svg> + <defs> + <g id="square"> + <g class="inside-use"> + <rect width="100" height="100"/> + </g> + </g> + </defs> + <g id="test"> + <use href="#square" /> + </g> +</svg> +<script> + document.body.offsetTop; + document.styleSheets[0].cssRules[1].style.fill = 'green'; +</script> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-ref.html b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-ref.html new file mode 100644 index 0000000000..dae3fc1173 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-descendant-combinator-ref.html @@ -0,0 +1,12 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test reference</title> +<p> + You should see a green square, and no red. +</p> +<svg + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <rect width="100" height="100" fill="green"/> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-hidden-attr-change.html b/testing/web-platform/tests/svg/linking/reftests/use-hidden-attr-change.html new file mode 100644 index 0000000000..4fe535bbac --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-hidden-attr-change.html @@ -0,0 +1,32 @@ +<!doctype html> +<meta charset=utf-8> +<title>use element reacts to attribute changes when it's not rendered</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1502658"> +<link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> +<style> +</style> +<p> + You should see a green square, and no red. +</p> +<svg + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" + style="display: none"> + <defs> + <g id="square"> + <rect width="100" height="100" fill="green" /> + </g> + </defs> + <g id="test"> + <use /> + </g> +</svg> +<script> + onload = () => { + document.querySelector("use").setAttributeNS("http://www.w3.org/1999/xlink", "href", "#square"); + document.querySelector("svg").style.display = ""; + } +</script> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-keyframes-ref.html b/testing/web-platform/tests/svg/linking/reftests/use-keyframes-ref.html new file mode 100644 index 0000000000..7d96781805 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-keyframes-ref.html @@ -0,0 +1,6 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<svg width="100" height="100" viewBox="0 0 100 100"> + <rect width="100%" height="100%" fill="lime" /> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-keyframes.html b/testing/web-platform/tests/svg/linking/reftests/use-keyframes.html new file mode 100644 index 0000000000..2ae24138f2 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-keyframes.html @@ -0,0 +1,19 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Keyframe animations from the document match in use elements</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1513920"> +<link rel="match" href="use-keyframes-ref.html"> +<style> +@keyframes animationname { + from { fill: lime; } + to { fill: lime; } +} +</style> +<svg width="100" height="100" viewBox="0 0 100 100"> + <symbol id="symbol"> + <rect width="100%" height="100%" fill="red" style="animation: animationname 1s infinite;" /> + </symbol> + <use href="#symbol" /> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-nested-symbol-001.html b/testing/web-platform/tests/svg/linking/reftests/use-nested-symbol-001.html new file mode 100644 index 0000000000..7008a2512a --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-nested-symbol-001.html @@ -0,0 +1,26 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test: symbol doesn't improperly render in svg use shadow tree</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1547619"> +<link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> +<p> + You should see a green square, and no red. +</p> +<svg + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <symbol id="square"> + <rect width="100" height="100"/> + <symbol> + <rect width="100" height="100" fill="red" /> + </symbol> + </symbol> + </defs> + <g id="test"> + <use xlink:href="#square" fill="green" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/linking/reftests/use-symbol-rendered-001.html b/testing/web-platform/tests/svg/linking/reftests/use-symbol-rendered-001.html new file mode 100644 index 0000000000..b3ca3a321a --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/use-symbol-rendered-001.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test: symbol referenced in a use shadow tree should actually be a symbol</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="help" href="https://svgwg.org/svg2-draft/struct.html#SymbolNotes"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1547619"> +<link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> +<p> + You should see a green square, and no red. +</p> +<style> +rect { + fill: red; +} +symbol rect { + fill: green; +} +</style> +<svg + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink"> + <defs> + <symbol id="square"> + <rect width="100" height="100"/> + </symbol> + </defs> + <g id="test"> + <use xlink:href="#square" fill="green" /> + </g> +</svg> diff --git a/testing/web-platform/tests/svg/linking/scripted/a-download-click.svg b/testing/web-platform/tests/svg/linking/scripted/a-download-click.svg new file mode 100644 index 0000000000..b728603d54 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/a-download-click.svg @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Clicking on an <a> element with a download attribute must not throw an exception</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> + </metadata> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + "use strict"; + async_test(t => { + const frame = document.createElementNS("http://www.w3.org/1999/xhtml", "iframe"); + const root = document.querySelector("svg"); + + frame.addEventListener("load", t.step_func(function () { + frame.contentWindow.addEventListener( + "beforeunload", t.unreached_func("Navigated instead of downloading")); + const string = "test"; + const blob = new Blob([string], { type: "text/html" }); + + const link = frame.contentDocument.querySelector("#blob-url"); + link.href.baseVal = URL.createObjectURL(blob); + + link.dispatchEvent(new Event('click')); + + t.step_timeout(() => t.done(), 1000); + })); + frame.src = "resources/a-download-click.svg"; + root.appendChild(frame); + }, "Clicking on an <a> element with a download attribute must not throw an exception"); + ]]></script> +</svg> diff --git a/testing/web-platform/tests/svg/linking/scripted/a.rel-getter-01.svg b/testing/web-platform/tests/svg/linking/scripted/a.rel-getter-01.svg new file mode 100644 index 0000000000..f4f1fdb4f3 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/a.rel-getter-01.svg @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>SVGAElement.rel getter</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> + </metadata> + <a id="test" href="a" rel="noreferrer"></a> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var a = document.getElementById("test"); + + test(function() { + assert_equals(a.rel, "noreferrer"); + }, "Test anchor's rel getter"); + }); + ]]></script> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/linking/scripted/a.rel-setter-01.svg b/testing/web-platform/tests/svg/linking/scripted/a.rel-setter-01.svg new file mode 100644 index 0000000000..55470a81b5 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/a.rel-setter-01.svg @@ -0,0 +1,21 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>SVGAElement.rel setter</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> + </metadata> + <a id="test" href="a"></a> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var a = document.getElementById("test"); + + test(function() { + a.rel = "noreferrer" + assert_equals(a.rel, "noreferrer"); + }, "Test anchor's rel setter"); + }); + ]]></script> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/linking/scripted/a.text-getter-01.svg b/testing/web-platform/tests/svg/linking/scripted/a.text-getter-01.svg new file mode 100644 index 0000000000..d0b26f2042 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/a.text-getter-01.svg @@ -0,0 +1,37 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>SVGAElement.text getting</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> + </metadata> + <script>var b</script> + <g id="test"> + <a href="a">a b c </a> + <a href="b">a <!--b-->b c </a> + <a href="c">a <b>b</b> c </a> + <a href="d">a <script>b</script> c </a> + <script><![CDATA[ + var e = document.getElementById("test") + .appendChild(document.createElementNS("http://www.w3.org/2000/svg","a")); + e.href.baseVal = "d"; + e.appendChild(document.createTextNode("a ")); + e.appendChild(document.createTextNode("b ")); + e.appendChild(document.createTextNode("c ")); + ]]></script> + </g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var list = document.getElementById("test") + .getElementsByTagName("a"); + for (var i = 0, il = list.length; i < il; ++i) { + test(function() { + assert_equals(list[i].text, list[i].textContent); + assert_equals(list[i].text, "a b c "); + }, "Test for anchor " + i); + } + }); + ]]></script> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/linking/scripted/a.text-setter-01.svg b/testing/web-platform/tests/svg/linking/scripted/a.text-setter-01.svg new file mode 100644 index 0000000000..53ad8fce9a --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/a.text-setter-01.svg @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>SVGAElement.text setting</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> + </metadata> + <g id="test"> + <a href="a">a b c</a> + <a href="b">a <!--b--> c</a> + <a href="c">a <b>b</b> c</a> + <script><![CDATA[ + var d = document.getElementById("test") + .appendChild(document.createElementNS("http://www.w3.org/2000/svg","a")); + d.href.baseVal = "d"; + d.appendChild(document.createTextNode("a ")); + d.appendChild(document.createTextNode("b ")); + d.appendChild(document.createTextNode("c ")); + ]]></script> + </g> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + test(function() { + var list = document.getElementById("test") + .getElementsByTagName("a"); + for (var i = 0, il = list.length; i < il; ++i) { + test(function() { + list[i].text = "x"; + assert_equals(list[i].text, "x"); + assert_equals(list[i].textContent, "x"); + assert_equals(list[i].firstChild.data, "x"); + assert_equals(list[i].childNodes.length, 1); + + list[i].textContent = "y"; + assert_equals(list[i].text, "y"); + assert_equals(list[i].textContent, "y"); + assert_equals(list[i].firstChild.data, "y"); + assert_equals(list[i].childNodes.length, 1); + }, "Test for anchor " + i); + } + }); + ]]></script> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/linking/scripted/href-animate-element.html b/testing/web-platform/tests/svg/linking/scripted/href-animate-element.html new file mode 100644 index 0000000000..f0b99209a8 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/href-animate-element.html @@ -0,0 +1,138 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Href - animate element tests</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='testcommon.js'></script> +<body> +<div id='log'></div> +<svg id='svg' width='100' height='100' viewBox='0 0 100 100'></svg> +<script> +'use strict'; + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var rect1 = createSVGElement(t, 'rect', svg, + { 'width': '10px', + 'height': '10px', + 'id': 'rect1' }); + var rect2 = createSVGElement(t, 'rect', svg, + { 'width': '10px', + 'height': '10px', + 'id': 'rect2' }); + var animate = createSVGElement(t, 'animate', svg, + { 'attributeName': 'x', + 'from': '0', + 'to': '100', + 'dur': '10s' }); + animate.setAttribute('href', '#rect1'); + animate.setAttributeNS(XLINKNS, 'xlink:href', '#rect2'); + assert_equals(animate.targetElement, rect1); + + return waitEvent(animate, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(5); + assert_equals(rect1.x.animVal.value, 50); + assert_equals(rect2.x.animVal.value, 0); + }); +}, 'Test for animate element when setting both href and xlink:href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var rect1 = createSVGElement(t, 'rect', svg, + { 'width': '10px', + 'height': '10px', + 'id': 'rect1' }); + var rect2 = createSVGElement(t, 'rect', svg, + { 'width': '10px', + 'height': '10px', + 'id': 'rect2' }); + var transform = createSVGElement(t, 'animateTransform', svg, + { 'attributeName': 'transform', + 'type': 'translate', + 'from': '0', + 'to': '100', + 'dur': '10s' }); + + transform.setAttribute('href', '#rect1'); + transform.setAttributeNS(XLINKNS, 'xlink:href', '#rect2'); + assert_equals(transform.targetElement, rect1); + + return waitEvent(transform, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(5); + assert_equals(rect1.getCTM().e, 50); + assert_equals(rect2.getCTM().e, 0); + }); +}, 'Test for animateTransform element when setting both href and xlink:href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var circle1 = createSVGElement(t, 'circle', svg, + { 'cx': '50', + 'cy': '50', + 'r': '40', + 'id': 'circle1' }); + var circle2 = createSVGElement(t, 'circle', svg, + { 'cx': '50', + 'cy': '50', + 'r': '40', + 'id': 'circle2' }); + var animate = createSVGElement(t, 'animate', svg, + { 'attributeName': 'cx', + 'from': '50', + 'to': '150', + 'dur': '10s' }); + animate.setAttribute('href', '#circle1'); + animate.setAttributeNS(XLINKNS, 'xlink:href', '#circle2'); + assert_equals(animate.targetElement, circle1); + + return waitEvent(animate, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(5); + assert_equals(circle1.cx.animVal.value, 100); + assert_equals(circle2.cx.animVal.value, 50); + + animate.removeAttribute('href'); + assert_equals(animate.targetElement, circle2); + assert_equals(circle1.cx.animVal.value, 50); + assert_equals(circle2.cx.animVal.value, 100); + }); +}, 'Test for animate element when removing href but we still have xlink:href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var circle1 = createSVGElement(t, 'circle', svg, + { 'cx': '50', + 'cy': '50', + 'r': '40', + 'id': 'circle1' }); + var circle2 = createSVGElement(t, 'circle', svg, + { 'cx': '50', + 'cy': '50', + 'r': '40', + 'id': 'circle2' }); + var animate = createSVGElement(t, 'animate', svg, + { 'attributeName': 'cx', + 'from': '50', + 'to': '150', + 'dur': '10s' }); + animate.setAttribute('href', '#circle1'); + animate.setAttributeNS(XLINKNS, 'xlink:href', '#circle2'); + assert_equals(animate.targetElement, circle1); + + return waitEvent(animate, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(5); + assert_equals(circle1.cx.animVal.value, 100); + assert_equals(circle2.cx.animVal.value, 50); + + animate.removeAttributeNS(XLINKNS, 'href'); + assert_equals(animate.targetElement, circle1); + assert_equals(circle1.cx.animVal.value, 100); + assert_equals(circle2.cx.animVal.value, 50); + }); +}, 'Test for animate element when removing xlink:href but we still have href'); + +</script> +</body> diff --git a/testing/web-platform/tests/svg/linking/scripted/href-mpath-element.html b/testing/web-platform/tests/svg/linking/scripted/href-mpath-element.html new file mode 100644 index 0000000000..8fb9f0f1ae --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/href-mpath-element.html @@ -0,0 +1,103 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Href - mpath element tests</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='testcommon.js'></script> +<body> +<div id='log'></div> +<svg id='svg' width='100' height='100' viewBox='0 0 100 100'></svg> +<script> +'use strict'; + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var path1 = createSVGElement(t, 'path', svg, + { 'id': 'MyPath1', 'd': 'M 0,0 L 100,0' }); + var path2 = createSVGElement(t, 'path', svg, + { 'id': 'MyPath2', 'd': 'M 0,0 L 0,100' }); + var rect = createSVGElement(t, 'rect', svg, + { 'width': '10px', 'height': '10px' }); + var animateMotion = createSVGElement(t, 'animateMotion', rect, + { 'dur': '10s' }); + var mpath = createSVGElement(t, 'mpath', animateMotion); + mpath.setAttribute('href', '#MyPath1'); + mpath.setAttributeNS(XLINKNS, 'xlink:href', '#MyPath2'); + assert_equals(mpath.href.baseVal, '#MyPath1'); + + return waitEvent(animateMotion, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(1); + var ctm = rect.getCTM(); + assert_equals(ctm.e, 10); + assert_equals(ctm.f, 0); + + svg.setCurrentTime(5); + ctm = rect.getCTM(); + assert_equals(ctm.e, 50); + assert_equals(ctm.f, 0); + }); +}, 'Test for mpath when setting both href and xlink:href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var path1 = createSVGElement(t, 'path', svg, + { 'id': 'MyPath1', 'd': 'M 0,0 L 100,0' }); + var path2 = createSVGElement(t, 'path', svg, + { 'id': 'MyPath2', 'd': 'M 0,0 L 0,100' }); + var rect = createSVGElement(t, 'rect', svg, + { 'width': '10px', 'height': '10px' }); + var animateMotion = createSVGElement(t, 'animateMotion', rect, + { 'dur': '10s' }); + var mpath = createSVGElement(t, 'mpath', animateMotion); + mpath.setAttribute('href', '#MyPath1'); + mpath.setAttributeNS(XLINKNS, 'xlink:href', '#MyPath2'); + + return waitEvent(animateMotion, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(5); + var ctm = rect.getCTM(); + assert_equals(ctm.e, 50); + assert_equals(ctm.f, 0); + + mpath.removeAttribute('href'); + assert_equals(mpath.href.baseVal, '#MyPath2'); + + ctm = rect.getCTM(); + assert_equals(ctm.e, 0); + assert_equals(ctm.f, 50); + }); +}, 'Test for mpath when removing href but we still have xlink:href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var path1 = createSVGElement(t, 'path', svg, + { 'id': 'MyPath1', 'd': 'M 0,0 L 100,0' }); + var path2 = createSVGElement(t, 'path', svg, + { 'id': 'MyPath2', 'd': 'M 0,0 L 0,100' }); + var rect = createSVGElement(t, 'rect', svg, + { 'width': '10px', 'height': '10px' }); + var animateMotion = createSVGElement(t, 'animateMotion', rect, + { 'dur': '10s' }); + var mpath = createSVGElement(t, 'mpath', animateMotion); + mpath.setAttribute('href', '#MyPath1'); + mpath.setAttributeNS(XLINKNS, 'xlink:href', '#MyPath2'); + + return waitEvent(animateMotion, 'begin').then(function() { + svg.pauseAnimations(); + svg.setCurrentTime(5); + var ctm = rect.getCTM(); + assert_equals(ctm.e, 50); + assert_equals(ctm.f, 0); + + mpath.removeAttributeNS(XLINKNS, 'href'); + assert_equals(mpath.href.baseVal, '#MyPath1'); + + ctm = rect.getCTM(); + assert_equals(ctm.e, 50); + assert_equals(ctm.f, 0); + }); +}, 'Test for mpath when removing xlink:href but we still have href'); + +</script> +</body> diff --git a/testing/web-platform/tests/svg/linking/scripted/href-script-element-markup.html b/testing/web-platform/tests/svg/linking/scripted/href-script-element-markup.html new file mode 100644 index 0000000000..0c6eb23cb6 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/href-script-element-markup.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Href - script element tests on markup</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='testcommon.js'></script> +<body> +<div id='log'></div> +<svg id='svg' width='100' height='100' viewBox='0 0 100 100'> + <script id='script' href='testScripts/externalScript1.js' + xlink:href='testScripts/externalScript2.js'></script> +</svg> +<script> +'use strict'; + +// Use an independent test file for markup testing because it may affect other +// tests. + +test(function(t) { + var script = document.getElementById('script'); + assert_equals(script.href.baseVal, 'testScripts/externalScript1.js'); + assert_equals(loadedScript(), 'externalScript1'); +}, 'Test for loading external script by markup when setting both href and ' + + 'xlink:href'); + +</script> +</body> diff --git a/testing/web-platform/tests/svg/linking/scripted/href-script-element.html b/testing/web-platform/tests/svg/linking/scripted/href-script-element.html new file mode 100644 index 0000000000..48f4908508 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/href-script-element.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>Href - script element tests</title> +<script src='/resources/testharness.js'></script> +<script src='/resources/testharnessreport.js'></script> +<script src='testcommon.js'></script> +<body> +<div id='log'></div> +<svg id='svg' width='100' height='100' viewBox='0 0 100 100'> +</svg> +<script> +'use strict'; + +// Note: +// The order of these tests shouldn't be changed because we don't unload +// the external script file even if we expect the <script> element will be +// removed by childNode.remove() and Garbage Collection after a test has been +// finished. Therefore, I intentionally make them load externalScript1 and +// externalScript2 alternately, and we can check if the results are changed +// after reloading the other script. +// Throughout this test, we periodically need to verify that a script +// *does not load* after we've made a tweak. To do that, we have to +// wait "long enough for it to have loaded", and then make sure nothing +// has changed. We estimate "long enough" by adding an extra dummy +// <script> element and watching for its load event. + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var script = createSVGElement(t, 'script', svg); + + script.setAttribute('type', 'text/javascript'); + script.setAttribute('href', 'testScripts/externalScript1.js'); + assert_equals(script.href.baseVal, 'testScripts/externalScript1.js'); + + return waitEvent(script, 'load').then(function() { + assert_equals(loadedScript(), 'externalScript1', + 'Link to correct external script'); + + script.setAttributeNS(XLINKNS, 'xlink:href', + 'testScripts/externalScript2.js'); + + // Load an dummy script to trigger a load event. + var dummyScript = createSVGElement(t, 'script', svg); + dummyScript.setAttribute('href', 'testScripts/dummyScript.js'); + return waitEvent(dummyScript, 'load'); + }).then(function() { + assert_equals(script.href.baseVal, 'testScripts/externalScript1.js'); + assert_equals(loadedScript(), 'externalScript1', + 'Still link to the external script from href'); + }); +}, 'Test for loading external script from href when setting href and ' + + 'then xlink:href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var script = createSVGElement(t, 'script', svg); + + script.setAttribute('type', 'text/javascript'); + script.setAttributeNS(XLINKNS, 'xlink:href', + 'testScripts/externalScript2.js'); + assert_equals(script.href.baseVal, 'testScripts/externalScript2.js'); + + return waitEvent(script, 'load').then(function() { + assert_equals(loadedScript(), 'externalScript2', + 'Link to the external script from xlink:href'); + + script.setAttribute('href', 'testScripts/externalScript1.js'); + + // Load an dummy script to trigger a load event. + var dummyScript = createSVGElement(t, 'script', svg); + dummyScript.setAttribute('href', 'testScripts/dummyScript.js'); + return waitEvent(dummyScript, 'load'); + }).then(function() { + assert_equals(script.href.baseVal, 'testScripts/externalScript1.js', + 'href() should prefer href attribute over xlink:href'); + assert_equals(loadedScript(), 'externalScript2', + 'Still link to the external script from xlink:href'); + }); +}, 'Test for loading external script from xlnk:href by adding xlink:href and ' + + 'then href'); + +promise_test(function(t) { + var svg = document.getElementById('svg'); + var script = createSVGElement(t, 'script', svg); + + script.setAttribute('type', 'text/javascript'); + script.setAttribute('href', 'testScripts/externalScript1.js'); + script.setAttributeNS(XLINKNS, 'xlink:href', + 'testScripts/externalScript2.js'); + assert_equals(script.href.baseVal, 'testScripts/externalScript1.js'); + + return waitEvent(script, 'load').then(function() { + assert_equals(loadedScript(), 'externalScript1', + 'Link to the external script by href'); + + script.removeAttribute('href'); + assert_equals(script.href.baseVal, 'testScripts/externalScript2.js', + 'href() returns xlink:href attribute because href was unset'); + + // Load an dummy script to trigger a load event. + var dummyScript = createSVGElement(t, 'script', svg); + dummyScript.setAttribute('href', 'testScripts/dummyScript.js'); + return waitEvent(dummyScript, 'load'); + }).then(function() { + assert_equals(loadedScript(), 'externalScript1', + 'The external script loaded from href is still loaded'); + }); +}, 'Test for loading external script from href by adding href and ' + + 'then xlink:href, and then removing href'); + +</script> +</body> diff --git a/testing/web-platform/tests/svg/linking/scripted/rellist-feature-detection.svg b/testing/web-platform/tests/svg/linking/scripted/rellist-feature-detection.svg new file mode 100644 index 0000000000..c600d64c38 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/rellist-feature-detection.svg @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" + xmlns:h="http://www.w3.org/1999/xhtml"> + <title>Test SVGAElement relList attribute</title> + <metadata> + <h:link rel="help" href="https://svgwg.org/svg2-draft/linking.html#InterfaceSVGAElement"/> + </metadata> + <h:script src="/resources/testharness.js"/> + <h:script src="/resources/testharnessreport.js"/> + <script><![CDATA[ + let link_support_table = {}; + // https://html.spec.whatwg.org/multipage/links.html#linkTypes + link_support_table['a'] = { + supported : ['noreferrer', 'noopener'], + unsupported : ['author', 'bookmark', 'external', 'help', 'license', + 'nofollow', 'pingback', 'prev', 'search', 'tag', + 'modulepreload', 'preload', 'preconnect', 'dns-prefetch', + 'stylesheet', 'import', 'icon', 'alternate', 'prefetch', + 'prerender', 'next', 'manifest', 'apple-touch-icon', + 'apple-touch-icon-precomposed', 'canonical'] + }; + + function test_rellist(tag_name, rel_table) { + let element = document.createElementNS("http://www.w3.org/2000/svg", tag_name); + let tag = element.tagName; + // Test that setting rel is also setting relList, for both + // valid and invalid values. + element.rel = 'whatever'; + assert_true(element.relList.contains('whatever'), 'tag = ' + tag + ', setting rel must work'); + element.rel = 'prefetch'; + assert_true(element.relList.contains('prefetch'), 'tag = ' + tag + ', setting rel must work'); + // Test that add() works. + element.relList.add('preloadwhatever'); + assert_equals(element.rel, 'prefetch preloadwhatever', 'tag = ' + tag + ', add must work'); + assert_true(element.relList.contains('preloadwhatever'), 'tag = ' + tag + ', add must work'); + // Test that remove() works. + element.relList.remove('preloadwhatever'); + assert_equals(element.rel, 'prefetch', 'tag = ' + tag + ', remove must work'); + assert_false(element.relList.contains('preloadwhatever'), 'tag = ' + tag + ', remove must work'); + // Test that toggle() works. + element.relList.toggle('prefetch', false); + assert_equals(element.rel, '', 'tag = ' + tag + ', toggle must work'); + element.relList.toggle('prefetch', true); + assert_equals(element.rel, 'prefetch', 'tag = ' + tag + ', toggle must work'); + // Test that replace() works. + element.relList.replace('prefetch', 'first'); + assert_equals(element.rel, 'first', 'tag = ' + tag + ', replace must work'); + // Test that indexed item getter works. + element.relList.add('second'); + assert_equals(element.relList.length, 2, 'tag = ' + tag + ', relList length must be correct'); + assert_equals(element.relList[0], 'first', 'tag = ' + tag + ', relList indexed item must work'); + assert_equals(element.relList[1], 'second', 'tag = ' + tag + ', relList indexed item must work'); + // Test that relList is [SameObject]. + let savedRelList = element.relList; + element.rel = 'something'; + assert_equals(element.relList, savedRelList, 'tag = ' + tag + ', SameObject must work'); + + // Test that supports() is returning true for valid values + // and false for invalid ones. + let supported = rel_table['supported']; + for (let link_type in supported) { + assert_true(element.relList.supports(supported[link_type]), 'tag = ' + tag + ', link type = ' + supported[link_type] + ' must be supported'); + } + let unsupported = rel_table['unsupported']; + for (let link_type in unsupported) { + assert_false(element.relList.supports(unsupported[link_type]), 'tag = ' + tag + ', link type = ' + unsupported[link_type] + ' must be unsupported'); + } + } + + test(function() { + test_rellist('a', link_support_table['a']); + }, 'Make sure that relList based feature detection is working'); + ]]></script> +</svg>
\ No newline at end of file diff --git a/testing/web-platform/tests/svg/linking/scripted/resources/a-download-click.svg b/testing/web-platform/tests/svg/linking/scripted/resources/a-download-click.svg new file mode 100644 index 0000000000..5d18c3088a --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/resources/a-download-click.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" x="10" y="10"> + <a id="blob-url" download="foo.html">Click me</a> +</svg> diff --git a/testing/web-platform/tests/svg/linking/scripted/testScripts/dummyScript.js b/testing/web-platform/tests/svg/linking/scripted/testScripts/dummyScript.js new file mode 100644 index 0000000000..fbf3c34d61 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/testScripts/dummyScript.js @@ -0,0 +1,3 @@ +function dummyScript() { + return "This is a dummy script"; +} diff --git a/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript1.js b/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript1.js new file mode 100644 index 0000000000..ba4028ca80 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript1.js @@ -0,0 +1,3 @@ +function loadedScript() { + return "externalScript1"; +} diff --git a/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript2.js b/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript2.js new file mode 100644 index 0000000000..db3b60a827 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript2.js @@ -0,0 +1,3 @@ +function loadedScript() { + return "externalScript2"; +} diff --git a/testing/web-platform/tests/svg/linking/scripted/testcommon.js b/testing/web-platform/tests/svg/linking/scripted/testcommon.js new file mode 100644 index 0000000000..7d87923f59 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/scripted/testcommon.js @@ -0,0 +1,42 @@ +/** + * The const var for SVG and xlink namespaces + */ +const SVGNS = 'http://www.w3.org/2000/svg'; +const XLINKNS = 'http://www.w3.org/1999/xlink'; + +/** + * Appends a svg element to the parent. + * + * @param test The testharness.js Test object. If provided, this will be used + * to register a cleanup callback to remove the div when the test + * finishes. + * @param tag The element tag name. + * @param parent The parent element of this new created svg element. + * @param attrs A dictionary object with attribute names and values to set on + * the div. + */ +function createSVGElement(test, tag, parent, attrs) { + var elem = document.createElementNS(SVGNS, tag); + if (attrs) { + for (var attrName in attrs) { + elem.setAttribute(attrName, attrs[attrName]); + } + } + parent.appendChild(elem); + test.add_cleanup(function() { + elem.remove(); + }); + return elem; +} + +/** + * Create a Promise object which resolves when a specific event fires. + * + * @param object The event target. + * @param name The event name. + */ +function waitEvent(object, name) { + return new Promise(function(resolve) { + object.addEventListener(name, resolve, { once: true }); + }); +} |
