dom/smil/test/test_smilSync.xhtml@b8a032363ba2
dom/smil/test/test_smilSync.xhtml
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title>Test for SMIL sync behaviour </title>
4 <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
5 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
6 </head>
7 <body>
8 <p id="display"></p>
9 <div id="content" style="display: none">
10 <svg id="svg" xmlns="http://www.w3.org/2000/svg" width="120px" height="120px">
11 <circle cx="20" cy="20" r="15" fill="blue">
12 <animate attributeName="cx" attributeType="XML" from="20" to="100"
13 begin="indefinite" dur="4s" restart="always" id="anim1"/>
14 </circle>
15 <circle cx="20" cy="20" r="15" fill="blue">
16 <animate attributeName="cx" attributeType="XML" from="0" to="50"
17 begin="0" dur="1s" additive="sum" fill="freeze" id="anim2"/>
18 </circle>
19 <circle cx="20" cy="20" r="15" fill="blue">
20 <animate attributeName="cx" attributeType="XML" from="0" to="50"
21 begin="0" dur="10s" additive="sum" fill="freeze" id="anim3"/>
22 </circle>
23 <circle cx="20" cy="20" r="15" fill="blue">
24 <animate attributeName="cx" attributeType="XML" from="0" to="50"
25 begin="0" dur="10s" additive="sum" fill="freeze" id="anim4"/>
26 </circle>
27 <circle cx="20" cy="20" r="15" fill="blue">
28 <animate attributeName="cx" attributeType="XML" from="0" to="50"
29 begin="0" dur="40s" additive="sum" fill="freeze" id="anim5"/>
30 </circle>
31 <circle cx="20" cy="20" r="15" fill="blue">
32 <animate attributeName="cx" attributeType="XML" from="20" to="100"
33 begin="100s" dur="4s" restart="always" id="anim6"/>
34 </circle>
35 </svg>
36 </div>
37 <pre id="test">
38 <script class="testbody" type="text/javascript">
39 <![CDATA[
40 /** Test for SMIL sync behavior **/
42 /* Global Variables */
43 var svg = document.getElementById("svg");
45 SimpleTest.waitForExplicitFinish();
47 function main() {
48 testBeginAt(document.getElementById("anim1"));
49 testChangeBaseVal(document.getElementById("anim2"));
50 testChangeWhilePaused(document.getElementById("anim3"));
51 testChangeAnimAttribute(document.getElementById("anim4"));
52 testChangeTimingAttribute(document.getElementById("anim5"));
53 testSetCurrentTime(document.getElementById("anim6"));
54 SimpleTest.finish();
55 }
57 function testBeginAt(anim) {
58 // This (hugely important) test checks that a call to beginElement updates to
59 // the new interval
61 // Check some pre-conditions
62 is(anim.getAttribute("restart"), "always");
63 ok(anim.getSimpleDuration() >= 4);
65 // First start the animation
66 svg.setCurrentTime(2);
67 anim.beginElement();
69 // Then restart it--twice
70 svg.setCurrentTime(4);
71 anim.beginElement();
72 anim.beginElementAt(-1);
74 // The first restart should win if the state machine has been successfully
75 // updated. If we get '3' back instead we haven't updated properly.
76 is(anim.getStartTime(), 4);
77 }
79 function testChangeBaseVal(anim) {
80 // Check that a change to the base value is updated even after animation is
81 // frozen
83 // preconditions -- element should have ended
84 try {
85 anim.getStartTime();
86 ok(false, "Element has not ended yet.");
87 } catch (e) { }
89 // check frozen value is applied
90 var target = anim.targetElement;
91 is(target.cx.animVal.value, 70);
92 is(target.cx.baseVal.value, 20);
94 // change base val and re-check
95 target.cx.baseVal.value = 30;
96 is(target.cx.animVal.value, 80);
97 is(target.cx.baseVal.value, 30);
98 }
100 function testChangeWhilePaused(anim) {
101 // Check that a change to the base value is updated even when the animation is
102 // paused
104 svg.pauseAnimations();
105 svg.setCurrentTime(anim.getSimpleDuration() / 2);
107 // check paused value is applied
108 var target = anim.targetElement;
109 is(target.cx.animVal.value, 45);
110 is(target.cx.baseVal.value, 20);
112 // change base val and re-check
113 target.cx.baseVal.value = 30;
114 is(target.cx.animVal.value, 55);
115 is(target.cx.baseVal.value, 30);
116 }
118 function testChangeAnimAttribute(anim) {
119 // Check that a change to an animation attribute causes an update even when
120 // the animation is frozen and paused
122 // Make sure animation is paused and frozen
123 svg.pauseAnimations();
124 svg.setCurrentTime(anim.getStartTime() + anim.getSimpleDuration() + 1);
126 // Check frozen value is applied
127 var target = anim.targetElement;
128 is(target.cx.animVal.value, 70);
129 is(target.cx.baseVal.value, 20);
131 // Make the animation no longer additive
132 anim.removeAttribute("additive");
133 is(target.cx.animVal.value, 50);
134 is(target.cx.baseVal.value, 20);
135 }
137 function testChangeTimingAttribute(anim) {
138 // Check that a change to a timing attribute causes an update even when
139 // the animation is paused
141 svg.pauseAnimations();
142 svg.setCurrentTime(anim.getSimpleDuration() / 2);
144 // Check part-way value is applied
145 var target = anim.targetElement;
146 is(target.cx.animVal.value, 45);
147 is(target.cx.baseVal.value, 20);
149 // Make the animation no longer additive
150 anim.setAttribute("dur", String(anim.getSimpleDuration() / 2) + "s");
151 is(target.cx.animVal.value, 70);
152 is(target.cx.baseVal.value, 20);
154 // Remove fill
155 anim.removeAttribute("fill");
156 is(target.cx.animVal.value, 20);
157 is(target.cx.baseVal.value, 20);
158 }
160 function testSetCurrentTime(anim) {
161 // This test checks that a call to setCurrentTime flushes restarts
162 //
163 // Actually, this same scenario arises in test_smilRestart.xhtml but we
164 // isolate this particular situation here for easier diagnosis if this ever
165 // fails.
166 //
167 // At first we have:
168 // currentTime begin="100s"
169 // v v
170 // Doc time: 0---\/\/\/-------99----------100-------
171 //
172 svg.setCurrentTime(99);
173 is(anim.getStartTime(), 100);
175 // Then we restart giving us:
176 //
177 // beginElement begin="100s"
178 // v v
179 // Doc time: 0---\/\/\/-------99----------100-------
180 //
181 // So our current interval is
182 //
183 // begin="100s"
184 // v
185 // +---------------|
186 // Doc time: 0---\/\/\/-------99-100-101-102-103-----
187 //
188 anim.beginElement();
189 is(anim.getStartTime(), svg.getCurrentTime());
191 // Then we skip to half-way, i.e.
192 //
193 // currentTime
194 // v
195 // begin="100s"
196 // v
197 // +---------------|
198 // Doc time: 0---\/\/\/-------99-100-101-102-103-----
199 //
200 // At this point we should flush our restarts and early end the first interval
201 // and start the second interval, giving us
202 //
203 // So our timegraph looks like:
204 //
205 // currentTime
206 // v
207 // +---------------|
208 // +---|
209 // Doc time: 0---\/\/\/-------99-100-101-102-103-104-
210 //
211 var newTime = anim.getStartTime() + 0.5 * anim.getSimpleDuration();
212 svg.setCurrentTime(newTime);
214 // Finally we call beginElement again giving us
215 //
216 // currentTime
217 // v
218 // +---------------|
219 // +---|
220 // +---|
221 // Doc time: 0---\/\/\/-------99-100-101-102-103-104-105-
222 //
223 // If, however, setCurrentTime failed to flush restarts out starting point
224 // we do come to update the timegraph would be:
225 //
226 // beginElementAt
227 // v
228 // begin="100s"
229 // v
230 // +---------------|
231 // Doc time: 0---\/\/\/-------99-100-101-102-103-----
232 //
233 // And as soon as we encountered the begin="100s" spec we'd do a restart
234 // according to the SMIL algorithms and a restart involves a reset which
235 // clears the instance times created by DOM calls and so we'd end up with
236 // just:
237 //
238 // currentTime
239 // v
240 // +---------------|
241 // +---|
242 // Doc time: 0---\/\/\/-------99-100-101-102-103-104-
243 //
244 // Which is probably not what the author intended.
245 //
246 anim.beginElement();
247 is(anim.getStartTime(), svg.getCurrentTime());
248 }
250 window.addEventListener("load", main, false);
251 ]]>
252 </script>
253 </pre>
254 </body>
255 </html>
