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', left: '0px'}, 9 {opacity: '0.5', left: '50px', offset: 0.5}, 10 {opacity: '0', left: '0px', offset: 0.5}, 11 {opacity: '0.75', left: '75px', offset: 0.5}, 12 {opacity: '0.25', left: '25px'}, 13 ], { 14 0.25: {opacity: '0.25', left: '25px'}, 15 0.5: {opacity: '0.75', left: '75px'}, 16 0.75: {opacity: '0.5', left: '50px'}, 17 }) 18 }, 19 'element.animate() with keyframes at the same offset with overlapping properties', 20 { 21 help: 'http://dev.w3.org/fxtf/web-animations/#the-unaccumulated-animation-value-of-a-keyframe-animation-effect', 22 assert: [ 23 'element.animate() should start an animation when keyframes have equal offset values.', 24 'The overlapping properties in the equal offset keyframes should see a disjoint', 25 'interpolation pattern at the offset relative to the ordering of the keyframes.', 26 ], 27 author: 'Alan Cutter', 28 }); 29 30 test(function() { 31 assertAnimationStyles([ 32 {opacity: '0', left: '0px'}, 33 {opacity: '0.75', offset: 0.5}, 34 {left: '75px', offset: 0.5}, 35 {opacity: '0.25', left: '25px'}, 36 ], { 37 0.25: {opacity: '0.375', left: '37.5px'}, 38 0.5: {opacity: '0.75', left: '75px'}, 39 0.75: {opacity: '0.5', left: '50px'}, 40 }) 41 }, 42 'element.animate() with keyframes at the same offset with disjoint properties', 43 { 44 help: 'http://dev.w3.org/fxtf/web-animations/#the-unaccumulated-animation-value-of-a-keyframe-animation-effect', 45 assert: [ 46 'element.animate() should start an animation when keyframes have equal offset values.', 47 'If the properties of the equal offset keyframes are disjoint then the animation should', 48 'be equivalent to having a single keyframe at that offset (assuming the easings are equal too).', 49 ], 50 author: 'Alan Cutter', 51 }); 52 </script> 53
