The Tor Browser / file comparison
comparison: dom/smil/test/test_smilSync.xhtml
dom/smil/test/test_smilSync.xhtml
- changeset 0
- 6474c204b198
equal
deleted
inserted
replaced
| -1:000000000000 | 0:8cdac4818757 |
|---|---|
| 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 **/ | |
| 41 | |
| 42 /* Global Variables */ | |
| 43 var svg = document.getElementById("svg"); | |
| 44 | |
| 45 SimpleTest.waitForExplicitFinish(); | |
| 46 | |
| 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 } | |
| 56 | |
| 57 function testBeginAt(anim) { | |
| 58 // This (hugely important) test checks that a call to beginElement updates to | |
| 59 // the new interval | |
| 60 | |
| 61 // Check some pre-conditions | |
| 62 is(anim.getAttribute("restart"), "always"); | |
| 63 ok(anim.getSimpleDuration() >= 4); | |
| 64 | |
| 65 // First start the animation | |
| 66 svg.setCurrentTime(2); | |
| 67 anim.beginElement(); | |
| 68 | |
| 69 // Then restart it--twice | |
| 70 svg.setCurrentTime(4); | |
| 71 anim.beginElement(); | |
| 72 anim.beginElementAt(-1); | |
| 73 | |
| 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 } | |
| 78 | |
| 79 function testChangeBaseVal(anim) { | |
| 80 // Check that a change to the base value is updated even after animation is | |
| 81 // frozen | |
| 82 | |
| 83 // preconditions -- element should have ended | |
| 84 try { | |
| 85 anim.getStartTime(); | |
| 86 ok(false, "Element has not ended yet."); | |
| 87 } catch (e) { } | |
| 88 | |
| 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); | |
| 93 | |
| 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 } | |
| 99 | |
| 100 function testChangeWhilePaused(anim) { | |
| 101 // Check that a change to the base value is updated even when the animation is | |
| 102 // paused | |
| 103 | |
| 104 svg.pauseAnimations(); | |
| 105 svg.setCurrentTime(anim.getSimpleDuration() / 2); | |
| 106 | |
| 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); | |
| 111 | |
| 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 } | |
| 117 | |
| 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 | |
| 121 | |
| 122 // Make sure animation is paused and frozen | |
| 123 svg.pauseAnimations(); | |
| 124 svg.setCurrentTime(anim.getStartTime() + anim.getSimpleDuration() + 1); | |
| 125 | |
| 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); | |
| 130 | |
| 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 } | |
| 136 | |
| 137 function testChangeTimingAttribute(anim) { | |
| 138 // Check that a change to a timing attribute causes an update even when | |
| 139 // the animation is paused | |
| 140 | |
| 141 svg.pauseAnimations(); | |
| 142 svg.setCurrentTime(anim.getSimpleDuration() / 2); | |
| 143 | |
| 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); | |
| 148 | |
| 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); | |
| 153 | |
| 154 // Remove fill | |
| 155 anim.removeAttribute("fill"); | |
| 156 is(target.cx.animVal.value, 20); | |
| 157 is(target.cx.baseVal.value, 20); | |
| 158 } | |
| 159 | |
| 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); | |
| 174 | |
| 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()); | |
| 190 | |
| 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); | |
| 213 | |
| 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 } | |
| 249 | |
| 250 window.addEventListener("load", main, false); | |
| 251 ]]> | |
| 252 </script> | |
| 253 </pre> | |
| 254 </body> | |
| 255 </html> |
