href-animate-element.html (5711B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Href - animate element tests</title> 4 <script src='/resources/testharness.js'></script> 5 <script src='/resources/testharnessreport.js'></script> 6 <script src='testcommon.js'></script> 7 <body> 8 <div id='log'></div> 9 <svg id='svg' width='100' height='100' viewBox='0 0 100 100'></svg> 10 <script> 11 'use strict'; 12 13 promise_test(function(t) { 14 var svg = document.getElementById('svg'); 15 var rect1 = createSVGElement(t, 'rect', svg, 16 { 'width': '10px', 17 'height': '10px', 18 'id': 'rect1' }); 19 var rect2 = createSVGElement(t, 'rect', svg, 20 { 'width': '10px', 21 'height': '10px', 22 'id': 'rect2' }); 23 var animate = createSVGElement(t, 'animate', svg, 24 { 'attributeName': 'x', 25 'from': '0', 26 'to': '100', 27 'dur': '10s' }); 28 animate.setAttribute('href', '#rect1'); 29 animate.setAttributeNS(XLINKNS, 'xlink:href', '#rect2'); 30 assert_equals(animate.targetElement, rect1); 31 32 return waitEvent(animate, 'beginEvent').then(function() { 33 svg.pauseAnimations(); 34 svg.setCurrentTime(5); 35 assert_equals(rect1.x.animVal.value, 50); 36 assert_equals(rect2.x.animVal.value, 0); 37 }); 38 }, 'Test for animate element when setting both href and xlink:href'); 39 40 promise_test(function(t) { 41 var svg = document.getElementById('svg'); 42 var rect1 = createSVGElement(t, 'rect', svg, 43 { 'width': '10px', 44 'height': '10px', 45 'id': 'rect1' }); 46 var rect2 = createSVGElement(t, 'rect', svg, 47 { 'width': '10px', 48 'height': '10px', 49 'id': 'rect2' }); 50 var transform = createSVGElement(t, 'animateTransform', svg, 51 { 'attributeName': 'transform', 52 'type': 'translate', 53 'from': '0', 54 'to': '100', 55 'dur': '10s' }); 56 57 transform.setAttribute('href', '#rect1'); 58 transform.setAttributeNS(XLINKNS, 'xlink:href', '#rect2'); 59 assert_equals(transform.targetElement, rect1); 60 61 return waitEvent(transform, 'beginEvent').then(function() { 62 svg.pauseAnimations(); 63 svg.setCurrentTime(5); 64 assert_equals(rect1.getCTM().e, 50); 65 assert_equals(rect2.getCTM().e, 0); 66 }); 67 }, 'Test for animateTransform element when setting both href and xlink:href'); 68 69 promise_test(function(t) { 70 var svg = document.getElementById('svg'); 71 var circle1 = createSVGElement(t, 'circle', svg, 72 { 'cx': '50', 73 'cy': '50', 74 'r': '40', 75 'id': 'circle1' }); 76 var circle2 = createSVGElement(t, 'circle', svg, 77 { 'cx': '50', 78 'cy': '50', 79 'r': '40', 80 'id': 'circle2' }); 81 var animate = createSVGElement(t, 'animate', svg, 82 { 'attributeName': 'cx', 83 'from': '50', 84 'to': '150', 85 'dur': '10s' }); 86 animate.setAttribute('href', '#circle1'); 87 animate.setAttributeNS(XLINKNS, 'xlink:href', '#circle2'); 88 assert_equals(animate.targetElement, circle1); 89 90 return waitEvent(animate, 'beginEvent').then(function() { 91 svg.pauseAnimations(); 92 svg.setCurrentTime(5); 93 assert_equals(circle1.cx.animVal.value, 100); 94 assert_equals(circle2.cx.animVal.value, 50); 95 96 animate.removeAttribute('href'); 97 assert_equals(animate.targetElement, circle2); 98 assert_equals(circle1.cx.animVal.value, 50); 99 assert_equals(circle2.cx.animVal.value, 100); 100 }); 101 }, 'Test for animate element when removing href but we still have xlink:href'); 102 103 promise_test(function(t) { 104 var svg = document.getElementById('svg'); 105 var circle1 = createSVGElement(t, 'circle', svg, 106 { 'cx': '50', 107 'cy': '50', 108 'r': '40', 109 'id': 'circle1' }); 110 var circle2 = createSVGElement(t, 'circle', svg, 111 { 'cx': '50', 112 'cy': '50', 113 'r': '40', 114 'id': 'circle2' }); 115 var animate = createSVGElement(t, 'animate', svg, 116 { 'attributeName': 'cx', 117 'from': '50', 118 'to': '150', 119 'dur': '10s' }); 120 animate.setAttribute('href', '#circle1'); 121 animate.setAttributeNS(XLINKNS, 'xlink:href', '#circle2'); 122 assert_equals(animate.targetElement, circle1); 123 124 return waitEvent(animate, 'beginEvent').then(function() { 125 svg.pauseAnimations(); 126 svg.setCurrentTime(5); 127 assert_equals(circle1.cx.animVal.value, 100); 128 assert_equals(circle2.cx.animVal.value, 50); 129 130 animate.removeAttributeNS(XLINKNS, 'href'); 131 assert_equals(animate.targetElement, circle1); 132 assert_equals(circle1.cx.animVal.value, 100); 133 assert_equals(circle2.cx.animVal.value, 50); 134 }); 135 }, 'Test for animate element when removing xlink:href but we still have href'); 136 137 </script> 138 </body>