multiple-animations-ending.html (15034B)
1 <!doctype html> 2 <html> 3 <meta charset="utf-8"> 4 <title>This checks the effect on multiple animations ending on one target</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/SVGAnimationTestCase-testharness.js"></script> 8 9 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 10 11 <!-- Test that the first element can end while others continue without crashing, and the second 12 can end and remain frozen. Also test that a third element can animate after the second has ended 13 but that the result is still to return to the second animation's freeze position. --> 14 <rect x='0' y='0' width='50' height='50' fill='green'> 15 <animate id="an1" attributeName='x' from='0' to='100' begin='0s' dur='1s' /> 16 <animate id="an2" attributeName='x' from='200' to='250' begin='1.5s' dur='1s' fill='freeze' /> 17 <animate id="an3" attributeName='x' from='50' to='0' begin='2.5s' dur='0.5s' /> 18 </rect> 19 20 <!-- Test that a second element can take priority over the first from 0-1s, then 21 test that the first element can animate for 1s, and finally test that the 22 second element can once again animate after the first has ended. After all 23 animations end, test that they are removed and the rect returns to its home. --> 24 <rect x='200' y='75' width='50' height='50' fill='green'> 25 <animate id="an4" attributeName='x' from='0' to='10' begin='1s' dur='1s'/> 26 <animate id="an5" attributeName='x' from='100' to='0' begin='0s' dur='2.5s'/> 27 </rect> 28 29 <!-- Test that a repeating animation can take priority over another animation, and that the 30 end state is the second animation's freeze value. Also test that, after a pause, a third 31 animation can take over and have its freeze value satisfied at the end. --> 32 <rect x='0' y='150' width='50' height='50' fill='green'> 33 <animate id="an6" attributeName='x' from='200' to='240' begin='0s' dur='2s' fill='freeze'/> 34 <animate id="an7" attributeName='x' from='0' to='5' begin='1s' dur='0.1s' repeatCount="5" fill='freeze'/> 35 <animate id="an8" attributeName='x' from='250' to='150' begin='3s' dur='1s' fill='freeze'/> 36 </rect> 37 38 <!-- Test that 4 animations can animate a rect in 20px 'steps' and that correct freeze values are 39 honored even though the animation elements are specified in non-sequential order. Also test 40 that two repeating animations (active for only a short duration) only momentarily 41 affect the overall animation and are correctly removed. --> 42 <rect x='0' y='225' width='50' height='50' fill='green'> 43 <animate id="an9" attributeName='x' from='200' to='250' begin='1.6s' dur='0.1s' repeatCount="2" fill='remove'/> 44 <animate id="anA" attributeName='x' from='160' to='180' begin='3s' dur='0.5s' fill='freeze'/> 45 <animate id="anB" attributeName='x' from='110' to='130' begin='2s' dur='0.5s' fill='freeze'/> 46 <animate id="anC" attributeName='x' from='10' to='30' begin='0s' dur='0.5s' fill='freeze'/> 47 <animate id="anD" attributeName='x' from='60' to='80' begin='1s' dur='0.5s' fill='freeze'/> 48 <animate id="anE" attributeName='x' from='200' to='250' begin='3.6s' dur='0.1s' repeatCount="2" fill='remove'/> 49 </rect> 50 51 </svg> 52 53 <script> 54 var rootSVGElement = document.querySelector("svg"); 55 var epsilon = 1.0; 56 57 // Setup animation test 58 function sample1() { 59 assert_approx_equals(rect1.x.animVal.value, 0, epsilon); 60 assert_equals(rect1.x.baseVal.value, 0); 61 62 assert_approx_equals(rect2.x.animVal.value, 100, epsilon); 63 assert_equals(rect2.x.baseVal.value, 200); 64 65 assert_approx_equals(rect3.x.animVal.value, 200, epsilon); 66 assert_equals(rect3.x.baseVal.value, 0); 67 68 assert_approx_equals(rect4.x.animVal.value, 10, epsilon); 69 assert_equals(rect4.x.baseVal.value, 0); 70 } 71 72 function sample2() { 73 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 74 assert_equals(rect1.x.baseVal.value, 0); 75 76 assert_approx_equals(rect2.x.animVal.value, 80, epsilon); 77 assert_equals(rect2.x.baseVal.value, 200); 78 79 assert_approx_equals(rect3.x.animVal.value, 210, epsilon); 80 assert_equals(rect3.x.baseVal.value, 0); 81 82 assert_approx_equals(rect4.x.animVal.value, 30, epsilon); 83 assert_equals(rect4.x.baseVal.value, 0); 84 } 85 86 function sample3() { 87 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 88 assert_equals(rect1.x.baseVal.value, 0); 89 90 assert_approx_equals(rect2.x.animVal.value, 80, epsilon); 91 assert_equals(rect2.x.baseVal.value, 200); 92 93 assert_approx_equals(rect3.x.animVal.value, 210, epsilon); 94 assert_equals(rect3.x.baseVal.value, 0); 95 96 assert_approx_equals(rect4.x.animVal.value, 30, epsilon); 97 assert_equals(rect4.x.baseVal.value, 0); 98 } 99 100 function sample4() { 101 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 102 assert_equals(rect1.x.baseVal.value, 0); 103 104 assert_approx_equals(rect2.x.animVal.value, 80, epsilon); 105 assert_equals(rect2.x.baseVal.value, 200); 106 107 assert_approx_equals(rect3.x.animVal.value, 210, epsilon); 108 assert_equals(rect3.x.baseVal.value, 0); 109 110 assert_approx_equals(rect4.x.animVal.value, 30, epsilon); 111 assert_equals(rect4.x.baseVal.value, 0); 112 } 113 114 function sample5() { 115 assert_approx_equals(rect1.x.animVal.value, 100, epsilon); 116 assert_equals(rect1.x.baseVal.value, 0); 117 118 assert_approx_equals(rect2.x.animVal.value, 60, epsilon); 119 assert_equals(rect2.x.baseVal.value, 200); 120 121 assert_approx_equals(rect3.x.animVal.value, 220, epsilon); 122 assert_equals(rect3.x.baseVal.value, 0); 123 124 assert_approx_equals(rect4.x.animVal.value, 30, epsilon); 125 assert_equals(rect4.x.baseVal.value, 0); 126 } 127 128 function sample6() { 129 assert_approx_equals(rect1.x.animVal.value, 0, epsilon); 130 assert_equals(rect1.x.baseVal.value, 0); 131 132 assert_approx_equals(rect2.x.animVal.value, 0, epsilon); 133 assert_equals(rect2.x.baseVal.value, 200); 134 135 assert_approx_equals(rect3.x.animVal.value, 0, epsilon); 136 assert_equals(rect3.x.baseVal.value, 0); 137 138 assert_approx_equals(rect4.x.animVal.value, 60, epsilon); 139 assert_equals(rect4.x.baseVal.value, 0); 140 } 141 142 function sample7() { 143 assert_approx_equals(rect1.x.animVal.value, 0, epsilon); 144 assert_equals(rect1.x.baseVal.value, 0); 145 146 assert_approx_equals(rect2.x.animVal.value, 0, epsilon); 147 assert_equals(rect2.x.baseVal.value, 200); 148 149 assert_approx_equals(rect3.x.animVal.value, 0, epsilon); 150 assert_equals(rect3.x.baseVal.value, 0); 151 152 assert_approx_equals(rect4.x.animVal.value, 60, epsilon); 153 assert_equals(rect4.x.baseVal.value, 0); 154 } 155 156 function sample8() { 157 assert_approx_equals(rect1.x.animVal.value, 0, epsilon); 158 assert_equals(rect1.x.baseVal.value, 0); 159 160 assert_approx_equals(rect2.x.animVal.value, 5, epsilon); 161 assert_equals(rect2.x.baseVal.value, 200); 162 163 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 164 assert_equals(rect3.x.baseVal.value, 0); 165 166 assert_approx_equals(rect4.x.animVal.value, 80, epsilon); 167 assert_equals(rect4.x.baseVal.value, 0); 168 } 169 170 function sample9() { 171 assert_approx_equals(rect1.x.animVal.value, 200, epsilon); 172 assert_equals(rect1.x.baseVal.value, 0); 173 174 assert_approx_equals(rect2.x.animVal.value, 5, epsilon); 175 assert_equals(rect2.x.baseVal.value, 200); 176 177 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 178 assert_equals(rect3.x.baseVal.value, 0); 179 180 assert_approx_equals(rect4.x.animVal.value, 80, epsilon); 181 assert_equals(rect4.x.baseVal.value, 0); 182 } 183 184 function sample10() { 185 assert_approx_equals(rect1.x.animVal.value, 200, epsilon); 186 assert_equals(rect1.x.baseVal.value, 0); 187 188 assert_approx_equals(rect2.x.animVal.value, 5, epsilon); 189 assert_equals(rect2.x.baseVal.value, 200); 190 191 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 192 assert_equals(rect3.x.baseVal.value, 0); 193 194 assert_approx_equals(rect4.x.animVal.value, 80, epsilon); 195 assert_equals(rect4.x.baseVal.value, 0); 196 } 197 198 function sample11() { 199 assert_approx_equals(rect1.x.animVal.value, 225, epsilon); 200 assert_equals(rect1.x.baseVal.value, 0); 201 202 assert_approx_equals(rect2.x.animVal.value, 10, epsilon); 203 assert_equals(rect2.x.baseVal.value, 200); 204 205 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 206 assert_equals(rect3.x.baseVal.value, 0); 207 208 assert_approx_equals(rect4.x.animVal.value, 80, epsilon); 209 assert_equals(rect4.x.baseVal.value, 0); 210 } 211 212 function sample12() { 213 assert_approx_equals(rect1.x.animVal.value, 225, epsilon); 214 assert_equals(rect1.x.baseVal.value, 0); 215 216 assert_approx_equals(rect2.x.animVal.value, 20, epsilon); 217 assert_equals(rect2.x.baseVal.value, 200); 218 219 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 220 assert_equals(rect3.x.baseVal.value, 0); 221 222 assert_approx_equals(rect4.x.animVal.value, 110, epsilon); 223 assert_equals(rect4.x.baseVal.value, 0); 224 } 225 226 function sample13() { 227 assert_approx_equals(rect1.x.animVal.value, 225, epsilon); 228 assert_equals(rect1.x.baseVal.value, 0); 229 230 assert_approx_equals(rect2.x.animVal.value, 20, epsilon); 231 assert_equals(rect2.x.baseVal.value, 200); 232 233 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 234 assert_equals(rect3.x.baseVal.value, 0); 235 236 assert_approx_equals(rect4.x.animVal.value, 110, epsilon); 237 assert_equals(rect4.x.baseVal.value, 0); 238 } 239 240 function sample14() { 241 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 242 assert_equals(rect1.x.baseVal.value, 0); 243 244 assert_approx_equals(rect2.x.animVal.value, 0, epsilon); 245 assert_equals(rect2.x.baseVal.value, 200); 246 247 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 248 assert_equals(rect3.x.baseVal.value, 0); 249 250 assert_approx_equals(rect4.x.animVal.value, 130, epsilon); 251 assert_equals(rect4.x.baseVal.value, 0); 252 } 253 254 function sample15() { 255 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 256 assert_equals(rect1.x.baseVal.value, 0); 257 258 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 259 assert_equals(rect2.x.baseVal.value, 200); 260 261 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 262 assert_equals(rect3.x.baseVal.value, 0); 263 264 assert_approx_equals(rect4.x.animVal.value, 130, epsilon); 265 assert_equals(rect4.x.baseVal.value, 0); 266 } 267 268 function sample16() { 269 assert_approx_equals(rect1.x.animVal.value, 50, epsilon); 270 assert_equals(rect1.x.baseVal.value, 0); 271 272 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 273 assert_equals(rect2.x.baseVal.value, 200); 274 275 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 276 assert_equals(rect3.x.baseVal.value, 0); 277 278 assert_approx_equals(rect4.x.animVal.value, 130, epsilon); 279 assert_equals(rect4.x.baseVal.value, 0); 280 } 281 282 function sample17() { 283 assert_approx_equals(rect1.x.animVal.value, 0, epsilon); 284 assert_equals(rect1.x.baseVal.value, 0); 285 286 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 287 assert_equals(rect2.x.baseVal.value, 200); 288 289 assert_approx_equals(rect3.x.animVal.value, 5, epsilon); 290 assert_equals(rect3.x.baseVal.value, 0); 291 292 assert_approx_equals(rect4.x.animVal.value, 130, epsilon); 293 assert_equals(rect4.x.baseVal.value, 0); 294 } 295 296 function sample18() { 297 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 298 assert_equals(rect1.x.baseVal.value, 0); 299 300 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 301 assert_equals(rect2.x.baseVal.value, 200); 302 303 assert_approx_equals(rect3.x.animVal.value, 250, epsilon); 304 assert_equals(rect3.x.baseVal.value, 0); 305 306 assert_approx_equals(rect4.x.animVal.value, 160, epsilon); 307 assert_equals(rect4.x.baseVal.value, 0); 308 } 309 310 function sample19() { 311 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 312 assert_equals(rect1.x.baseVal.value, 0); 313 314 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 315 assert_equals(rect2.x.baseVal.value, 200); 316 317 assert_approx_equals(rect3.x.animVal.value, 250, epsilon); 318 assert_equals(rect3.x.baseVal.value, 0); 319 320 assert_approx_equals(rect4.x.animVal.value, 160, epsilon); 321 assert_equals(rect4.x.baseVal.value, 0); 322 } 323 324 function sample20() { 325 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 326 assert_equals(rect1.x.baseVal.value, 0); 327 328 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 329 assert_equals(rect2.x.baseVal.value, 200); 330 331 assert_approx_equals(rect3.x.animVal.value, 200, epsilon); 332 assert_equals(rect3.x.baseVal.value, 0); 333 334 assert_approx_equals(rect4.x.animVal.value, 180, epsilon); 335 assert_equals(rect4.x.baseVal.value, 0); 336 } 337 338 function sample21() { 339 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 340 assert_equals(rect1.x.baseVal.value, 0); 341 342 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 343 assert_equals(rect2.x.baseVal.value, 200); 344 345 assert_approx_equals(rect3.x.animVal.value, 200, epsilon); 346 assert_equals(rect3.x.baseVal.value, 0); 347 348 assert_approx_equals(rect4.x.animVal.value, 180, epsilon); 349 assert_equals(rect4.x.baseVal.value, 0); 350 } 351 352 function sample22() { 353 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 354 assert_equals(rect1.x.baseVal.value, 0); 355 356 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 357 assert_equals(rect2.x.baseVal.value, 200); 358 359 assert_approx_equals(rect3.x.animVal.value, 150, epsilon); 360 assert_equals(rect3.x.baseVal.value, 0); 361 362 assert_approx_equals(rect4.x.animVal.value, 180, epsilon); 363 assert_equals(rect4.x.baseVal.value, 0); 364 } 365 366 function sample23() { 367 assert_approx_equals(rect1.x.animVal.value, 250, epsilon); 368 assert_equals(rect1.x.baseVal.value, 0); 369 370 assert_approx_equals(rect2.x.animVal.value, 200, epsilon); 371 assert_equals(rect2.x.baseVal.value, 200); 372 373 assert_approx_equals(rect3.x.animVal.value, 150, epsilon); 374 assert_equals(rect3.x.baseVal.value, 0); 375 376 assert_approx_equals(rect4.x.animVal.value, 180, epsilon); 377 assert_equals(rect4.x.baseVal.value, 0); 378 } 379 380 smil_async_test((t) => { 381 var rects = rootSVGElement.ownerDocument.getElementsByTagName("rect"); 382 rect1 = rects[0]; 383 rect2 = rects[1]; 384 rect3 = rects[2]; 385 rect4 = rects[3]; 386 387 const expectedValues = [ 388 // [animationId, time, sampleCallback] 389 ["an1", 0.0, sample1], 390 ["an1", 0.499, sample2], 391 ["an1", 0.5, sample3], 392 ["an1", 0.501, sample4], 393 ["an1", 0.999, sample5], 394 ["an1", 1.0, sample6], 395 ["an1", 1.001, sample7], 396 ["an1", 1.499, sample8], 397 ["an1", 1.5, sample9], 398 ["an1", 1.501, sample10], 399 ["an1", 1.999, sample11], 400 ["an1", 2.0, sample12], 401 ["an1", 2.001, sample13], 402 ["an1", 2.499, sample14], 403 ["an1", 2.5, sample15], 404 ["an1", 2.501, sample16], 405 ["an1", 2.999, sample17], 406 ["an1", 3.0, sample18], 407 ["an1", 3.001, sample19], 408 ["an1", 3.499, sample20], 409 ["an1", 3.5, sample21], 410 ["an1", 4.0, sample22], 411 ["an1", 9.0, sample23] 412 ]; 413 414 runAnimationTest(t, expectedValues); 415 }); 416 417 window.animationStartsImmediately = true; 418 419 </script>