OLD | NEW |
(Empty) | |
| 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 var keyframeA = {opacity: '0.5', left: '50px'}; |
| 7 var keyframeB = {opacity: '0', left: '0px'}; |
| 8 var keyframeC = {opacity: '0.75', left: '75px'}; |
| 9 |
| 10 var 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 unspecif
ied). |
| 14 0.75: {opacity: '0.375', left: '37.5px'}, |
| 15 1: {opacity: '0.75', left: '75px'}, |
| 16 }; |
| 17 |
| 18 var offsetKeyframeA = {opacity: keyframeA.opacity, left: keyframeA.left, offset:
0}; |
| 19 var offsetKeyframeB = {opacity: keyframeB.opacity, left: keyframeB.left, offset:
0.25}; |
| 20 var offsetKeyframeC = {opacity: keyframeC.opacity, left: keyframeC.left, offset:
1}; |
| 21 |
| 22 var 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 |
| 31 test(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 |
| 60 test(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 |
| 89 test(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> |
OLD | NEW |