diff options
Diffstat (limited to 'testing/web-platform/tests/svg/linking')
24 files changed, 715 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 000000000..ceb0f1880 --- /dev/null +++ b/testing/web-platform/tests/svg/linking/reftests/href-a-element-attr-change.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html class="retest-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 000000000..0c67c98b0 --- /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 000000000..cb3758dfa --- /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 000000000..efdbe63a1 --- /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 000000000..9b009e31d --- /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 000000000..3f718d0c5 --- /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 000000000..279be683d --- /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 000000000..2442b6f3d --- /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 000000000..c51906fde --- /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 000000000..779e33f62 --- /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 000000000..bd8770c97 --- /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 000000000..89aa24315 --- /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 000000000..4e1fd3531 --- /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 000000000..b31e92224 --- /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 000000000..93577b764 --- /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 000000000..e6b37f29e --- /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/scripted/href-animate-element.html b/testing/web-platform/tests/svg/linking/scripted/href-animate-element.html new file mode 100644 index 000000000..f0b99209a --- /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 000000000..8fb9f0f1a --- /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 000000000..0c6eb23cb --- /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 000000000..48f490850 --- /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/testScripts/dummyScript.js b/testing/web-platform/tests/svg/linking/scripted/testScripts/dummyScript.js new file mode 100644 index 000000000..fbf3c34d6 --- /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 000000000..ba4028ca8 --- /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 000000000..db3b60a82 --- /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 000000000..7d87923f5 --- /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 }); + }); +} |