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> 6var keyframeA = {opacity: '0.5', left: '50px'}; 7var keyframeB = {opacity: '0', left: '0px'}; 8var keyframeC = {opacity: '0.75', left: '75px'}; 9 10var keyframeBExpectations = { 11 0: {opacity: '0.5', left: '50px'}, 12 0.25: {opacity: '0.25', left: '25px'}, 13 0.5: {opacity: '0', left: '0px'}, // Corresponds to keyframeB (offset unspecified). 14 0.75: {opacity: '0.375', left: '37.5px'}, 15 1: {opacity: '0.75', left: '75px'}, 16}; 17 18var offsetKeyframeA = {opacity: keyframeA.opacity, left: keyframeA.left, offset: 0}; 19var offsetKeyframeB = {opacity: keyframeB.opacity, left: keyframeB.left, offset: 0.25}; 20var offsetKeyframeC = {opacity: keyframeC.opacity, left: keyframeC.left, offset: 1}; 21 22var offsetKeyframeBExpectations = { 23 0: {opacity: '0.5', left: '50px'}, 24 0.125: {opacity: '0.25', left: '25px'}, 25 0.25: {opacity: '0', left: '0px'}, // Corresponds to offsetKeyframeB (offset 0.25). 26 0.5: {opacity: '0.25', left: '25px'}, 27 0.75: {opacity: '0.5', left: '50px'}, 28 1: {opacity: '0.75', left: '75px'}, 29}; 30 31test(function() { 32 assertAnimationStyles([ 33 offsetKeyframeA, 34 keyframeB, 35 keyframeC, 36 ], keyframeBExpectations, 'with first offset specified'); 37 assertAnimationStyles([ 38 keyframeA, 39 offsetKeyframeB, 40 keyframeC, 41 ], offsetKeyframeBExpectations, 'with second offset specified'); 42 assertAnimationStyles([ 43 keyframeA, 44 keyframeB, 45 offsetKeyframeC, 46 ], keyframeBExpectations, 'with third offset specified'); 47}, 48'element.animate() with 3 keyframes and 1 offset specified', 49{ 50 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 51 assert: [ 52 'element.animate() should start an animation when three keyframes', 53 'are provided with matching properties and one offset specified.', 54 'The keyframes must maintain their ordering and get distributed', 55 'correctly.', 56 ], 57 author: 'Alan Cutter', 58}); 59 60test(function() { 61 assertAnimationStyles([ 62 keyframeA, 63 offsetKeyframeB, 64 offsetKeyframeC, 65 ], offsetKeyframeBExpectations, 'with first offset unspecified'); 66 assertAnimationStyles([ 67 offsetKeyframeA, 68 keyframeB, 69 offsetKeyframeC, 70 ], keyframeBExpectations, 'with second offset unspecified'); 71 assertAnimationStyles([ 72 offsetKeyframeA, 73 offsetKeyframeB, 74 keyframeC, 75 ], offsetKeyframeBExpectations, 'with third offset unspecified'); 76}, 77'element.animate() with 3 keyframes and 2 offsets specified', 78{ 79 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 80 assert: [ 81 'element.animate() should start an animation when three keyframes', 82 'are provided with matching properties and two offsets specified.', 83 'The keyframes must maintain their ordering and get distributed', 84 'correctly.', 85 ], 86 author: 'Alan Cutter', 87}); 88 89test(function() { 90 assertAnimationStyles([ 91 offsetKeyframeA, 92 offsetKeyframeB, 93 offsetKeyframeC, 94 ], offsetKeyframeBExpectations, 'with ordered offsets'); 95 96 assert_throws('InvalidModificationError', function() { 97 assertAnimationStyles([ 98 offsetKeyframeA, 99 offsetKeyframeC, 100 offsetKeyframeB, 101 ], offsetKeyframeBExpectations, 'with unordered offsets (1)'); 102 }); 103 104 assert_throws('InvalidModificationError', function() { 105 assertAnimationStyles([ 106 offsetKeyframeB, 107 offsetKeyframeA, 108 offsetKeyframeC, 109 ], offsetKeyframeBExpectations, 'with unordered offsets (2)'); 110 }); 111 112 assert_throws('InvalidModificationError', function() { 113 assertAnimationStyles([ 114 offsetKeyframeB, 115 offsetKeyframeC, 116 offsetKeyframeA, 117 ], offsetKeyframeBExpectations, 'with unordered offsets (3)'); 118 }); 119 120 assert_throws('InvalidModificationError', function() { 121 assertAnimationStyles([ 122 offsetKeyframeC, 123 offsetKeyframeA, 124 offsetKeyframeB, 125 ], offsetKeyframeBExpectations, 'with unordered offsets (4)'); 126 }); 127 128 assert_throws('InvalidModificationError', function() { 129 assertAnimationStyles([ 130 offsetKeyframeC, 131 offsetKeyframeB, 132 offsetKeyframeA, 133 ], offsetKeyframeBExpectations, 'with unordered offsets (5)'); 134 }); 135}, 136'element.animate() with 3 keyframes and 3 offsets specified', 137{ 138 help: 'http://dev.w3.org/fxtf/web-animations/#keyframe-animation-effects', 139 assert: [ 140 'element.animate() should start an animation when three keyframes', 141 'are provided with matching properties and all offsets specified.', 142 'The keyframes must maintain their ordering and get distributed', 143 'correctly.', 144 ], 145 author: 'Alan Cutter', 146}); 147</script> 148