| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> | 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> | 3 <script src="../resources/testharnessreport.js"></script> |
| 4 | 4 |
| 5 <style> | 5 <style> |
| 6 .anim { | 6 .anim { |
| 7 position: absolute; | 7 position: absolute; |
| 8 left: 10px; | 8 left: 10px; |
| 9 height: 90px; | 9 height: 90px; |
| 10 width: 100px; | 10 width: 100px; |
| 11 background-color: black; | 11 background-color: black; |
| 12 } | 12 } |
| 13 </style> | 13 </style> |
| 14 | 14 |
| 15 <body> | 15 <body> |
| 16 <div id='e1' class='anim'></div> | |
| 17 <div id='e2' class='anim'></div> | |
| 18 <div id='e3' class='anim'></div> | |
| 19 </body> | 16 </body> |
| 20 | 17 |
| 21 <script> | 18 <script> |
| 22 var e1 = document.getElementById('e1'); | 19 var addAnimDiv = function() { |
| 23 var e2 = document.getElementById('e2'); | 20 var element = document.createElement('div'); |
| 24 var e3 = document.getElementById('e3'); | 21 element.className = 'anim'; |
| 25 | 22 document.body.appendChild(element); |
| 26 var e1Style = getComputedStyle(e1); | 23 return element; |
| 27 var e2Style = getComputedStyle(e2); | 24 }; |
| 28 var e3Style = getComputedStyle(e3); | 25 |
| 29 | 26 var assertEquivalentFramesSyntax = function(testParams) { |
| 30 var durationValue = 1; | 27 var e1 = addAnimDiv(); |
| 31 | 28 var e2 = addAnimDiv(); |
| 32 test(function() { | 29 var e1Style = getComputedStyle(e1); |
| 33 var player = e1.animate([ | 30 var e2Style = getComputedStyle(e2); |
| 31 var options = {duration: testParams.duration, fill: "forwards"}; |
| 32 var player1 = e1.animate(testParams.listOfKeyframes, options); |
| 33 var player2 = e2.animate(testParams.keyframeWithListOfValues, options); |
| 34 player1.pause(); |
| 35 player2.pause(); |
| 36 for (var i = 0; i < testParams.expectationList.length; i++) { |
| 37 var expected = testParams.expectationList[i]; |
| 38 player1.currentTime = expected.at; |
| 39 player2.currentTime = expected.at; |
| 40 for (var property in expected.is) { |
| 41 assert_equals(e1Style.getPropertyValue(property), expected.is[proper
ty]); |
| 42 assert_equals(e2Style.getPropertyValue(property), expected.is[proper
ty]); |
| 43 } |
| 44 } |
| 45 }; |
| 46 |
| 47 test(function() { |
| 48 var element = addAnimDiv(); |
| 49 var elementStyle = getComputedStyle(element); |
| 50 var player = element.animate([ |
| 34 {left: '10px', opacity: '1', offset: 0}, | 51 {left: '10px', opacity: '1', offset: 0}, |
| 35 {left: '100px', opacity: '0', offset: 1} | 52 {left: '100px', opacity: '0', offset: 1} |
| 36 ], durationValue); | 53 ], 1); |
| 37 player.pause(); | 54 player.pause(); |
| 38 player.currentTime = durationValue / 2; | 55 player.currentTime = 0.5; |
| 39 assert_equals(e1Style.left, '55px'); | 56 assert_equals(elementStyle.left, '55px'); |
| 40 assert_equals(e1Style.opacity, '0.5'); | 57 assert_equals(elementStyle.opacity, '0.5'); |
| 41 }, 'Calling animate() should start an animation.'); | 58 }, 'Calling animate() should start an animation.'); |
| 42 | 59 |
| 43 test(function() { | 60 test(function() { |
| 44 var player = e2.animate([ | 61 assertEquivalentFramesSyntax({ |
| 62 listOfKeyframes: [ |
| 63 {left: '10px', opacity: '1'}, |
| 64 {left: '100px', opacity: '0'}, |
| 65 {left: '150px', opacity: '1'} |
| 66 ], |
| 67 keyframeWithListOfValues: { |
| 68 left: ['10px', '100px', '150px'], |
| 69 opacity: ['1', '0', '1'] |
| 70 }, |
| 71 duration: 1, |
| 72 expectationList: [ |
| 73 {at: 0, is: {left: '10px', opacity: '1'}}, |
| 74 {at: 0.25, is: {left: '55px', opacity: '0.5'}}, |
| 75 {at: 0.5, is: {left: '100px', opacity: '0'}}, |
| 76 {at: 0.75, is: {left: '125px', opacity: '0.5'}}, |
| 77 {at: 1, is: {left: '150px', opacity: '1'}} |
| 78 ] |
| 79 }); |
| 80 }, 'Calling animate() with alternative list syntax should give same result.'); |
| 81 |
| 82 test(function() { |
| 83 var element = addAnimDiv(); |
| 84 var elementStyle = getComputedStyle(element); |
| 85 var player = element.animate([ |
| 45 {backgroundColor: 'green', offset: 0}, | 86 {backgroundColor: 'green', offset: 0}, |
| 46 {backgroundColor: 'purple', offset: 1} | 87 {backgroundColor: 'purple', offset: 1} |
| 47 ], durationValue); | 88 ], 1); |
| 48 player.pause(); | 89 player.pause(); |
| 49 player.currentTime = durationValue / 2; | 90 player.currentTime = 0.5; |
| 50 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)'); | 91 assert_equals(elementStyle.backgroundColor, 'rgb(64, 64, 64)'); |
| 51 }, 'Calling animate() should start an animation. CamelCase property names should
be parsed.'); | 92 }, 'Calling animate() should start an animation. CamelCase property names should
be parsed.'); |
| 52 | 93 |
| 53 test(function() { | 94 test(function() { |
| 54 var player = e1.animate([ | 95 var element = addAnimDiv(); |
| 96 var elementStyle = getComputedStyle(element); |
| 97 var player = element.animate([ |
| 55 {left: '10px', offset: '0'}, | 98 {left: '10px', offset: '0'}, |
| 56 {left: '100px', offset: '1'} | 99 {left: '100px', offset: '1'} |
| 57 ], durationValue); | 100 ], 1); |
| 58 player.pause(); | 101 player.pause(); |
| 59 player.currentTime = durationValue / 2; | 102 player.currentTime = 0.5; |
| 60 assert_equals(e1Style.left, '55px'); | 103 assert_equals(elementStyle.left, '55px'); |
| 61 }, 'Offsets may be specified as strings.'); | 104 }, 'Offsets may be specified as strings.'); |
| 62 | 105 |
| 63 test(function() { | 106 test(function() { |
| 107 assertEquivalentFramesSyntax({ |
| 108 listOfKeyframes: [ |
| 109 {left: '0px', easing: 'steps(2, start)'}, |
| 110 {left: '100px', easing: 'steps(2, start)'}, |
| 111 {left: '300px'} |
| 112 ], |
| 113 keyframeWithListOfValues: { |
| 114 left: ['0px', '100px', '300px'], |
| 115 easing: 'steps(2, start)' |
| 116 }, |
| 117 duration: 1, |
| 118 expectationList: [ |
| 119 {at: 0, is: {left: '50px'}}, |
| 120 {at: 0.25, is: {left: '100px'}}, |
| 121 {at: 0.5, is: {left: '200px'}}, |
| 122 {at: 0.75, is: {left: '300px'}} |
| 123 ] |
| 124 }); |
| 125 }, 'When using the alternative list syntax, all keyframes have the same timing f
unction.'); |
| 126 |
| 127 test(function() { |
| 128 assertEquivalentFramesSyntax({ |
| 129 listOfKeyframes: [ |
| 130 {left: '0px', offset: 0.5}, |
| 131 {left: '100px', offset: 0.5} |
| 132 ], |
| 133 keyframeWithListOfValues: { |
| 134 left: ['0px', '100px'], |
| 135 offset: 0.5 |
| 136 }, |
| 137 duration: 1, |
| 138 expectationList: [ |
| 139 {at: 0, is: {left: '10px'}}, |
| 140 {at: 0.25, is: {left: '5px'}}, |
| 141 {at: 0.49, is: {left: '0.2px'}}, |
| 142 {at: 0.5, is: {left: '100px'}}, |
| 143 {at: 0.75, is: {left: '55px'}}, |
| 144 {at: 1, is: {left: '10px'}} |
| 145 ] |
| 146 }); |
| 147 }, 'When using the alternative list syntax, offset is applied to all specified k
eyframes.'); |
| 148 |
| 149 test(function() { |
| 150 assertEquivalentFramesSyntax({ |
| 151 listOfKeyframes: [ |
| 152 {left: '0px', composite: 'add'}, |
| 153 {left: '100px', composite: 'add'} |
| 154 ], |
| 155 keyframeWithListOfValues: { |
| 156 left: ['0px', '100px'], |
| 157 composite: 'add' |
| 158 }, |
| 159 duration: 1, |
| 160 expectationList: [ |
| 161 {at: 0, is: {left: '10px'}}, |
| 162 {at: 0.5, is: {left: '60px'}}, |
| 163 {at: 1, is: {left: '110px'}} |
| 164 ] |
| 165 }); |
| 166 }, 'When using the alternative list syntax, composite is applied to all keyframe
s.'); |
| 167 |
| 168 test(function() { |
| 169 assertEquivalentFramesSyntax({ |
| 170 listOfKeyframes: [ |
| 171 {left: '0px', offset: 0}, |
| 172 {opacity: '0', offset: 0}, |
| 173 {left: '10px', offset: 0.33}, |
| 174 {opacity: '0.4', offset: 0.5}, |
| 175 {left: '40px', offset: 0.67}, |
| 176 {left: '100px', offset: 1}, |
| 177 {opacity: '1', offset: 1} |
| 178 ], |
| 179 keyframeWithListOfValues: { |
| 180 left: ['0px', '10px', '40px', '100px'], |
| 181 opacity: ['0', '0.4', '1'] |
| 182 }, |
| 183 duration: 1, |
| 184 expectationList: [ |
| 185 {at: 0, is: {left: '0px', opacity: '0'}}, |
| 186 {at: 0.5, is: {left: '25px', opacity: '0.4'}}, |
| 187 {at: 1, is: {left: '100px', opacity: '1'}} |
| 188 ] |
| 189 }); |
| 190 }, 'When using the alternative list syntax, properties can have different length
lists.'); |
| 191 |
| 192 test(function() { |
| 193 assertEquivalentFramesSyntax({ |
| 194 listOfKeyframes: [ |
| 195 {left: '100px'} |
| 196 ], |
| 197 keyframeWithListOfValues: { |
| 198 left: ['100px'] |
| 199 }, |
| 200 duration: 1, |
| 201 expectationList: [ |
| 202 {at: 0, is: {left: '10px'}}, |
| 203 {at: 0.5, is: {left: '55px'}}, |
| 204 {at: 1, is: {left: '100px'}} |
| 205 ] |
| 206 }); |
| 207 assertEquivalentFramesSyntax({ |
| 208 listOfKeyframes: [ |
| 209 {left: '100px'} |
| 210 ], |
| 211 keyframeWithListOfValues: { |
| 212 left: '100px' |
| 213 }, |
| 214 duration: 1, |
| 215 expectationList: [ |
| 216 {at: 0, is: {left: '10px'}}, |
| 217 {at: 0.5, is: {left: '55px'}}, |
| 218 {at: 1, is: {left: '100px'}} |
| 219 ] |
| 220 }); |
| 221 }, 'The list of keyframes can have one element.'); |
| 222 |
| 223 test(function() { |
| 224 var element = addAnimDiv(); |
| 225 var keyframes = [ |
| 226 {left: ['10px', '100px']}, |
| 227 {left: ['5px', '50px']} |
| 228 ]; |
| 229 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1
); }); |
| 230 }, 'Should throw when mixing two different list syntaxes.'); |
| 231 |
| 232 test(function() { |
| 233 var element = addAnimDiv(); |
| 64 var keyframes = [ | 234 var keyframes = [ |
| 65 {opacity: '0.5', offset: 0.5}, | 235 {opacity: '0.5', offset: 0.5}, |
| 66 {opacity: '0.9', offset: 1}, | 236 {opacity: '0.9', offset: 1}, |
| 67 {opacity: '0', offset: 0} | 237 {opacity: '0', offset: 0} |
| 68 ]; | 238 ]; |
| 69 assert_throws('InvalidModificationError', function() { e1.animate(keyframes,
durationValue); }); | 239 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1
); }); |
| 70 }, 'Should throw when keyframes have unsorted offsets.'); | 240 }, 'Should throw when keyframes have unsorted offsets.'); |
| 71 | 241 |
| 72 test(function() { | 242 test(function() { |
| 243 var element = addAnimDiv(); |
| 73 var keyframes = [ | 244 var keyframes = [ |
| 74 {opacity: '1', offset: -1}, | 245 {opacity: '1', offset: -1}, |
| 75 {opacity: '1', offset: NaN}, | 246 {opacity: '1', offset: NaN}, |
| 76 {opacity: '1', offset: 2}, | 247 {opacity: '1', offset: 2}, |
| 77 {opacity: '0.5', offset: 1}, | 248 {opacity: '0.5', offset: 1}, |
| 78 {opacity: '0', offset: 0} | 249 {opacity: '0', offset: 0} |
| 79 ]; | 250 ]; |
| 80 assert_throws('InvalidModificationError', function() { e1.animate(keyframes,
durationValue); }); | 251 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1
); }); |
| 81 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].'); | 252 }, 'Should throw when keyframes has offsets outside the range [0.0, 1.0].'); |
| 82 | 253 |
| 83 test(function() { | 254 test(function() { |
| 255 var element = addAnimDiv(); |
| 84 var keyframes = [ | 256 var keyframes = [ |
| 85 {opacity: '0.5'}, | 257 {opacity: '0.5'}, |
| 86 {opacity: '1', offset: 1}, | 258 {opacity: '1', offset: 1}, |
| 87 {opacity: '0', offset: 0} | 259 {opacity: '0', offset: 0} |
| 88 ]; | 260 ]; |
| 89 assert_throws('InvalidModificationError', function() { e1.animate(keyframes,
durationValue); }); | 261 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1
); }); |
| 90 }, 'Should throw when keyframes are not loosely sorted and any have no offset.')
; | 262 }, 'Should throw when keyframes are not loosely sorted and any have no offset.')
; |
| 91 | 263 |
| 92 test(function() { | 264 test(function() { |
| 265 var element = addAnimDiv(); |
| 93 var keyframes = [ | 266 var keyframes = [ |
| 94 {opacity: '0.5', offset: null}, | 267 {opacity: '0.5', offset: null}, |
| 95 {opacity: '1', offset: 1}, | 268 {opacity: '1', offset: 1}, |
| 96 {opacity: '0', offset: 0} | 269 {opacity: '0', offset: 0} |
| 97 ]; | 270 ]; |
| 98 assert_throws('InvalidModificationError', function() { e1.animate(keyframes,
durationValue); }); | 271 assert_throws({name: 'TypeError'}, function() { element.animate(keyframes, 1
); }); |
| 99 }, 'Should throw when keyframes are not loosely sorted and any have null offset.
'); | 272 }, 'Should throw when keyframes are not loosely sorted and any have null offset.
'); |
| 100 | 273 |
| 101 var keyframesWithInvalid = [ | 274 var keyframesWithInvalid = [ |
| 102 {width: '0px', backgroundColor: 'octarine', offset: 0}, | 275 {width: '0px', backgroundColor: 'octarine', offset: 0}, |
| 103 {width: '1000px', foo: 'bar', offset: 1}]; | 276 {width: '1000px', foo: 'bar', offset: 1}]; |
| 104 | 277 |
| 105 test(function() { | 278 test(function() { |
| 106 var player = e3.animate(keyframesWithInvalid, {duration: durationValue, fill
: 'forwards'}); | 279 var element = addAnimDiv(); |
| 280 var elementStyle = getComputedStyle(element); |
| 281 var player = element.animate(keyframesWithInvalid, {duration: 1, fill: 'forw
ards'}); |
| 107 player.pause(); | 282 player.pause(); |
| 108 player.currentTime = durationValue; | 283 player.currentTime = 1; |
| 109 assert_equals(e3Style.width, '1000px'); | 284 assert_equals(elementStyle.width, '1000px'); |
| 110 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); | 285 assert_equals(elementStyle.backgroundColor, 'rgb(0, 0, 0)'); |
| 111 assert_equals(e3Style.foo, undefined); | 286 assert_equals(elementStyle.foo, undefined); |
| 112 }, 'Calling animate() with a pre-constructed keyframes list should start an anim
ation. Invalid style declarations should be ignored.'); | 287 }, 'Calling animate() with a pre-constructed keyframes list should start an anim
ation. Invalid style declarations should be ignored.'); |
| 288 |
| 113 </script> | 289 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1720403002:
Alternative syntax for element.animate list of keyframes (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@animations-keyframeeffect-api