1 <!DOCTYPE html> 2 <script src="testharness/testharness.js"></script> 3 <script src="testharness/testharnessreport.js"></script> 4 <script src="resources/keyframes-test.js"></script> 5 <script> 6 test(function() { 7 assertAnimationStyles([ 8 {opacity: '0.25', left: '25px'}, 9 {opacity: '0.75', left: '75px'}, 10 ], { 11 0.5: {opacity: '0.5', left: '50px'}, 12 }); 13 }, 14 'element.animate() with 2 keyframes', 15 { 16 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 17 assert: [ 18 'element.animate() should start an animation when two keyframes', 19 'are provided with matching properties and no offsets specified.', 20 ], 21 author: 'Alan Cutter', 22 }); 23 24 test(function() { 25 assertAnimationStyles([ 26 {opacity: '0', left: '0px'}, 27 {opacity: '0.25', left: '25px'}, 28 {opacity: '0.75', left: '75px'}, 29 ], { 30 0.25: {opacity: '0.125', left: '12.5px'}, 31 0.75: {opacity: '0.5', left: '50px'}, 32 }); 33 }, 34 'element.animate() with 3 keyframes', 35 { 36 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 37 assert: [ 38 'element.animate() should start an animation when three keyframes', 39 'are provided with matching properties and no offsets specified.', 40 'The keyframes must maintain their ordering and get distributed', 41 'correctly.', 42 ], 43 author: 'Alan Cutter', 44 }); 45 </script> 46