| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <meta charset=utf-8> | 2 <meta charset=utf-8> |
| 3 <title>Effect-level easing tests</title> | 3 <title>Effect-level easing tests</title> |
| 4 <link rel="help" href="http://w3c.github.io/web-animations/#calculating-the-tran
sformed-time"> | 4 <link rel="help" href="http://w3c.github.io/web-animations/#calculating-the-tran
sformed-time"> |
| 5 <link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.o
rg"> | 5 <link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.o
rg"> |
| 6 <script src="../../../../resources/testharness.js"></script> | 6 <script src="../../../../resources/testharness.js"></script> |
| 7 <script src="../../../../resources/testharnessreport.js"></script> | 7 <script src="../../../../resources/testharnessreport.js"></script> |
| 8 <script src="../testcommon.js"></script> | 8 <script src="../testcommon.js"></script> |
| 9 <body> | 9 <body> |
| 10 <div id="log"></div> | 10 <div id="log"></div> |
| (...skipping 416 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 427 assert_style_left_at(anim, 770, function(x) { | 427 assert_style_left_at(anim, 770, function(x) { |
| 428 return easing(easing(x)) | 428 return easing(easing(x)) |
| 429 }); | 429 }); |
| 430 assert_style_left_at(anim, 1000, function(x) { | 430 assert_style_left_at(anim, 1000, function(x) { |
| 431 return easing(easing(x)) | 431 return easing(easing(x)) |
| 432 }); | 432 }); |
| 433 }, 'effect easing which produces negative values and the tangent on ' + | 433 }, 'effect easing which produces negative values and the tangent on ' + |
| 434 'the lower boundary is infinity with keyframe easing producing ' + | 434 'the lower boundary is infinity with keyframe easing producing ' + |
| 435 'negative values'); | 435 'negative values'); |
| 436 | 436 |
| 437 var gStepTimingFunctionTests = [ |
| 438 { |
| 439 description: 'Test bounds point of step-start easing', |
| 440 keyframe: [ { width: '0px' }, |
| 441 { width: '100px' } ], |
| 442 effect: { |
| 443 delay: 1000, |
| 444 duration: 1000, |
| 445 fill: 'both', |
| 446 easing: 'steps(2, start)' |
| 447 }, |
| 448 conditions: [ |
| 449 { currentTime: 0, progress: 0 }, |
| 450 { currentTime: 999, progress: 0 }, |
| 451 { currentTime: 1000, progress: 0.5 }, |
| 452 { currentTime: 1499, progress: 0.5 }, |
| 453 { currentTime: 1500, progress: 1 }, |
| 454 { currentTime: 2000, progress: 1 } |
| 455 ] |
| 456 }, |
| 457 { |
| 458 description: 'Test bounds point of step-start easing with compositor', |
| 459 keyframe: [ { opacity: 0 }, |
| 460 { opacity: 1 } ], |
| 461 effect: { |
| 462 delay: 1000, |
| 463 duration: 1000, |
| 464 fill: 'both', |
| 465 easing: 'steps(2, start)' |
| 466 }, |
| 467 conditions: [ |
| 468 { currentTime: 0, progress: 0 }, |
| 469 { currentTime: 999, progress: 0 }, |
| 470 { currentTime: 1000, progress: 0.5 }, |
| 471 { currentTime: 1499, progress: 0.5 }, |
| 472 { currentTime: 1500, progress: 1 }, |
| 473 { currentTime: 2000, progress: 1 } |
| 474 ] |
| 475 }, |
| 476 { |
| 477 description: 'Test bounds point of step-start easing with reverse direction'
, |
| 478 keyframe: [ { width: '0px' }, |
| 479 { width: '100px' } ], |
| 480 effect: { |
| 481 delay: 1000, |
| 482 duration: 1000, |
| 483 fill: 'both', |
| 484 direction: 'reverse', |
| 485 easing: 'steps(2, start)' |
| 486 }, |
| 487 conditions: [ |
| 488 { currentTime: 0, progress: 1 }, |
| 489 { currentTime: 1001, progress: 1 }, |
| 490 { currentTime: 1500, progress: 1 }, |
| 491 { currentTime: 1501, progress: 0.5 }, |
| 492 { currentTime: 2000, progress: 0 }, |
| 493 { currentTime: 2500, progress: 0 } |
| 494 ] |
| 495 }, |
| 496 { |
| 497 description: 'Test bounds point of step-start easing ' + |
| 498 'with iterationStart not at a transition point', |
| 499 keyframe: [ { width: '0px' }, |
| 500 { width: '100px' } ], |
| 501 effect: { |
| 502 delay: 1000, |
| 503 duration: 1000, |
| 504 fill: 'both', |
| 505 iterationStart: 0.25, |
| 506 easing: 'steps(2, start)' |
| 507 }, |
| 508 conditions: [ |
| 509 { currentTime: 0, progress: 0.5 }, |
| 510 { currentTime: 999, progress: 0.5 }, |
| 511 { currentTime: 1000, progress: 0.5 }, |
| 512 { currentTime: 1249, progress: 0.5 }, |
| 513 { currentTime: 1250, progress: 1 }, |
| 514 { currentTime: 1749, progress: 1 }, |
| 515 { currentTime: 1750, progress: 0.5 }, |
| 516 { currentTime: 2000, progress: 0.5 }, |
| 517 { currentTime: 2500, progress: 0.5 }, |
| 518 ] |
| 519 }, |
| 520 { |
| 521 description: 'Test bounds point of step-start easing ' + |
| 522 'with iterationStart and delay', |
| 523 keyframe: [ { width: '0px' }, |
| 524 { width: '100px' } ], |
| 525 effect: { |
| 526 delay: 1000, |
| 527 duration: 1000, |
| 528 fill: 'both', |
| 529 iterationStart: 0.5, |
| 530 easing: 'steps(2, start)' |
| 531 }, |
| 532 conditions: [ |
| 533 { currentTime: 0, progress: 0.5 }, |
| 534 { currentTime: 999, progress: 0.5 }, |
| 535 { currentTime: 1000, progress: 1 }, |
| 536 { currentTime: 1499, progress: 1 }, |
| 537 { currentTime: 1500, progress: 0.5 }, |
| 538 { currentTime: 2000, progress: 1 } |
| 539 ] |
| 540 }, |
| 541 { |
| 542 description: 'Test bounds point of step-start easing ' + |
| 543 'with iterationStart and reverse direction', |
| 544 keyframe: [ { width: '0px' }, |
| 545 { width: '100px' } ], |
| 546 effect: { |
| 547 delay: 1000, |
| 548 duration: 1000, |
| 549 fill: 'both', |
| 550 iterationStart: 0.5, |
| 551 direction: 'reverse', |
| 552 easing: 'steps(2, start)' |
| 553 }, |
| 554 conditions: [ |
| 555 { currentTime: 0, progress: 1 }, |
| 556 { currentTime: 1000, progress: 1 }, |
| 557 { currentTime: 1001, progress: 0.5 }, |
| 558 { currentTime: 1499, progress: 0.5 }, |
| 559 { currentTime: 1500, progress: 1 }, |
| 560 { currentTime: 1999, progress: 1 }, |
| 561 { currentTime: 2000, progress: 0.5 }, |
| 562 { currentTime: 2500, progress: 0.5 } |
| 563 ] |
| 564 }, |
| 565 { |
| 566 description: 'Test bounds point of step(4, start) easing ' + |
| 567 'with iterationStart 0.75 and delay', |
| 568 keyframe: [ { width: '0px' }, |
| 569 { width: '100px' } ], |
| 570 effect: { |
| 571 duration: 1000, |
| 572 fill: 'both', |
| 573 delay: 1000, |
| 574 iterationStart: 0.75, |
| 575 easing: 'steps(4, start)' |
| 576 }, |
| 577 conditions: [ |
| 578 { currentTime: 0, progress: 0.75 }, |
| 579 { currentTime: 999, progress: 0.75 }, |
| 580 { currentTime: 1000, progress: 1 }, |
| 581 { currentTime: 2000, progress: 1 }, |
| 582 { currentTime: 2500, progress: 1 } |
| 583 ] |
| 584 }, |
| 585 { |
| 586 description: 'Test bounds point of step-start easing ' + |
| 587 'with alternate direction', |
| 588 keyframe: [ { width: '0px' }, |
| 589 { width: '100px' } ], |
| 590 effect: { |
| 591 duration: 1000, |
| 592 fill: 'both', |
| 593 delay: 1000, |
| 594 iterations: 2, |
| 595 iterationStart: 1.5, |
| 596 direction: 'alternate', |
| 597 easing: 'steps(2, start)' |
| 598 }, |
| 599 conditions: [ |
| 600 { currentTime: 0, progress: 1 }, |
| 601 { currentTime: 1000, progress: 1 }, |
| 602 { currentTime: 1001, progress: 0.5 }, |
| 603 { currentTime: 2999, progress: 1 }, |
| 604 { currentTime: 3000, progress: 0.5 }, |
| 605 { currentTime: 3500, progress: 0.5 } |
| 606 ] |
| 607 }, |
| 608 { |
| 609 description: 'Test bounds point of step-start easing ' + |
| 610 'with alternate-reverse direction', |
| 611 keyframe: [ { width: '0px' }, |
| 612 { width: '100px' } ], |
| 613 effect: { |
| 614 duration: 1000, |
| 615 fill: 'both', |
| 616 delay: 1000, |
| 617 iterations: 2, |
| 618 iterationStart: 0.5, |
| 619 direction: 'alternate-reverse', |
| 620 easing: 'steps(2, start)' |
| 621 }, |
| 622 conditions: [ |
| 623 { currentTime: 0, progress: 1 }, |
| 624 { currentTime: 1000, progress: 1 }, |
| 625 { currentTime: 1001, progress: 0.5 }, |
| 626 { currentTime: 2999, progress: 1 }, |
| 627 { currentTime: 3000, progress: 0.5 }, |
| 628 { currentTime: 3500, progress: 0.5 } |
| 629 ] |
| 630 }, |
| 631 { |
| 632 description: 'Test bounds point of step-start easing in keyframe', |
| 633 keyframe: [ { width: '0px', easing: 'steps(2, start)' }, |
| 634 { width: '100px' } ], |
| 635 effect: { |
| 636 delay: 1000, |
| 637 duration: 1000, |
| 638 fill: 'both', |
| 639 }, |
| 640 conditions: [ |
| 641 { currentTime: 0, progress: 0, width: '0px' }, |
| 642 { currentTime: 999, progress: 0, width: '0px' }, |
| 643 { currentTime: 1000, progress: 0, width: '50px' }, |
| 644 { currentTime: 1499, progress: 0.499, width: '50px' }, |
| 645 { currentTime: 1500, progress: 0.5, width: '100px' }, |
| 646 { currentTime: 2000, progress: 1, width: '100px' }, |
| 647 { currentTime: 2500, progress: 1, width: '100px' } |
| 648 ] |
| 649 }, |
| 650 { |
| 651 description: 'Test bounds point of step-end easing ' + |
| 652 'with iterationStart and delay', |
| 653 keyframe: [ { width: '0px' }, |
| 654 { width: '100px' } ], |
| 655 effect: { |
| 656 duration: 1000, |
| 657 fill: 'both', |
| 658 delay: 1000, |
| 659 iterationStart: 0.5, |
| 660 easing: 'steps(2, end)' |
| 661 }, |
| 662 conditions: [ |
| 663 { currentTime: 0, progress: 0 }, |
| 664 { currentTime: 999, progress: 0 }, |
| 665 { currentTime: 1000, progress: 0.5 }, |
| 666 { currentTime: 1499, progress: 0.5 }, |
| 667 { currentTime: 1500, progress: 0 }, |
| 668 { currentTime: 1999, progress: 0 }, |
| 669 { currentTime: 2000, progress: 0.5 }, |
| 670 { currentTime: 2500, progress: 0.5 } |
| 671 ] |
| 672 }, |
| 673 { |
| 674 description: 'Test bounds point of step-end easing ' + |
| 675 'with iterationStart not at a transition point', |
| 676 keyframe: [ { width: '0px' }, |
| 677 { width: '100px' } ], |
| 678 effect: { |
| 679 delay: 1000, |
| 680 duration: 1000, |
| 681 fill: 'both', |
| 682 iterationStart: 0.75, |
| 683 easing: 'steps(2, end)' |
| 684 }, |
| 685 conditions: [ |
| 686 { currentTime: 0, progress: 0.5 }, |
| 687 { currentTime: 999, progress: 0.5 }, |
| 688 { currentTime: 1000, progress: 0.5 }, |
| 689 { currentTime: 1249, progress: 0.5 }, |
| 690 { currentTime: 1250, progress: 0 }, |
| 691 { currentTime: 1749, progress: 0 }, |
| 692 { currentTime: 1750, progress: 0.5 }, |
| 693 { currentTime: 2000, progress: 0.5 }, |
| 694 { currentTime: 2500, progress: 0.5 }, |
| 695 ] |
| 696 } |
| 697 ] |
| 698 |
| 699 gStepTimingFunctionTests.forEach(function(options) { |
| 700 test(function(t) { |
| 701 var target = createDiv(t); |
| 702 var animation = target.animate(options.keyframe, options.effect); |
| 703 options.conditions.forEach(function(condition) { |
| 704 animation.currentTime = condition.currentTime; |
| 705 if (typeof condition.progress !== 'undefined') { |
| 706 assert_equals(animation.effect.getComputedTiming().progress, |
| 707 condition.progress, |
| 708 'Progress at ' + animation.currentTime + 'ms'); |
| 709 } |
| 710 if (typeof condition.width !== 'undefined') { |
| 711 assert_equals(getComputedStyle(target).width, |
| 712 condition.width, |
| 713 'Progress at ' + animation.currentTime + 'ms'); |
| 714 } |
| 715 }); |
| 716 }, options.description); |
| 717 }); |
| 718 |
| 437 </script> | 719 </script> |
| 438 </body> | 720 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1899623002:
Import latest web-platform-tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master