| 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 <script src="../resources/effect-easing-tests.js"></script> |
| 9 <body> | 10 <body> |
| 10 <div id="log"></div> | 11 <div id="log"></div> |
| 11 <div id="target"></div> | 12 <div id="target"></div> |
| 12 <script> | 13 <script> |
| 13 "use strict"; | 14 "use strict"; |
| 14 | 15 |
| 15 function assert_style_left_at(animation, time, easingFunction) { | 16 function assert_style_left_at(animation, time, easingFunction) { |
| 16 animation.currentTime = time; | 17 animation.currentTime = time; |
| 17 var portion = time / animation.effect.timing.duration; | 18 var portion = time / animation.effect.timing.duration; |
| 18 assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left), | 19 assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left), |
| 19 easingFunction(portion) * 100, | 20 easingFunction(portion) * 100, |
| 20 0.01, | 21 0.01, |
| 21 'The left of the animation should be approximately ' + | 22 'The left of the animation should be approximately ' + |
| 22 easingFunction(portion) * 100 + ' at ' + time + 'ms'); | 23 easingFunction(portion) * 100 + ' at ' + time + 'ms'); |
| 23 } | 24 } |
| 24 | 25 |
| 25 var gEffectEasingTests = [ | |
| 26 { | |
| 27 desc: 'steps(start) function', | |
| 28 easing: 'steps(2, start)', | |
| 29 easingFunction: stepStart(2) | |
| 30 }, | |
| 31 { | |
| 32 desc: 'steps(end) function', | |
| 33 easing: 'steps(2, end)', | |
| 34 easingFunction: stepEnd(2) | |
| 35 }, | |
| 36 { | |
| 37 desc: 'linear function', | |
| 38 easing: 'linear', // cubic-bezier(0, 0, 1.0, 1.0) | |
| 39 easingFunction: cubicBezier(0, 0, 1.0, 1.0) | |
| 40 }, | |
| 41 { | |
| 42 desc: 'ease function', | |
| 43 easing: 'ease', // cubic-bezier(0.25, 0.1, 0.25, 1.0) | |
| 44 easingFunction: cubicBezier(0.25, 0.1, 0.25, 1.0) | |
| 45 }, | |
| 46 { | |
| 47 desc: 'ease-in function', | |
| 48 easing: 'ease-in', // cubic-bezier(0.42, 0, 1.0, 1.0) | |
| 49 easingFunction: cubicBezier(0.42, 0, 1.0, 1.0) | |
| 50 }, | |
| 51 { | |
| 52 desc: 'ease-in-out function', | |
| 53 easing: 'ease-in-out', // cubic-bezier(0.42, 0, 0.58, 1.0) | |
| 54 easingFunction: cubicBezier(0.42, 0, 0.58, 1.0) | |
| 55 }, | |
| 56 { | |
| 57 desc: 'ease-out function', | |
| 58 easing: 'ease-out', // cubic-bezier(0, 0, 0.58, 1.0) | |
| 59 easingFunction: cubicBezier(0, 0, 0.58, 1.0) | |
| 60 }, | |
| 61 { | |
| 62 desc: 'easing function which produces values greater than 1', | |
| 63 easing: 'cubic-bezier(0, 1.5, 1, 1.5)', | |
| 64 easingFunction: cubicBezier(0, 1.5, 1, 1.5) | |
| 65 }, | |
| 66 { | |
| 67 desc: 'easing function which produces negative values', | |
| 68 easing: 'cubic-bezier(0, -0.5 ,1, -0.5)', | |
| 69 easingFunction: cubicBezier(0, -0.5, 1, -0.5) | |
| 70 }, | |
| 71 ]; | |
| 72 | |
| 73 gEffectEasingTests.forEach(function(options) { | 26 gEffectEasingTests.forEach(function(options) { |
| 74 test(function(t) { | 27 test(function(t) { |
| 75 var target = createDiv(t); | 28 var target = createDiv(t); |
| 76 target.style.position = 'absolute'; | 29 target.style.position = 'absolute'; |
| 77 var anim = target.animate([ { left: '0px' }, { left: '100px' } ], | 30 var anim = target.animate([ { left: '0px' }, { left: '100px' } ], |
| 78 { duration: 1000, | 31 { duration: 1000, |
| 79 fill: 'forwards', | 32 fill: 'forwards', |
| 80 easing: options.easing }); | 33 easing: options.easing }); |
| 81 var easing = options.easingFunction; | 34 var easing = options.easingFunction; |
| 82 | 35 |
| (...skipping 604 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 687 { currentTime: 999, progress: 0.5 }, | 640 { currentTime: 999, progress: 0.5 }, |
| 688 { currentTime: 1000, progress: 0.5 }, | 641 { currentTime: 1000, progress: 0.5 }, |
| 689 { currentTime: 1249, progress: 0.5 }, | 642 { currentTime: 1249, progress: 0.5 }, |
| 690 { currentTime: 1250, progress: 0 }, | 643 { currentTime: 1250, progress: 0 }, |
| 691 { currentTime: 1749, progress: 0 }, | 644 { currentTime: 1749, progress: 0 }, |
| 692 { currentTime: 1750, progress: 0.5 }, | 645 { currentTime: 1750, progress: 0.5 }, |
| 693 { currentTime: 2000, progress: 0.5 }, | 646 { currentTime: 2000, progress: 0.5 }, |
| 694 { currentTime: 2500, progress: 0.5 }, | 647 { currentTime: 2500, progress: 0.5 }, |
| 695 ] | 648 ] |
| 696 } | 649 } |
| 697 ] | 650 ]; |
| 698 | 651 |
| 699 gStepTimingFunctionTests.forEach(function(options) { | 652 gStepTimingFunctionTests.forEach(function(options) { |
| 700 test(function(t) { | 653 test(function(t) { |
| 701 var target = createDiv(t); | 654 var target = createDiv(t); |
| 702 var animation = target.animate(options.keyframe, options.effect); | 655 var animation = target.animate(options.keyframe, options.effect); |
| 703 options.conditions.forEach(function(condition) { | 656 options.conditions.forEach(function(condition) { |
| 704 animation.currentTime = condition.currentTime; | 657 animation.currentTime = condition.currentTime; |
| 705 if (typeof condition.progress !== 'undefined') { | 658 if (typeof condition.progress !== 'undefined') { |
| 706 assert_equals(animation.effect.getComputedTiming().progress, | 659 assert_equals(animation.effect.getComputedTiming().progress, |
| 707 condition.progress, | 660 condition.progress, |
| 708 'Progress at ' + animation.currentTime + 'ms'); | 661 'Progress at ' + animation.currentTime + 'ms'); |
| 709 } | 662 } |
| 710 if (typeof condition.width !== 'undefined') { | 663 if (typeof condition.width !== 'undefined') { |
| 711 assert_equals(getComputedStyle(target).width, | 664 assert_equals(getComputedStyle(target).width, |
| 712 condition.width, | 665 condition.width, |
| 713 'Progress at ' + animation.currentTime + 'ms'); | 666 'Progress at ' + animation.currentTime + 'ms'); |
| 714 } | 667 } |
| 715 }); | 668 }); |
| 716 }, options.description); | 669 }, options.description); |
| 717 }); | 670 }); |
| 718 | 671 |
| 719 </script> | 672 </script> |
| 720 </body> | 673 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1923043002:
Import web-platform-tests@028d354aba4c8ee6700def957a45f3927241d8b0 (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master