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', offset: 0}, 9 {opacity: '0.75', left: '75px'}, 10 ], { 11 0.5: {opacity: '0.5', left: '50px'}, 12 }); 13 assertAnimationStyles([ 14 {opacity: '0.25', left: '25px'}, 15 {opacity: '0.75', left: '75px', offset: 1}, 16 ], { 17 0.5: {opacity: '0.5', left: '50px'}, 18 }); 19 }, 20 'element.animate() with 2 keyframes and 1 offset specified', 21 { 22 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 23 assert: [ 24 'element.animate() should start an animation when two keyframes', 25 'are provided with matching properties and one offset is specified.', 26 ], 27 author: 'Alan Cutter', 28 }); 29 30 test(function() { 31 assertAnimationStyles([ 32 {opacity: '0.25', left: '25px', offset: 0}, 33 {opacity: '0.75', left: '75px', offset: 1}, 34 ], { 35 0.5: {opacity: '0.5', left: '50px'}, 36 }); 37 38 assert_throws('InvalidModificationError', function() { 39 assertAnimationStyles([ 40 {opacity: '0.75', left: '75px', offset: 1}, 41 {opacity: '0.25', left: '25px', offset: 0}, 42 ], { 43 0.5: {opacity: '0.5', left: '50px'}, 44 }); 45 }); 46 }, 47 'element.animate() with 2 keyframes and 2 offsets specified', 48 { 49 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 50 assert: [ 51 'element.animate() should start an animation when two keyframes', 52 'are provided with matching properties and both offsets specified.', 53 ], 54 author: 'Alan Cutter', 55 }); 56 </script> 57
