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