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 |