| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <script src="../resources/testharness.js"></script> | |
| 3 <script src="../resources/testharnessreport.js"></script> | |
| 4 <script src="w3c/resources/keyframes-test.js"></script> | |
| 5 <script> | |
| 6 // FIXME: Remove the need for and use of this function. | |
| 7 // Currently our animation timeline is not stable during page load script execut
ion. | |
| 8 // By deferring the tests to requestAnimationFrame() we can get a stable timelin
e and | |
| 9 // avoid flaky test results. | |
| 10 function testInRAF(testFunction, description, properties) { | |
| 11 async_test(function(testHandle) { | |
| 12 requestAnimationFrame(function() { | |
| 13 testHandle.step(testFunction); | |
| 14 testHandle.done(); | |
| 15 }) | |
| 16 }, description, properties); | |
| 17 } | |
| 18 | |
| 19 testInRAF(function() { | |
| 20 assertAnimationStyles([ | |
| 21 {opacity: '0', left: '0px', easing: 'steps(2, start)'}, | |
| 22 {opacity: '0.25', left: '25px'}, | |
| 23 {opacity: '0.75', left: '75px'}, | |
| 24 ], { | |
| 25 0: {opacity: '0.125', left: '12.5px'}, | |
| 26 0.125: {opacity: '0.125', left: '12.5px'}, | |
| 27 0.25: {opacity: '0.25', left: '25px'}, | |
| 28 0.375: {opacity: '0.25', left: '25px'}, | |
| 29 0.5: {opacity: '0.25', left: '25px'}, | |
| 30 0.625: {opacity: '0.375', left: '37.5px'}, | |
| 31 0.75: {opacity: '0.5', left: '50px'}, | |
| 32 0.875: {opacity: '0.625', left: '62.5px'}, | |
| 33 1: {opacity: '0.75', left: '75px'}, | |
| 34 }, 'with easing on first keyframe'); | |
| 35 | |
| 36 assertAnimationStyles([ | |
| 37 {opacity: '0', left: '0px'}, | |
| 38 {opacity: '0.5', left: '50px', easing: 'steps(2, start)'}, | |
| 39 {opacity: '0.75', left: '75px'}, | |
| 40 ], { | |
| 41 0: {opacity: '0', left: '0px'}, | |
| 42 0.125: {opacity: '0.125', left: '12.5px'}, | |
| 43 0.25: {opacity: '0.25', left: '25px'}, | |
| 44 0.375: {opacity: '0.375', left: '37.5px'}, | |
| 45 0.5: {opacity: '0.625', left: '62.5px'}, | |
| 46 0.625: {opacity: '0.625', left: '62.5px'}, | |
| 47 0.75: {opacity: '0.75', left: '75px'}, | |
| 48 0.875: {opacity: '0.75', left: '75px'}, | |
| 49 1: {opacity: '0.75', left: '75px'}, | |
| 50 }, 'with easing on second keyframe'); | |
| 51 }, | |
| 52 'element.animate() with eased keyframe', | |
| 53 { | |
| 54 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | |
| 55 assert: [ | |
| 56 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | |
| 57 'for their easing property. The animation should use the given timing functi
on between consecutive', | |
| 58 'keyframe offsets.', | |
| 59 ], | |
| 60 author: 'Alan Cutter', | |
| 61 }); | |
| 62 | |
| 63 testInRAF(function() { | |
| 64 assertAnimationStyles([ | |
| 65 {opacity: '0', offset: 0, easing: 'steps(2, start)'}, | |
| 66 {left: '0px', offset: 0}, | |
| 67 {opacity: '0.5', left: '50px'}, | |
| 68 ], { | |
| 69 0: {opacity: '0.25', left: '0px'}, | |
| 70 0.25: {opacity: '0.25', left: '12.5px'}, | |
| 71 0.5: {opacity: '0.5', left: '25px'}, | |
| 72 0.75: {opacity: '0.5', left: '37.5px'}, | |
| 73 1: {opacity: '0.5', left: '50px'}, | |
| 74 }); | |
| 75 }, | |
| 76 'element.animate() with eased keyframe on single property', | |
| 77 { | |
| 78 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | |
| 79 assert: [ | |
| 80 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | |
| 81 'for their easing property. The animation should use the given timing functi
on only on the properties', | |
| 82 'specified in the same keyframe.', | |
| 83 ], | |
| 84 author: 'Alan Cutter', | |
| 85 }); | |
| 86 | |
| 87 testInRAF(function() { | |
| 88 assertAnimationStyles([ | |
| 89 {opacity: '0', left: '0px'}, | |
| 90 {opacity: '0.5', left: '50px', easing: 'steps(2, start)'}, | |
| 91 ], { | |
| 92 0: {opacity: '0', left: '0px'}, | |
| 93 0.25: {opacity: '0.125', left: '12.5px'}, | |
| 94 0.5: {opacity: '0.25', left: '25px'}, | |
| 95 0.75: {opacity: '0.375', left: '37.5px'}, | |
| 96 1: {opacity: '0.5', left: '50px'}, | |
| 97 }); | |
| 98 }, | |
| 99 'element.animate() with easing on last keyframe', | |
| 100 { | |
| 101 help: 'http://dev.w3.org/fxtf/web-animations/#the-keyframe-dictionary', | |
| 102 assert: [ | |
| 103 'element.animate() should start an animation when keyframes are specified wi
th timing functions', | |
| 104 'for their easing property. Easing on the last keyframes should have no effe
ct on the animation.', | |
| 105 ], | |
| 106 author: 'Alan Cutter', | |
| 107 }); | |
| 108 </script> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2141723005:
Delete eased-keyframes (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master