current-iteration.html (12961B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Current iteration</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#current-iteration"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <script src="../../resources/effect-tests.js"></script> 9 <body> 10 <div id="log"></div> 11 <script> 12 'use strict'; 13 14 function runTests(tests, description) { 15 for (const currentTest of tests) { 16 let testParams = Object.entries(currentTest.input) 17 .map(([attr, value]) => `${attr}:${value}`) 18 .join(' '); 19 if (currentTest.playbackRate !== undefined) { 20 testParams += ` playbackRate:${currentTest.playbackRate}`; 21 } 22 23 test(t => { 24 const div = createDiv(t); 25 const anim = div.animate({}, currentTest.input); 26 if (currentTest.playbackRate !== undefined) { 27 anim.playbackRate = currentTest.playbackRate; 28 } 29 30 assert_computed_timing_for_each_phase( 31 anim, 32 'currentIteration', 33 { before: currentTest.before, 34 activeBoundary: currentTest.active, 35 after: currentTest.after }, 36 ); 37 }, `${description}: ${testParams}`); 38 } 39 } 40 41 async_test(t => { 42 const div = createDiv(t); 43 const anim = div.animate({ opacity: [ 0, 1 ] }, { delay: 1 }); 44 assert_equals(anim.effect.getComputedTiming().currentIteration, null); 45 anim.finished.then(t.step_func(() => { 46 assert_equals(anim.effect.getComputedTiming().currentIteration, null); 47 t.done(); 48 })); 49 }, 'Test currentIteration during before and after phase when fill is none'); 50 51 52 // -------------------------------------------------------------------- 53 // 54 // Zero iteration duration tests 55 // 56 // -------------------------------------------------------------------- 57 58 runTests([ 59 { 60 input: { iterations: 0, 61 iterationStart: 0, 62 duration: 0, 63 delay: 1, 64 fill: 'both' }, 65 before: 0, 66 after: 0 67 }, 68 69 { 70 input: { iterations: 0, 71 iterationStart: 0, 72 duration: 100, 73 delay: 1, 74 fill: 'both' }, 75 before: 0, 76 after: 0 77 }, 78 79 { 80 input: { iterations: 0, 81 iterationStart: 0, 82 duration: Infinity, 83 delay: 1, 84 fill: 'both' }, 85 before: 0, 86 after: 0 87 }, 88 89 { 90 input: { iterations: 0, 91 iterationStart: 2.5, 92 duration: 0, 93 delay: 1, 94 fill: 'both' }, 95 before: 2, 96 after: 2 97 }, 98 99 { 100 input: { iterations: 0, 101 iterationStart: 2.5, 102 duration: 100, 103 delay: 1, 104 fill: 'both' }, 105 before: 2, 106 after: 2 107 }, 108 109 { 110 input: { iterations: 0, 111 iterationStart: 2.5, 112 duration: Infinity, 113 delay: 1, 114 fill: 'both' }, 115 before: 2, 116 after: 2 117 }, 118 119 { 120 input: { iterations: 0, 121 iterationStart: 3, 122 duration: 0, 123 delay: 1, 124 fill: 'both' }, 125 before: 3, 126 after: 3 127 }, 128 129 { 130 input: { iterations: 0, 131 iterationStart: 3, 132 duration: 100, 133 delay: 1, 134 fill: 'both' }, 135 before: 3, 136 after: 3 137 }, 138 139 { 140 input: { iterations: 0, 141 iterationStart: 3, 142 duration: Infinity, 143 delay: 1, 144 fill: 'both' }, 145 before: 3, 146 after: 3 147 } 148 ], 'Test zero iterations'); 149 150 151 // -------------------------------------------------------------------- 152 // 153 // Tests where the iteration count is an integer 154 // 155 // -------------------------------------------------------------------- 156 157 runTests([ 158 { 159 input: { iterations: 3, 160 iterationStart: 0, 161 duration: 0, 162 delay: 1, 163 fill: 'both' }, 164 before: 0, 165 after: 2 166 }, 167 168 { 169 input: { iterations: 3, 170 iterationStart: 0, 171 duration: 100, 172 delay: 1, 173 fill: 'both' }, 174 before: 0, 175 active: 0, 176 after: 2 177 }, 178 179 { 180 input: { iterations: 3, 181 iterationStart: 0, 182 duration: Infinity, 183 delay: 1, 184 fill: 'both' }, 185 before: 0, 186 active: 0 187 }, 188 189 { 190 input: { iterations: 3, 191 iterationStart: 2.5, 192 duration: 0, 193 delay: 1, 194 fill: 'both' }, 195 before: 2, 196 after: 5 197 }, 198 199 { 200 input: { iterations: 3, 201 iterationStart: 2.5, 202 duration: 100, 203 delay: 1, 204 fill: 'both' }, 205 before: 2, 206 active: 2, 207 after: 5 208 }, 209 210 { 211 input: { iterations: 3, 212 iterationStart: 2.5, 213 duration: Infinity, 214 delay: 1, 215 fill: 'both' }, 216 before: 2, 217 active: 2 218 }, 219 220 { 221 input: { iterations: 3, 222 iterationStart: 3, 223 duration: 0, 224 delay: 1, 225 fill: 'both' }, 226 before: 3, 227 after: 5 228 }, 229 230 { 231 input: { iterations: 3, 232 iterationStart: 3, 233 duration: 100, 234 delay: 1, 235 fill: 'both' }, 236 before: 3, 237 active: 3, 238 after: 5 239 }, 240 241 { 242 input: { iterations: 3, 243 iterationStart: 3, 244 duration: Infinity, 245 delay: 1, 246 fill: 'both' }, 247 before: 3, 248 active: 3 249 } 250 ], 'Test integer iterations'); 251 252 253 // -------------------------------------------------------------------- 254 // 255 // Tests where the iteration count is a fraction 256 // 257 // -------------------------------------------------------------------- 258 259 runTests([ 260 { 261 input: { iterations: 3.5, 262 iterationStart: 0, 263 duration: 0, 264 delay: 1, 265 fill: 'both' }, 266 before: 0, 267 after: 3 268 }, 269 270 { 271 input: { iterations: 3.5, 272 iterationStart: 0, 273 duration: 100, 274 delay: 1, 275 fill: 'both' }, 276 before: 0, 277 active: 0, 278 after: 3 279 }, 280 281 { 282 input: { iterations: 3.5, 283 iterationStart: 0, 284 duration: Infinity, 285 delay: 1, 286 fill: 'both' }, 287 before: 0, 288 active: 0 289 }, 290 291 { 292 input: { iterations: 3.5, 293 iterationStart: 2.5, 294 duration: 0, 295 delay: 1, 296 fill: 'both' }, 297 before: 2, 298 after: 5 299 }, 300 301 { 302 input: { iterations: 3.5, 303 iterationStart: 2.5, 304 duration: 100, 305 delay: 1, 306 fill: 'both' }, 307 before: 2, 308 active: 2, 309 after: 5 310 }, 311 312 { 313 input: { iterations: 3.5, 314 iterationStart: 2.5, 315 duration: Infinity, 316 delay: 1, 317 fill: 'both' }, 318 before: 2, 319 active: 2 320 }, 321 322 { 323 input: { iterations: 3.5, 324 iterationStart: 3, 325 duration: 0, 326 delay: 1, 327 fill: 'both' }, 328 before: 3, 329 after: 6 330 }, 331 332 { 333 input: { iterations: 3.5, 334 iterationStart: 3, 335 duration: 100, 336 delay: 1, 337 fill: 'both' }, 338 before: 3, 339 active: 3, 340 after: 6 341 }, 342 343 { 344 input: { iterations: 3.5, 345 iterationStart: 3, 346 duration: Infinity, 347 delay: 1, 348 fill: 'both' }, 349 before: 3, 350 active: 3 351 } 352 ], 'Test fractional iterations'); 353 354 355 // -------------------------------------------------------------------- 356 // 357 // Tests where the iteration count is Infinity 358 // 359 // -------------------------------------------------------------------- 360 361 runTests([ 362 { 363 input: { iterations: Infinity, 364 iterationStart: 0, 365 duration: 0, 366 delay: 1, 367 fill: 'both' }, 368 before: 0, 369 after: Infinity 370 }, 371 372 { 373 input: { iterations: Infinity, 374 iterationStart: 0, 375 duration: 100, 376 delay: 1, 377 fill: 'both' }, 378 before: 0, 379 active: 0 380 }, 381 382 { 383 input: { iterations: Infinity, 384 iterationStart: 0, 385 duration: Infinity, 386 delay: 1, 387 fill: 'both' }, 388 before: 0, 389 active: 0 390 }, 391 392 { 393 input: { iterations: Infinity, 394 iterationStart: 2.5, 395 duration: 0, 396 delay: 1, 397 fill: 'both' }, 398 before: 2, 399 after: Infinity 400 }, 401 402 { 403 input: { iterations: Infinity, 404 iterationStart: 2.5, 405 duration: 100, 406 delay: 1, 407 fill: 'both' }, 408 before: 2, 409 active: 2 410 }, 411 412 { 413 input: { iterations: Infinity, 414 iterationStart: 2.5, 415 duration: Infinity, 416 delay: 1, 417 fill: 'both' }, 418 before: 2, 419 active: 2 420 }, 421 422 { 423 input: { iterations: Infinity, 424 iterationStart: 3, 425 duration: 0, 426 delay: 1, 427 fill: 'both' }, 428 before: 3, 429 after: Infinity 430 }, 431 432 { 433 input: { iterations: Infinity, 434 iterationStart: 3, 435 duration: 100, 436 delay: 1, 437 fill: 'both' }, 438 before: 3, 439 active: 3 440 }, 441 442 { 443 input: { iterations: Infinity, 444 iterationStart: 3, 445 duration: Infinity, 446 delay: 1, 447 fill: 'both' }, 448 before: 3, 449 active: 3 450 } 451 ], 'Test infinity iterations'); 452 453 454 // -------------------------------------------------------------------- 455 // 456 // End delay tests 457 // 458 // -------------------------------------------------------------------- 459 460 runTests([ 461 { 462 input: { duration: 100, 463 delay: 1, 464 fill: 'both', 465 endDelay: 50 }, 466 before: 0, 467 active: 0, 468 after: 0 469 }, 470 471 { 472 input: { duration: 100, 473 delay: 1, 474 fill: 'both', 475 endDelay: -50 }, 476 before: 0, 477 active: 0, 478 after: 0 479 }, 480 481 { 482 input: { duration: 100, 483 delay: 1, 484 fill: 'both', 485 endDelay: -100 }, 486 before: 0, 487 active: 0, 488 after: 0 489 }, 490 491 { 492 input: { duration: 100, 493 delay: 1, 494 fill: 'both', 495 endDelay: -200 }, 496 before: 0, 497 active: 0, 498 after: 0 499 }, 500 501 { 502 input: { iterationStart: 0.5, 503 duration: 100, 504 delay: 1, 505 fill: 'both', 506 endDelay: 50 }, 507 before: 0, 508 active: 0, 509 after: 1 510 }, 511 512 { 513 input: { iterationStart: 0.5, 514 duration: 100, 515 delay: 1, 516 fill: 'both', 517 endDelay: -50 }, 518 before: 0, 519 active: 0, 520 after: 1 521 }, 522 523 { 524 input: { iterationStart: 0.5, 525 duration: 100, 526 delay: 1, 527 fill: 'both', 528 endDelay: -100 }, 529 before: 0, 530 active: 0, 531 after: 0 532 }, 533 534 { 535 input: { iterations: 2, 536 duration: 100, 537 delay: 1, 538 fill: 'both', 539 endDelay: -100 }, 540 before: 0, 541 active: 0, 542 after: 1 543 }, 544 545 { 546 input: { iterations: 1, 547 iterationStart: 2, 548 duration: 100, 549 delay: 1, 550 fill: 'both', 551 endDelay: -50 }, 552 before: 2, 553 active: 2, 554 after: 2 555 }, 556 557 { 558 input: { iterations: 1, 559 iterationStart: 2, 560 duration: 100, 561 delay: 1, 562 fill: 'both', 563 endDelay: -100 }, 564 before: 2, 565 active: 2, 566 after: 2 567 }, 568 ], 'Test end delay'); 569 570 571 // -------------------------------------------------------------------- 572 // 573 // Negative playback rate tests 574 // 575 // -------------------------------------------------------------------- 576 577 runTests([ 578 { 579 input: { duration: 1, 580 delay: 1, 581 fill: 'both' }, 582 playbackRate: -1, 583 before: 0, 584 active: 0, 585 after: 0 586 }, 587 588 { 589 input: { duration: 1, 590 delay: 1, 591 iterations: 2, 592 fill: 'both' }, 593 playbackRate: -1, 594 before: 0, 595 active: 1, 596 after: 1 597 }, 598 599 { 600 input: { duration: 0, 601 delay: 1, 602 fill: 'both' }, 603 playbackRate: -1, 604 before: 0, 605 after: 0 606 }, 607 608 { 609 input: { duration: 0, 610 iterations: 0, 611 delay: 1, 612 fill: 'both' }, 613 playbackRate: -1, 614 before: 0, 615 after: 0 616 }, 617 ], 'Test negative playback rate'); 618 619 </script> 620 </body>