OLD | NEW |
(Empty) | |
| 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, 'begin').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, 'begin').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, 'begin').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, 'begin').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> |
OLD | NEW |