| OLD | NEW |
|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <meta charset=utf-8> | 2 <meta charset=utf-8> |
| 3 <title>KeyframeEffect.iterationComposite tests</title> | 3 <title>KeyframeEffect.iterationComposite tests</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation
-section"> | 4 <link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation
-section"> |
| 5 <script src=/resources/testharness.js></script> | 5 <script src=/resources/testharness.js></script> |
| 6 <script src=/resources/testharnessreport.js></script> | 6 <script src=/resources/testharnessreport.js></script> |
| 7 <script src="../../testcommon.js"></script> | 7 <script src="../../testcommon.js"></script> |
| 8 <div id="log"></div> | 8 <div id="log"></div> |
| 9 <script> | 9 <script> |
| 10 'use strict'; | 10 'use strict'; |
| 11 | 11 |
| 12 test(function(t) { | 12 test(function(t) { |
| 13 var div = createDiv(t); | 13 var div = createDiv(t); |
| 14 var anim = | 14 var anim = |
| 15 div.animate({ alignContent: ['flex-start', 'flex-end'] }, |
| 16 { duration: 100 * MS_PER_SEC, |
| 17 easing: 'linear', |
| 18 iterations: 10, |
| 19 iterationComposite: 'accumulate' }); |
| 20 |
| 21 anim.currentTime = anim.effect.timing.duration / 2; |
| 22 assert_equals(getComputedStyle(div).alignContent, 'flex-end', |
| 23 'Animated align-content style at 50s of the first iteration'); |
| 24 anim.currentTime = anim.effect.timing.duration * 2; |
| 25 assert_equals(getComputedStyle(div).alignContent, 'flex-start', |
| 26 'Animated align-content style at 0s of the third iteration'); |
| 27 anim.currentTime += anim.effect.timing.duration / 2; |
| 28 assert_equals(getComputedStyle(div).alignContent, 'flex-end', |
| 29 'Animated align-content style at 50s of the third iteration'); |
| 30 }, 'iterationComposite of discrete type animation (align-content)'); |
| 31 |
| 32 test(function(t) { |
| 33 var div = createDiv(t); |
| 34 var anim = |
| 15 div.animate({ marginLeft: ['0px', '10px'] }, | 35 div.animate({ marginLeft: ['0px', '10px'] }, |
| 16 { duration: 100 * MS_PER_SEC, | 36 { duration: 100 * MS_PER_SEC, |
| 17 easing: 'linear', | 37 easing: 'linear', |
| 18 iterations: 10, | 38 iterations: 10, |
| 19 iterationComposite: 'accumulate' }); | 39 iterationComposite: 'accumulate' }); |
| 20 anim.pause(); | 40 anim.pause(); |
| 21 | 41 |
| 22 anim.currentTime = anim.effect.timing.duration / 2; | 42 anim.currentTime = anim.effect.timing.duration / 2; |
| 23 assert_equals(getComputedStyle(div).marginLeft, '5px', | 43 assert_equals(getComputedStyle(div).marginLeft, '5px', |
| 24 'Animated margin-left style at 50s of the first iteration'); | 44 'Animated margin-left style at 50s of the first iteration'); |
| (...skipping 509 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 534 'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px) | 554 'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px) |
| 535 'Animated transform list at 0s of the third iteration'); | 555 'Animated transform list at 0s of the third iteration'); |
| 536 anim.currentTime += anim.effect.timing.duration / 2; | 556 anim.currentTime += anim.effect.timing.duration / 2; |
| 537 assert_equals(getComputedStyle(div).transform, | 557 assert_equals(getComputedStyle(div).transform, |
| 538 'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px) | 558 'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px) |
| 539 'Animated transform list at 50s of the third iteration'); | 559 'Animated transform list at 50s of the third iteration'); |
| 540 }, 'iterationComposite of transform list animation'); | 560 }, 'iterationComposite of transform list animation'); |
| 541 | 561 |
| 542 test(function(t) { | 562 test(function(t) { |
| 543 var div = createDiv(t); | 563 var div = createDiv(t); |
| 544 // The transform list whose order is mismatched is compounded, | 564 var anim = |
| 545 // so below animation is the same as; | 565 div.animate({ transform: ['matrix(2, 0, 0, 2, 0, 0)', |
| 546 // from matrix(2, 0, 0, 2, 0, 0) to matrix(3, 0, 0, 3, 30, 0) | 566 'matrix(3, 0, 0, 3, 30, 0)'] }, |
| 567 { duration: 100 * MS_PER_SEC, |
| 568 easing: 'linear', |
| 569 iterations: 10, |
| 570 iterationComposite: 'accumulate' }); |
| 571 anim.pause(); |
| 572 |
| 573 anim.currentTime = anim.effect.timing.duration / 2; |
| 574 assert_equals(getComputedStyle(div).transform, |
| 575 'matrix(2.5, 0, 0, 2.5, 15, 0)', |
| 576 'Animated transform of matrix function at 50s of the first iteration'); |
| 577 anim.currentTime = anim.effect.timing.duration * 2; |
| 578 assert_equals(getComputedStyle(div).transform, |
| 579 // scale(2) + (scale(3-1)*2) + translateX(30px)*2 |
| 580 'matrix(6, 0, 0, 6, 60, 0)', |
| 581 'Animated transform of matrix function at 0s of the third iteration'); |
| 582 anim.currentTime += anim.effect.timing.duration / 2; |
| 583 assert_equals(getComputedStyle(div).transform, |
| 584 // from: matrix(6, 0, 0, 6, 60, 0) |
| 585 // to: matrix(7, 0, 0, 7, 90, 0) |
| 586 // = scale(3) + (scale(3-1)*2) + translateX(30px)*3 |
| 587 'matrix(6.5, 0, 0, 6.5, 75, 0)', |
| 588 'Animated transform of matrix function at 50s of the third iteration'); |
| 589 }, 'iterationComposite of transform of matrix function'); |
| 590 |
| 591 test(function(t) { |
| 592 var div = createDiv(t); |
| 547 var anim = | 593 var anim = |
| 548 div.animate({ transform: ['translateX(0px) scale(2)', | 594 div.animate({ transform: ['translateX(0px) scale(2)', |
| 549 'scale(3) translateX(10px)'] }, | 595 'scale(3) translateX(10px)'] }, |
| 550 { duration: 100 * MS_PER_SEC, | 596 { duration: 100 * MS_PER_SEC, |
| 551 easing: 'linear', | 597 easing: 'linear', |
| 552 iterations: 10, | 598 iterations: 10, |
| 553 iterationComposite: 'accumulate' }); | 599 iterationComposite: 'accumulate' }); |
| 554 anim.pause(); | 600 anim.pause(); |
| 555 | 601 |
| 556 anim.currentTime = anim.effect.timing.duration / 2; | 602 anim.currentTime = anim.effect.timing.duration / 2; |
| 557 assert_equals(getComputedStyle(div).transform, | 603 assert_equals(getComputedStyle(div).transform, |
| 558 'matrix(2.5, 0, 0, 2.5, 15, 0)', // scale(2.5) (0px + 30px*2) / 2 | 604 // Interpolate between matrix(2, 0, 0, 2, 0, 0) = translateX(0px) scale(2) |
| 605 // and matrix(3, 0, 0, 3, 30, 0) = scale(3) translateX(10px) |
| 606 'matrix(2.5, 0, 0, 2.5, 15, 0)', |
| 559 'Animated transform list at 50s of the first iteration'); | 607 'Animated transform list at 50s of the first iteration'); |
| 560 anim.currentTime = anim.effect.timing.duration * 2; | 608 anim.currentTime = anim.effect.timing.duration * 2; |
| 561 assert_equals(getComputedStyle(div).transform, | 609 assert_equals(getComputedStyle(div).transform, |
| 562 'matrix(4, 0, 0, 4, 60, 0)', // scale(2+(3-2)*2) (0px + 30px*2) | 610 // 'from' and 'to' value are mismatched, so accumulate |
| 611 // matrix(2, 0, 0, 2, 0, 0) onto matrix(3, 0, 0, 3, 30, 0) * 2 |
| 612 // = scale(2) + (scale(3-1)*2) + translateX(30px)*2 |
| 613 'matrix(6, 0, 0, 6, 60, 0)', |
| 563 'Animated transform list at 0s of the third iteration'); | 614 'Animated transform list at 0s of the third iteration'); |
| 564 anim.currentTime += anim.effect.timing.duration / 2; | 615 anim.currentTime += anim.effect.timing.duration / 2; |
| 565 assert_equals(getComputedStyle(div).transform, | 616 assert_equals(getComputedStyle(div).transform, |
| 566 'matrix(5.5, 0, 0, 5.5, 135, 0)', // scale(4+7)/2 (60px + 210px) | 617 // Interpolate between matrix(6, 0, 0, 6, 60, 0) |
| 618 // and matrix(7, 0, 0, 7, 210, 0) = scale(7) translate(30px) |
| 619 'matrix(6.5, 0, 0, 6.5, 135, 0)', |
| 567 'Animated transform list at 50s of the third iteration'); | 620 'Animated transform list at 50s of the third iteration'); |
| 568 }, 'iterationComposite of transform list animation whose order is mismatched'); | 621 }, 'iterationComposite of transform list animation whose order is mismatched'); |
| 569 | 622 |
| 570 test(function(t) { | 623 test(function(t) { |
| 571 var div = createDiv(t); | 624 var div = createDiv(t); |
| 572 // Even if each transform list does not have functions which exist in | 625 // Even if each transform list does not have functions which exist in |
| 573 // other pair of the list, we don't fill any missing functions at all, | 626 // other pair of the list, we don't fill any missing functions at all. |
| 574 // it's just computed as compounded matrices | |
| 575 // Below animation is the same as; | |
| 576 // from matrix(1, 0, 0, 1, 0, 0) to matrix(2, 0, 0, 2, 20, 0) | |
| 577 var anim = | 627 var anim = |
| 578 div.animate({ transform: ['translateX(0px)', | 628 div.animate({ transform: ['translateX(0px)', |
| 579 'scale(2) translateX(10px)'] }, | 629 'scale(2) translateX(10px)'] }, |
| 580 { duration: 100 * MS_PER_SEC, | 630 { duration: 100 * MS_PER_SEC, |
| 581 easing: 'linear', | 631 easing: 'linear', |
| 582 iterations: 10, | 632 iterations: 10, |
| 583 iterationComposite: 'accumulate' }); | 633 iterationComposite: 'accumulate' }); |
| 584 anim.pause(); | 634 anim.pause(); |
| 585 | 635 |
| 586 anim.currentTime = anim.effect.timing.duration / 2; | 636 anim.currentTime = anim.effect.timing.duration / 2; |
| 587 assert_equals(getComputedStyle(div).transform, | 637 assert_equals(getComputedStyle(div).transform, |
| 588 'matrix(1.5, 0, 0, 1.5, 10, 0)', // scale(1.5) (0px + 10px*2) / 2 | 638 // Interpolate between matrix(1, 0, 0, 1, 0, 0) = translateX(0px) |
| 639 // and matrix(2, 0, 0, 2, 20, 0) = scale(2) translateX(10px) |
| 640 'matrix(1.5, 0, 0, 1.5, 10, 0)', |
| 589 'Animated transform list at 50s of the first iteration'); | 641 'Animated transform list at 50s of the first iteration'); |
| 590 anim.currentTime = anim.effect.timing.duration * 2; | 642 anim.currentTime = anim.effect.timing.duration * 2; |
| 591 assert_equals(getComputedStyle(div).transform, | 643 assert_equals(getComputedStyle(div).transform, |
| 592 'matrix(3, 0, 0, 3, 40, 0)', // scale(1+(2-1)*2) (0px + 20px*2) | 644 // 'from' and 'to' value are mismatched, so accumulate |
| 645 // matrix(1, 0, 0, 1, 0, 0) onto matrix(2, 0, 0, 2, 20, 0) * 2 |
| 646 // = scale(1) + (scale(2-1)*2) + translateX(20px)*2 |
| 647 'matrix(3, 0, 0, 3, 40, 0)', |
| 593 'Animated transform list at 0s of the third iteration'); | 648 'Animated transform list at 0s of the third iteration'); |
| 594 anim.currentTime += anim.effect.timing.duration / 2; | 649 anim.currentTime += anim.effect.timing.duration / 2; |
| 595 assert_equals(getComputedStyle(div).transform, | 650 assert_equals(getComputedStyle(div).transform, |
| 596 'matrix(3.5, 0, 0, 3.5, 80, 0)', // scale(3+4)/2 (40px + 20px) | 651 // Interpolate between matrix(3, 0, 0, 3, 40, 0) |
| 652 // and matrix(4, 0, 0, 4, 120, 0) = |
| 653 // scale(2 + (2-1)*2) translate(10px * 3) |
| 654 'matrix(3.5, 0, 0, 3.5, 80, 0)', |
| 597 'Animated transform list at 50s of the third iteration'); | 655 'Animated transform list at 50s of the third iteration'); |
| 598 }, 'iterationComposite of transform list animation whose order is mismatched'); | 656 }, 'iterationComposite of transform list animation whose order is mismatched ' + |
| 657 'because of missing functions'); |
| 599 | 658 |
| 600 test(function(t) { | 659 test(function(t) { |
| 601 var div = createDiv(t); | 660 var div = createDiv(t); |
| 661 var anim = |
| 662 div.animate({ transform: ['none', |
| 663 'translateX(10px)'] }, |
| 664 { duration: 100 * MS_PER_SEC, |
| 665 easing: 'linear', |
| 666 iterations: 10, |
| 667 iterationComposite: 'accumulate' }); |
| 668 anim.pause(); |
| 669 |
| 670 anim.currentTime = anim.effect.timing.duration / 2; |
| 671 assert_equals(getComputedStyle(div).transform, |
| 672 'matrix(1, 0, 0, 1, 5, 0)', // (0px + 10px) / 2 |
| 673 'Animated transform list at 50s of the first iteration'); |
| 674 anim.currentTime = anim.effect.timing.duration * 2; |
| 675 assert_equals(getComputedStyle(div).transform, |
| 676 'matrix(1, 0, 0, 1, 0, 0)', // 'none' overrides any transforms. |
| 677 'Animated transform list at 0s of the third iteration'); |
| 678 anim.currentTime += anim.effect.timing.duration / 2; |
| 679 assert_equals(getComputedStyle(div).transform, |
| 680 'matrix(1, 0, 0, 1, 15, 0)', // (0px + 10px*2)/2 |
| 681 'Animated transform list at 50s of the third iteration'); |
| 682 }, 'iterationComposite of transform from none to translate'); |
| 683 |
| 684 test(function(t) { |
| 685 var div = createDiv(t); |
| 686 var anim = |
| 687 div.animate({ transform: ['matrix3d(1, 0, 0, 0, ' + |
| 688 '0, 1, 0, 0, ' + |
| 689 '0, 0, 1, 0, ' + |
| 690 '0, 0, 30, 1)', |
| 691 'matrix3d(1, 0, 0, 0, ' + |
| 692 '0, 1, 0, 0, ' + |
| 693 '0, 0, 1, 0, ' + |
| 694 '0, 0, 50, 1)'] }, |
| 695 { duration: 100 * MS_PER_SEC, |
| 696 easing: 'linear', |
| 697 iterations: 10, |
| 698 iterationComposite: 'accumulate' }); |
| 699 anim.pause(); |
| 700 |
| 701 anim.currentTime = anim.effect.timing.duration / 2; |
| 702 assert_equals(getComputedStyle(div).transform, |
| 703 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 40, 1)', |
| 704 'Animated transform of matrix3d function at 50s of the first iteration'); |
| 705 anim.currentTime = anim.effect.timing.duration * 2; |
| 706 assert_equals(getComputedStyle(div).transform, |
| 707 // translateZ(30px) + (translateZ(50px)*2) |
| 708 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1)', |
| 709 'Animated transform of matrix3d function at 0s of the third iteration'); |
| 710 anim.currentTime += anim.effect.timing.duration / 2; |
| 711 assert_equals(getComputedStyle(div).transform, |
| 712 // from: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 130, 1) |
| 713 // to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 150, 1) |
| 714 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 140, 1)', |
| 715 'Animated transform of matrix3d function at 50s of the third iteration'); |
| 716 }, 'iterationComposite of transform of matrix3d function'); |
| 717 |
| 718 test(function(t) { |
| 719 var div = createDiv(t); |
| 720 var anim = |
| 721 div.animate({ transform: ['rotate3d(1, 1, 0, 0deg)', |
| 722 'rotate3d(1, 1, 0, 90deg)'] }, |
| 723 { duration: 100 * MS_PER_SEC, |
| 724 easing: 'linear', |
| 725 iterations: 10, |
| 726 iterationComposite: 'accumulate' }); |
| 727 anim.pause(); |
| 728 |
| 729 anim.currentTime = 0; |
| 730 assert_equals(getComputedStyle(div).transform, |
| 731 'matrix(1, 0, 0, 1, 0, 0)', // Actually not rotated at all. |
| 732 'Animated transform of rotate3d function at 50s of the first iteration'); |
| 733 anim.currentTime = anim.effect.timing.duration * 2; |
| 734 assert_matrix_equals(getComputedStyle(div).transform, |
| 735 rotate3dToMatrix3d(1, 1, 0, Math.PI), // 180deg |
| 736 'Animated transform of rotate3d function at 0s of the third iteration'); |
| 737 anim.currentTime += anim.effect.timing.duration / 2; |
| 738 assert_matrix_equals(getComputedStyle(div).transform, |
| 739 rotate3dToMatrix3d(1, 1, 0, 225 * Math.PI / 180), //((270 + 180) * 0.5)deg |
| 740 'Animated transform of rotate3d function at 50s of the third iteration'); |
| 741 }, 'iterationComposite of transform of rotate3d function'); |
| 742 |
| 743 test(function(t) { |
| 744 var div = createDiv(t); |
| 602 var anim = | 745 var anim = |
| 603 div.animate({ marginLeft: ['10px', '20px'] }, | 746 div.animate({ marginLeft: ['10px', '20px'] }, |
| 604 { duration: 100 * MS_PER_SEC, | 747 { duration: 100 * MS_PER_SEC, |
| 605 easing: 'linear', | 748 easing: 'linear', |
| 606 iterations: 10, | 749 iterations: 10, |
| 607 iterationComposite: 'accumulate' }); | 750 iterationComposite: 'accumulate' }); |
| 608 anim.pause(); | 751 anim.pause(); |
| 609 | 752 |
| 610 anim.currentTime = anim.effect.timing.duration / 2; | 753 anim.currentTime = anim.effect.timing.duration / 2; |
| 611 assert_equals(getComputedStyle(div).marginLeft, '15px', | 754 assert_equals(getComputedStyle(div).marginLeft, '15px', |
| (...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 684 assert_equals(getComputedStyle(div).marginLeft, '12.5px', | 827 assert_equals(getComputedStyle(div).marginLeft, '12.5px', |
| 685 'Animated style at 25s of the first iteration'); | 828 'Animated style at 25s of the first iteration'); |
| 686 | 829 |
| 687 // half of original. | 830 // half of original. |
| 688 anim.effect.timing.duration = anim.effect.timing.duration / 4; | 831 anim.effect.timing.duration = anim.effect.timing.duration / 4; |
| 689 assert_equals(getComputedStyle(div).marginLeft, '50px', | 832 assert_equals(getComputedStyle(div).marginLeft, '50px', |
| 690 'Animated style at 50s of the fourth iteration'); | 833 'Animated style at 50s of the fourth iteration'); |
| 691 }, 'duration changes with iterationComposite(accumulate)'); | 834 }, 'duration changes with iterationComposite(accumulate)'); |
| 692 | 835 |
| 693 </script> | 836 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2610243002:
Import wpt@5e1a3b80cea8d36774d2afd78b29a74792e9f15a (Closed)
