test_smilSync.xhtml (8394B)
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>Test for SMIL sync behaviour </title> 4 <script 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"> 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); 251 ]]> 252 </script> 253 </pre> 254 </body> 255 </html>