| OLD | NEW |
|---|
| (Empty) |
| 1 <!DOCTYPE html> | |
| 2 <meta charset=utf-8> | |
| 3 <title>Effect-level easing tests</title> | |
| 4 <link rel="help" href="http://w3c.github.io/web-animations/#calculating-the-tran
sformed-time"> | |
| 5 <link rel="author" title="Hiroyuki Ikezoe" href="mailto:hiikezoe@mozilla-japan.o
rg"> | |
| 6 <script src="/resources/testharness.js"></script> | |
| 7 <script src="/resources/testharnessreport.js"></script> | |
| 8 <script src="../../testcommon.js"></script> | |
| 9 <script src="../../resources/effect-easing-tests.js"></script> | |
| 10 <body> | |
| 11 <div id="log"></div> | |
| 12 <div id="target"></div> | |
| 13 <script> | |
| 14 "use strict"; | |
| 15 | |
| 16 function assert_style_left_at(animation, time, easingFunction) { | |
| 17 animation.currentTime = time; | |
| 18 var portion = time / animation.effect.timing.duration; | |
| 19 assert_approx_equals(pxToNum(getComputedStyle(animation.effect.target).left), | |
| 20 easingFunction(portion) * 100, | |
| 21 0.01, | |
| 22 'The left of the animation should be approximately ' + | |
| 23 easingFunction(portion) * 100 + ' at ' + time + 'ms'); | |
| 24 } | |
| 25 | |
| 26 gEffectEasingTests.forEach(function(options) { | |
| 27 test(function(t) { | |
| 28 var target = createDiv(t); | |
| 29 target.style.position = 'absolute'; | |
| 30 var anim = target.animate([ { left: '0px' }, { left: '100px' } ], | |
| 31 { duration: 1000, | |
| 32 fill: 'forwards', | |
| 33 easing: options.easing }); | |
| 34 var easing = options.easingFunction; | |
| 35 | |
| 36 anim.pause(); | |
| 37 | |
| 38 assert_style_left_at(anim, 0, easing); | |
| 39 assert_style_left_at(anim, 250, easing); | |
| 40 assert_style_left_at(anim, 500, easing); | |
| 41 assert_style_left_at(anim, 750, easing); | |
| 42 assert_style_left_at(anim, 1000, easing); | |
| 43 }, options.desc); | |
| 44 }); | |
| 45 | |
| 46 var gEffectEasingTestsWithKeyframeEasing = [ | |
| 47 { | |
| 48 desc: 'effect easing produces values greater than 1 with keyframe ' + | |
| 49 'easing cubic-bezier(0, 0, 0, 0)', | |
| 50 easing: 'cubic-bezier(0, 1.5, 1, 1.5)', | |
| 51 keyframeEasing: 'cubic-bezier(0, 0, 0, 0)', // linear | |
| 52 easingFunction: cubicBezier(0, 1.5, 1, 1.5) | |
| 53 }, | |
| 54 { | |
| 55 desc: 'effect easing produces values greater than 1 with keyframe ' + | |
| 56 'easing cubic-bezier(1, 1, 1, 1)', | |
| 57 easing: 'cubic-bezier(0, 1.5, 1, 1.5)', | |
| 58 keyframeEasing: 'cubic-bezier(1, 1, 1, 1)', // linear | |
| 59 easingFunction: cubicBezier(0, 1.5, 1, 1.5) | |
| 60 }, | |
| 61 { | |
| 62 desc: 'effect easing produces negative values 1 with keyframe ' + | |
| 63 'easing cubic-bezier(0, 0, 0, 0)', | |
| 64 easing: 'cubic-bezier(0, -0.5, 1, -0.5)', | |
| 65 keyframeEasing: 'cubic-bezier(0, 0, 0, 0)', // linear | |
| 66 easingFunction: cubicBezier(0, -0.5, 1, -0.5) | |
| 67 }, | |
| 68 { | |
| 69 desc: 'effect easing produces negative values 1 with keyframe ' + | |
| 70 'easing cubic-bezier(1, 1, 1, 1)', | |
| 71 easing: 'cubic-bezier(0, -0.5, 1, -0.5)', | |
| 72 keyframeEasing: 'cubic-bezier(1, 1, 1, 1)', // linear | |
| 73 easingFunction: cubicBezier(0, -0.5, 1, -0.5) | |
| 74 }, | |
| 75 ]; | |
| 76 | |
| 77 gEffectEasingTestsWithKeyframeEasing.forEach(function(options) { | |
| 78 test(function(t) { | |
| 79 var target = createDiv(t); | |
| 80 target.style.position = 'absolute'; | |
| 81 var anim = target.animate( | |
| 82 [ { left: '0px', easing: options.keyframeEasing }, | |
| 83 { left: '100px' } ], | |
| 84 { duration: 1000, | |
| 85 fill: 'forwards', | |
| 86 easing: options.easing }); | |
| 87 var easing = options.easingFunction; | |
| 88 | |
| 89 anim.pause(); | |
| 90 | |
| 91 assert_style_left_at(anim, 0, easing); | |
| 92 assert_style_left_at(anim, 250, easing); | |
| 93 assert_style_left_at(anim, 500, easing); | |
| 94 assert_style_left_at(anim, 750, easing); | |
| 95 assert_style_left_at(anim, 1000, easing); | |
| 96 }, options.desc); | |
| 97 }); | |
| 98 | |
| 99 // Other test cases that effect easing produces values outside of [0,1]. | |
| 100 test(function(t) { | |
| 101 var target = createDiv(t); | |
| 102 target.style.position = 'absolute'; | |
| 103 var anim = target.animate([ { left: '0px', easing: 'step-start' }, | |
| 104 { left: '100px' } ], | |
| 105 { duration: 1000, | |
| 106 fill: 'forwards', | |
| 107 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); | |
| 108 anim.pause(); | |
| 109 | |
| 110 // The bezier function produces values greater than 1 in (0.23368794, 1) | |
| 111 anim.currentTime = 0; | |
| 112 assert_equals(getComputedStyle(target).left, '100px'); | |
| 113 anim.currentTime = 230; | |
| 114 assert_equals(getComputedStyle(target).left, '100px'); | |
| 115 anim.currentTime = 250; | |
| 116 assert_equals(getComputedStyle(target).left, '100px'); | |
| 117 anim.currentTime = 1000; | |
| 118 assert_equals(getComputedStyle(target).left, '100px'); | |
| 119 }, 'effect easing produces values greater than 1 with step-start keyframe'); | |
| 120 | |
| 121 test(function(t) { | |
| 122 var target = createDiv(t); | |
| 123 target.style.position = 'absolute'; | |
| 124 var anim = target.animate([ { left: '0px', easing: 'step-end' }, | |
| 125 { left: '100px' } ], | |
| 126 { duration: 1000, | |
| 127 fill: 'forwards', | |
| 128 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); | |
| 129 anim.pause(); | |
| 130 | |
| 131 // The bezier function produces values greater than 1 in (0.23368794, 1) | |
| 132 anim.currentTime = 0; | |
| 133 assert_equals(getComputedStyle(target).left, '0px'); | |
| 134 anim.currentTime = 230; | |
| 135 assert_equals(getComputedStyle(target).left, '0px'); | |
| 136 anim.currentTime = 250; | |
| 137 assert_equals(getComputedStyle(target).left, '100px'); | |
| 138 anim.currentTime = 1000; | |
| 139 assert_equals(getComputedStyle(target).left, '100px'); | |
| 140 }, 'effect easing produces values greater than 1 with step-end keyframe'); | |
| 141 | |
| 142 test(function(t) { | |
| 143 var target = createDiv(t); | |
| 144 target.style.position = 'absolute'; | |
| 145 var anim = target.animate([ { left: '0px', easing: 'step-start' }, | |
| 146 { left: '100px' } ], | |
| 147 { duration: 1000, | |
| 148 fill: 'forwards', | |
| 149 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); | |
| 150 anim.pause(); | |
| 151 | |
| 152 // The bezier function produces negative values in (0, 0.766312060) | |
| 153 anim.currentTime = 0; | |
| 154 assert_equals(getComputedStyle(target).left, '100px'); | |
| 155 anim.currentTime = 750; | |
| 156 assert_equals(getComputedStyle(target).left, '0px'); | |
| 157 anim.currentTime = 800; | |
| 158 assert_equals(getComputedStyle(target).left, '100px'); | |
| 159 anim.currentTime = 1000; | |
| 160 assert_equals(getComputedStyle(target).left, '100px'); | |
| 161 }, 'effect easing produces negative values with step-start keyframe'); | |
| 162 | |
| 163 test(function(t) { | |
| 164 var target = createDiv(t); | |
| 165 target.style.position = 'absolute'; | |
| 166 var anim = target.animate([ { left: '0px', easing: 'step-end' }, | |
| 167 { left: '100px' } ], | |
| 168 { duration: 1000, | |
| 169 fill: 'forwards', | |
| 170 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); | |
| 171 anim.pause(); | |
| 172 | |
| 173 // The bezier function produces negative values in (0, 0.766312060) | |
| 174 anim.currentTime = 0; | |
| 175 assert_equals(getComputedStyle(target).left, '0px'); | |
| 176 anim.currentTime = 750; | |
| 177 assert_equals(getComputedStyle(target).left, '0px'); | |
| 178 anim.currentTime = 800; | |
| 179 assert_equals(getComputedStyle(target).left, '0px'); | |
| 180 anim.currentTime = 1000; | |
| 181 assert_equals(getComputedStyle(target).left, '100px'); | |
| 182 }, 'effect easing produces negative values with step-end keyframe'); | |
| 183 | |
| 184 test(function(t) { | |
| 185 var target = createDiv(t); | |
| 186 target.style.position = 'absolute'; | |
| 187 var anim = target.animate( | |
| 188 // http://cubic-bezier.com/#.5,1,.5,0 | |
| 189 [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' }, | |
| 190 { left: '100px' } ], | |
| 191 { duration: 1000, | |
| 192 fill: 'forwards', | |
| 193 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); | |
| 194 var keyframeEasing = function(x) { | |
| 195 assert_greater_than_equal(x, 0.0, | |
| 196 'This function should be called in [0, 1.0] range'); | |
| 197 assert_less_than_equal(x, 1.0, | |
| 198 'This function should be called in [0, 1.0] range'); | |
| 199 return cubicBezier(0.5, 1, 0.5, 0)(x); | |
| 200 } | |
| 201 var keyframeEasingExtrapolated = function(x) { | |
| 202 assert_greater_than(x, 1.0, | |
| 203 'This function should be called in (1.0, infinity) range'); | |
| 204 // p3x + (p2y - p3y) / (p2x - p3x) * (x - p3x) | |
| 205 return 1.0 + (0 - 1) / (0.5 - 1) * (x - 1.0); | |
| 206 } | |
| 207 var effectEasing = function(x) { | |
| 208 return cubicBezier(0, 1.5, 1, 1.5)(x); | |
| 209 } | |
| 210 | |
| 211 anim.pause(); | |
| 212 | |
| 213 // The effect-easing produces values greater than 1 in (0.23368794, 1) | |
| 214 assert_style_left_at(anim, 0, function(x) { | |
| 215 return keyframeEasing(effectEasing(x)); | |
| 216 }); | |
| 217 assert_style_left_at(anim, 230, function(x) { | |
| 218 return keyframeEasing(effectEasing(x)); | |
| 219 }); | |
| 220 assert_style_left_at(anim, 240, function(x) { | |
| 221 return keyframeEasingExtrapolated(effectEasing(x)); | |
| 222 }); | |
| 223 // Near the extreme point of the effect-easing function | |
| 224 assert_style_left_at(anim, 700, function(x) { | |
| 225 return keyframeEasingExtrapolated(effectEasing(x)); | |
| 226 }); | |
| 227 assert_style_left_at(anim, 990, function(x) { | |
| 228 return keyframeEasingExtrapolated(effectEasing(x)); | |
| 229 }); | |
| 230 assert_style_left_at(anim, 1000, function(x) { | |
| 231 return keyframeEasing(effectEasing(x)); | |
| 232 }); | |
| 233 }, 'effect easing produces values greater than 1 with keyframe easing ' + | |
| 234 'producing values greater than 1'); | |
| 235 | |
| 236 test(function(t) { | |
| 237 var target = createDiv(t); | |
| 238 target.style.position = 'absolute'; | |
| 239 var anim = target.animate( | |
| 240 // http://cubic-bezier.com/#0,1.5,1,1.5 | |
| 241 [ { left: '0px', easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }, | |
| 242 { left: '100px' } ], | |
| 243 { duration: 1000, | |
| 244 fill: 'forwards', | |
| 245 easing: 'cubic-bezier(0, 1.5, 1, 1.5)' }); | |
| 246 var easing = function(x) { | |
| 247 assert_greater_than_equal(x, 0.0, | |
| 248 'This function should be called in [0, 1.0] range'); | |
| 249 assert_less_than_equal(x, 1.0, | |
| 250 'This function should be called in [0, 1.0] range'); | |
| 251 return cubicBezier(0, 1.5, 1, 1.5)(x); | |
| 252 } | |
| 253 var easingExtrapolated = function(x) { | |
| 254 assert_greater_than(x, 1.0, | |
| 255 'This function should be called in negative range'); | |
| 256 // For cubic-bezier(0, 1.5, 1, 1.5), the tangent at the | |
| 257 // endpoint (x = 1.0) is infinity so we should just return 1.0. | |
| 258 return 1.0; | |
| 259 } | |
| 260 | |
| 261 anim.pause(); | |
| 262 | |
| 263 // The effect-easing produces values greater than 1 in (0.23368794, 1) | |
| 264 assert_style_left_at(anim, 0, function(x) { | |
| 265 return easing(easing(x)) | |
| 266 }); | |
| 267 assert_style_left_at(anim, 230, function(x) { | |
| 268 return easing(easing(x)) | |
| 269 }); | |
| 270 assert_style_left_at(anim, 240, function(x) { | |
| 271 return easingExtrapolated(easing(x)); | |
| 272 }); | |
| 273 // Near the extreme point of the effect-easing function | |
| 274 assert_style_left_at(anim, 700, function(x) { | |
| 275 return easingExtrapolated(easing(x)); | |
| 276 }); | |
| 277 assert_style_left_at(anim, 990, function(x) { | |
| 278 return easingExtrapolated(easing(x)); | |
| 279 }); | |
| 280 assert_style_left_at(anim, 1000, function(x) { | |
| 281 return easing(easing(x)) | |
| 282 }); | |
| 283 }, 'effect easing which produces values greater than 1 and the tangent on ' + | |
| 284 'the upper boundary is infinity with keyframe easing producing values ' + | |
| 285 'greater than 1'); | |
| 286 | |
| 287 test(function(t) { | |
| 288 var target = createDiv(t); | |
| 289 target.style.position = 'absolute'; | |
| 290 var anim = target.animate( | |
| 291 // http://cubic-bezier.com/#.5,1,.5,0 | |
| 292 [ { left: '0px', easing: 'cubic-bezier(0.5, 1, 0.5, 0)' }, | |
| 293 { left: '100px' } ], | |
| 294 { duration: 1000, | |
| 295 fill: 'forwards', | |
| 296 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); | |
| 297 var keyframeEasing = function(x) { | |
| 298 assert_greater_than_equal(x, 0.0, | |
| 299 'This function should be called in [0, 1.0] range'); | |
| 300 assert_less_than_equal(x, 1.0, | |
| 301 'This function should be called in [0, 1.0] range'); | |
| 302 return cubicBezier(0.5, 1, 0.5, 0)(x); | |
| 303 } | |
| 304 var keyframeEasingExtrapolated = function(x) { | |
| 305 assert_less_than(x, 0.0, | |
| 306 'This function should be called in negative range'); | |
| 307 // p0x + (p1y - p0y) / (p1x - p0x) * (x - p0x) | |
| 308 return (1 / 0.5) * x; | |
| 309 } | |
| 310 var effectEasing = function(x) { | |
| 311 return cubicBezier(0, -0.5, 1, -0.5)(x); | |
| 312 } | |
| 313 | |
| 314 anim.pause(); | |
| 315 | |
| 316 // The effect-easing produces negative values in (0, 0.766312060) | |
| 317 assert_style_left_at(anim, 0, function(x) { | |
| 318 return keyframeEasing(effectEasing(x)); | |
| 319 }); | |
| 320 assert_style_left_at(anim, 10, function(x) { | |
| 321 return keyframeEasingExtrapolated(effectEasing(x)); | |
| 322 }); | |
| 323 // Near the extreme point of the effect-easing function | |
| 324 assert_style_left_at(anim, 300, function(x) { | |
| 325 return keyframeEasingExtrapolated(effectEasing(x)); | |
| 326 }); | |
| 327 assert_style_left_at(anim, 750, function(x) { | |
| 328 return keyframeEasingExtrapolated(effectEasing(x)); | |
| 329 }); | |
| 330 assert_style_left_at(anim, 770, function(x) { | |
| 331 return keyframeEasing(effectEasing(x)); | |
| 332 }); | |
| 333 assert_style_left_at(anim, 1000, function(x) { | |
| 334 return keyframeEasing(effectEasing(x)); | |
| 335 }); | |
| 336 }, 'effect easing produces negative values with keyframe easing ' + | |
| 337 'producing negative values'); | |
| 338 | |
| 339 test(function(t) { | |
| 340 var target = createDiv(t); | |
| 341 target.style.position = 'absolute'; | |
| 342 var anim = target.animate( | |
| 343 // http://cubic-bezier.com/#0,-0.5,1,-0.5 | |
| 344 [ { left: '0px', easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }, | |
| 345 { left: '100px' } ], | |
| 346 { duration: 1000, | |
| 347 fill: 'forwards', | |
| 348 easing: 'cubic-bezier(0, -0.5, 1, -0.5)' }); | |
| 349 var easing = function(x) { | |
| 350 assert_greater_than_equal(x, 0.0, | |
| 351 'This function should be called in [0, 1.0] range'); | |
| 352 assert_less_than_equal(x, 1.0, | |
| 353 'This function should be called in [0, 1.0] range'); | |
| 354 return cubicBezier(0, -0.5, 1, -0.5)(x); | |
| 355 } | |
| 356 var easingExtrapolated = function(x) { | |
| 357 assert_less_than(x, 0.0, | |
| 358 'This function should be called in negative range'); | |
| 359 // For cubic-bezier(0, -0.5, 1, -0.5), the tangent at the | |
| 360 // endpoint (x = 0.0) is infinity so we should just return 0.0. | |
| 361 return 0.0; | |
| 362 } | |
| 363 | |
| 364 anim.pause(); | |
| 365 | |
| 366 // The effect-easing produces negative values in (0, 0.766312060) | |
| 367 assert_style_left_at(anim, 0, function(x) { | |
| 368 return easing(easing(x)) | |
| 369 }); | |
| 370 assert_style_left_at(anim, 10, function(x) { | |
| 371 return easingExtrapolated(easing(x)); | |
| 372 }); | |
| 373 // Near the extreme point of the effect-easing function | |
| 374 assert_style_left_at(anim, 300, function(x) { | |
| 375 return easingExtrapolated(easing(x)); | |
| 376 }); | |
| 377 assert_style_left_at(anim, 750, function(x) { | |
| 378 return easingExtrapolated(easing(x)); | |
| 379 }); | |
| 380 assert_style_left_at(anim, 770, function(x) { | |
| 381 return easing(easing(x)) | |
| 382 }); | |
| 383 assert_style_left_at(anim, 1000, function(x) { | |
| 384 return easing(easing(x)) | |
| 385 }); | |
| 386 }, 'effect easing which produces negative values and the tangent on ' + | |
| 387 'the lower boundary is infinity with keyframe easing producing ' + | |
| 388 'negative values'); | |
| 389 | |
| 390 var gStepTimingFunctionTests = [ | |
| 391 { | |
| 392 description: 'Test bounds point of step-start easing', | |
| 393 keyframe: [ { width: '0px' }, | |
| 394 { width: '100px' } ], | |
| 395 effect: { | |
| 396 delay: 1000, | |
| 397 duration: 1000, | |
| 398 fill: 'both', | |
| 399 easing: 'steps(2, start)' | |
| 400 }, | |
| 401 conditions: [ | |
| 402 { currentTime: 0, progress: 0 }, | |
| 403 { currentTime: 999, progress: 0 }, | |
| 404 { currentTime: 1000, progress: 0.5 }, | |
| 405 { currentTime: 1499, progress: 0.5 }, | |
| 406 { currentTime: 1500, progress: 1 }, | |
| 407 { currentTime: 2000, progress: 1 } | |
| 408 ] | |
| 409 }, | |
| 410 { | |
| 411 description: 'Test bounds point of step-start easing with compositor', | |
| 412 keyframe: [ { opacity: 0 }, | |
| 413 { opacity: 1 } ], | |
| 414 effect: { | |
| 415 delay: 1000, | |
| 416 duration: 1000, | |
| 417 fill: 'both', | |
| 418 easing: 'steps(2, start)' | |
| 419 }, | |
| 420 conditions: [ | |
| 421 { currentTime: 0, progress: 0 }, | |
| 422 { currentTime: 999, progress: 0 }, | |
| 423 { currentTime: 1000, progress: 0.5 }, | |
| 424 { currentTime: 1499, progress: 0.5 }, | |
| 425 { currentTime: 1500, progress: 1 }, | |
| 426 { currentTime: 2000, progress: 1 } | |
| 427 ] | |
| 428 }, | |
| 429 { | |
| 430 description: 'Test bounds point of step-start easing with reverse direction'
, | |
| 431 keyframe: [ { width: '0px' }, | |
| 432 { width: '100px' } ], | |
| 433 effect: { | |
| 434 delay: 1000, | |
| 435 duration: 1000, | |
| 436 fill: 'both', | |
| 437 direction: 'reverse', | |
| 438 easing: 'steps(2, start)' | |
| 439 }, | |
| 440 conditions: [ | |
| 441 { currentTime: 0, progress: 1 }, | |
| 442 { currentTime: 1001, progress: 1 }, | |
| 443 { currentTime: 1500, progress: 1 }, | |
| 444 { currentTime: 1501, progress: 0.5 }, | |
| 445 { currentTime: 2000, progress: 0 }, | |
| 446 { currentTime: 2500, progress: 0 } | |
| 447 ] | |
| 448 }, | |
| 449 { | |
| 450 description: 'Test bounds point of step-start easing ' + | |
| 451 'with iterationStart not at a transition point', | |
| 452 keyframe: [ { width: '0px' }, | |
| 453 { width: '100px' } ], | |
| 454 effect: { | |
| 455 delay: 1000, | |
| 456 duration: 1000, | |
| 457 fill: 'both', | |
| 458 iterationStart: 0.25, | |
| 459 easing: 'steps(2, start)' | |
| 460 }, | |
| 461 conditions: [ | |
| 462 { currentTime: 0, progress: 0.5 }, | |
| 463 { currentTime: 999, progress: 0.5 }, | |
| 464 { currentTime: 1000, progress: 0.5 }, | |
| 465 { currentTime: 1249, progress: 0.5 }, | |
| 466 { currentTime: 1250, progress: 1 }, | |
| 467 { currentTime: 1749, progress: 1 }, | |
| 468 { currentTime: 1750, progress: 0.5 }, | |
| 469 { currentTime: 2000, progress: 0.5 }, | |
| 470 { currentTime: 2500, progress: 0.5 }, | |
| 471 ] | |
| 472 }, | |
| 473 { | |
| 474 description: 'Test bounds point of step-start easing ' + | |
| 475 'with iterationStart and delay', | |
| 476 keyframe: [ { width: '0px' }, | |
| 477 { width: '100px' } ], | |
| 478 effect: { | |
| 479 delay: 1000, | |
| 480 duration: 1000, | |
| 481 fill: 'both', | |
| 482 iterationStart: 0.5, | |
| 483 easing: 'steps(2, start)' | |
| 484 }, | |
| 485 conditions: [ | |
| 486 { currentTime: 0, progress: 0.5 }, | |
| 487 { currentTime: 999, progress: 0.5 }, | |
| 488 { currentTime: 1000, progress: 1 }, | |
| 489 { currentTime: 1499, progress: 1 }, | |
| 490 { currentTime: 1500, progress: 0.5 }, | |
| 491 { currentTime: 2000, progress: 1 } | |
| 492 ] | |
| 493 }, | |
| 494 { | |
| 495 description: 'Test bounds point of step-start easing ' + | |
| 496 'with iterationStart and reverse direction', | |
| 497 keyframe: [ { width: '0px' }, | |
| 498 { width: '100px' } ], | |
| 499 effect: { | |
| 500 delay: 1000, | |
| 501 duration: 1000, | |
| 502 fill: 'both', | |
| 503 iterationStart: 0.5, | |
| 504 direction: 'reverse', | |
| 505 easing: 'steps(2, start)' | |
| 506 }, | |
| 507 conditions: [ | |
| 508 { currentTime: 0, progress: 1 }, | |
| 509 { currentTime: 1000, progress: 1 }, | |
| 510 { currentTime: 1001, progress: 0.5 }, | |
| 511 { currentTime: 1499, progress: 0.5 }, | |
| 512 { currentTime: 1500, progress: 1 }, | |
| 513 { currentTime: 1999, progress: 1 }, | |
| 514 { currentTime: 2000, progress: 0.5 }, | |
| 515 { currentTime: 2500, progress: 0.5 } | |
| 516 ] | |
| 517 }, | |
| 518 { | |
| 519 description: 'Test bounds point of step(4, start) easing ' + | |
| 520 'with iterationStart 0.75 and delay', | |
| 521 keyframe: [ { width: '0px' }, | |
| 522 { width: '100px' } ], | |
| 523 effect: { | |
| 524 duration: 1000, | |
| 525 fill: 'both', | |
| 526 delay: 1000, | |
| 527 iterationStart: 0.75, | |
| 528 easing: 'steps(4, start)' | |
| 529 }, | |
| 530 conditions: [ | |
| 531 { currentTime: 0, progress: 0.75 }, | |
| 532 { currentTime: 999, progress: 0.75 }, | |
| 533 { currentTime: 1000, progress: 1 }, | |
| 534 { currentTime: 2000, progress: 1 }, | |
| 535 { currentTime: 2500, progress: 1 } | |
| 536 ] | |
| 537 }, | |
| 538 { | |
| 539 description: 'Test bounds point of step-start easing ' + | |
| 540 'with alternate direction', | |
| 541 keyframe: [ { width: '0px' }, | |
| 542 { width: '100px' } ], | |
| 543 effect: { | |
| 544 duration: 1000, | |
| 545 fill: 'both', | |
| 546 delay: 1000, | |
| 547 iterations: 2, | |
| 548 iterationStart: 1.5, | |
| 549 direction: 'alternate', | |
| 550 easing: 'steps(2, start)' | |
| 551 }, | |
| 552 conditions: [ | |
| 553 { currentTime: 0, progress: 1 }, | |
| 554 { currentTime: 1000, progress: 1 }, | |
| 555 { currentTime: 1001, progress: 0.5 }, | |
| 556 { currentTime: 2999, progress: 1 }, | |
| 557 { currentTime: 3000, progress: 0.5 }, | |
| 558 { currentTime: 3500, progress: 0.5 } | |
| 559 ] | |
| 560 }, | |
| 561 { | |
| 562 description: 'Test bounds point of step-start easing ' + | |
| 563 'with alternate-reverse direction', | |
| 564 keyframe: [ { width: '0px' }, | |
| 565 { width: '100px' } ], | |
| 566 effect: { | |
| 567 duration: 1000, | |
| 568 fill: 'both', | |
| 569 delay: 1000, | |
| 570 iterations: 2, | |
| 571 iterationStart: 0.5, | |
| 572 direction: 'alternate-reverse', | |
| 573 easing: 'steps(2, start)' | |
| 574 }, | |
| 575 conditions: [ | |
| 576 { currentTime: 0, progress: 1 }, | |
| 577 { currentTime: 1000, progress: 1 }, | |
| 578 { currentTime: 1001, progress: 0.5 }, | |
| 579 { currentTime: 2999, progress: 1 }, | |
| 580 { currentTime: 3000, progress: 0.5 }, | |
| 581 { currentTime: 3500, progress: 0.5 } | |
| 582 ] | |
| 583 }, | |
| 584 { | |
| 585 description: 'Test bounds point of step-start easing in keyframe', | |
| 586 keyframe: [ { width: '0px', easing: 'steps(2, start)' }, | |
| 587 { width: '100px' } ], | |
| 588 effect: { | |
| 589 delay: 1000, | |
| 590 duration: 1000, | |
| 591 fill: 'both', | |
| 592 }, | |
| 593 conditions: [ | |
| 594 { currentTime: 0, progress: 0, width: '0px' }, | |
| 595 { currentTime: 999, progress: 0, width: '0px' }, | |
| 596 { currentTime: 1000, progress: 0, width: '50px' }, | |
| 597 { currentTime: 1499, progress: 0.499, width: '50px' }, | |
| 598 { currentTime: 1500, progress: 0.5, width: '100px' }, | |
| 599 { currentTime: 2000, progress: 1, width: '100px' }, | |
| 600 { currentTime: 2500, progress: 1, width: '100px' } | |
| 601 ] | |
| 602 }, | |
| 603 { | |
| 604 description: 'Test bounds point of step-end easing ' + | |
| 605 'with iterationStart and delay', | |
| 606 keyframe: [ { width: '0px' }, | |
| 607 { width: '100px' } ], | |
| 608 effect: { | |
| 609 duration: 1000, | |
| 610 fill: 'both', | |
| 611 delay: 1000, | |
| 612 iterationStart: 0.5, | |
| 613 easing: 'steps(2, end)' | |
| 614 }, | |
| 615 conditions: [ | |
| 616 { currentTime: 0, progress: 0 }, | |
| 617 { currentTime: 999, progress: 0 }, | |
| 618 { currentTime: 1000, progress: 0.5 }, | |
| 619 { currentTime: 1499, progress: 0.5 }, | |
| 620 { currentTime: 1500, progress: 0 }, | |
| 621 { currentTime: 1999, progress: 0 }, | |
| 622 { currentTime: 2000, progress: 0.5 }, | |
| 623 { currentTime: 2500, progress: 0.5 } | |
| 624 ] | |
| 625 }, | |
| 626 { | |
| 627 description: 'Test bounds point of step-end easing ' + | |
| 628 'with iterationStart not at a transition point', | |
| 629 keyframe: [ { width: '0px' }, | |
| 630 { width: '100px' } ], | |
| 631 effect: { | |
| 632 delay: 1000, | |
| 633 duration: 1000, | |
| 634 fill: 'both', | |
| 635 iterationStart: 0.75, | |
| 636 easing: 'steps(2, end)' | |
| 637 }, | |
| 638 conditions: [ | |
| 639 { currentTime: 0, progress: 0.5 }, | |
| 640 { currentTime: 999, progress: 0.5 }, | |
| 641 { currentTime: 1000, progress: 0.5 }, | |
| 642 { currentTime: 1249, progress: 0.5 }, | |
| 643 { currentTime: 1250, progress: 0 }, | |
| 644 { currentTime: 1749, progress: 0 }, | |
| 645 { currentTime: 1750, progress: 0.5 }, | |
| 646 { currentTime: 2000, progress: 0.5 }, | |
| 647 { currentTime: 2500, progress: 0.5 }, | |
| 648 ] | |
| 649 } | |
| 650 ]; | |
| 651 | |
| 652 gStepTimingFunctionTests.forEach(function(options) { | |
| 653 test(function(t) { | |
| 654 var target = createDiv(t); | |
| 655 var animation = target.animate(options.keyframe, options.effect); | |
| 656 options.conditions.forEach(function(condition) { | |
| 657 animation.currentTime = condition.currentTime; | |
| 658 if (typeof condition.progress !== 'undefined') { | |
| 659 assert_equals(animation.effect.getComputedTiming().progress, | |
| 660 condition.progress, | |
| 661 'Progress at ' + animation.currentTime + 'ms'); | |
| 662 } | |
| 663 if (typeof condition.width !== 'undefined') { | |
| 664 assert_equals(getComputedStyle(target).width, | |
| 665 condition.width, | |
| 666 'Progress at ' + animation.currentTime + 'ms'); | |
| 667 } | |
| 668 }); | |
| 669 }, options.description); | |
| 670 }); | |
| 671 | |
| 672 gInvalidEasingTests.forEach(function(options) { | |
| 673 test(function(t) { | |
| 674 var div = createDiv(t); | |
| 675 assert_throws({ name: 'TypeError' }, | |
| 676 function() { | |
| 677 div.animate({ easing: options.easing }, 100 * MS_PER_SEC); | |
| 678 }); | |
| 679 }, 'Invalid keyframe easing value: \'' + options.easing + '\''); | |
| 680 }); | |
| 681 | |
| 682 </script> | |
| 683 </body> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2695813009:
Import wpt@503f5b5f78ec4e87d144f78609f363f0ed0ea8db (Closed)
