transformed-progress.html (16090B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>Transformed progress</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#calculating-the-transformed-progress"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../../testcommon.js"></script> 8 <script src="../../resources/easing-tests.js"></script> 9 <body> 10 <div id="log"></div> 11 <div id="target"></div> 12 <script> 13 'use strict'; 14 15 for (const params of gEasingTests) { 16 test(t => { 17 const target = createDiv(t); 18 const anim = target.animate(null, { duration: 1000, 19 fill: 'forwards', 20 easing: params.easing }); 21 22 for (const sampleTime of [0, 250, 500, 750, 1000]) { 23 anim.currentTime = sampleTime; 24 const portion = sampleTime / anim.effect.getComputedTiming().duration; 25 const expectedProgress = params.easingFunction(portion); 26 assert_approx_equals(anim.effect.getComputedTiming().progress, 27 expectedProgress, 28 0.01, 29 'The progress should be approximately ' + 30 `${expectedProgress} at ${sampleTime}ms`); 31 } 32 }, `Transformed progress for ${params.desc}`); 33 } 34 35 // Additional tests for various boundary conditions of step timing functions. 36 37 const gStepTimingFunctionTests = [ 38 { 39 description: 'Test bounds point of step-start easing', 40 effect: { 41 delay: 1000, 42 duration: 1000, 43 fill: 'both', 44 easing: 'steps(2, start)' 45 }, 46 conditions: [ 47 { currentTime: 0, progress: 0 }, 48 { currentTime: 999, progress: 0 }, 49 { currentTime: 1000, progress: 0.5 }, 50 { currentTime: 1499, progress: 0.5 }, 51 { currentTime: 1500, progress: 1 }, 52 { currentTime: 2000, progress: 1 } 53 ] 54 }, 55 { 56 description: 'Test start bounds of step-start easing with no delay', 57 effect: { 58 delay: 0, 59 duration: 1000, 60 fill: 'backwards', 61 easing: 'steps(1, start)' 62 }, 63 conditions: [ 64 { currentTime: -1, progress: 0 }, 65 { currentTime: 0, progress: 1 } 66 ] 67 }, 68 { 69 description: 'Test bounds point of step-start easing with reverse direction', 70 effect: { 71 delay: 1000, 72 duration: 1000, 73 fill: 'both', 74 direction: 'reverse', 75 easing: 'steps(2, start)' 76 }, 77 conditions: [ 78 { currentTime: 0, progress: 1 }, 79 { currentTime: 1001, progress: 1 }, 80 { currentTime: 1500, progress: 1 }, 81 { currentTime: 1501, progress: 0.5 }, 82 { currentTime: 2000, progress: 0 }, 83 { currentTime: 2500, progress: 0 } 84 ] 85 }, 86 { 87 description: 'Test bounds point of step-start easing ' + 88 'with iterationStart not at a transition point', 89 effect: { 90 delay: 1000, 91 duration: 1000, 92 fill: 'both', 93 iterationStart: 0.25, 94 easing: 'steps(2, start)' 95 }, 96 conditions: [ 97 { currentTime: 0, progress: 0.5 }, 98 { currentTime: 999, progress: 0.5 }, 99 { currentTime: 1000, progress: 0.5 }, 100 { currentTime: 1249, progress: 0.5 }, 101 { currentTime: 1250, progress: 1 }, 102 { currentTime: 1749, progress: 1 }, 103 { currentTime: 1750, progress: 0.5 }, 104 { currentTime: 2000, progress: 0.5 }, 105 { currentTime: 2500, progress: 0.5 }, 106 ] 107 }, 108 { 109 description: 'Test bounds point of step-start easing ' + 110 'with iterationStart and delay', 111 effect: { 112 delay: 1000, 113 duration: 1000, 114 fill: 'both', 115 iterationStart: 0.5, 116 easing: 'steps(2, start)' 117 }, 118 conditions: [ 119 { currentTime: 0, progress: 0.5 }, 120 { currentTime: 999, progress: 0.5 }, 121 { currentTime: 1000, progress: 1 }, 122 { currentTime: 1499, progress: 1 }, 123 { currentTime: 1500, progress: 0.5 }, 124 { currentTime: 2000, progress: 1 } 125 ] 126 }, 127 { 128 description: 'Test bounds point of step-start easing ' + 129 'with iterationStart and reverse direction', 130 effect: { 131 delay: 1000, 132 duration: 1000, 133 fill: 'both', 134 iterationStart: 0.5, 135 direction: 'reverse', 136 easing: 'steps(2, start)' 137 }, 138 conditions: [ 139 { currentTime: 0, progress: 1 }, 140 { currentTime: 1000, progress: 1 }, 141 { currentTime: 1001, progress: 0.5 }, 142 { currentTime: 1499, progress: 0.5 }, 143 { currentTime: 1500, progress: 1 }, 144 { currentTime: 1999, progress: 1 }, 145 { currentTime: 2000, progress: 0.5 }, 146 { currentTime: 2500, progress: 0.5 } 147 ] 148 }, 149 { 150 description: 'Test bounds point of step(4, start) easing ' + 151 'with iterationStart 0.75 and delay', 152 effect: { 153 duration: 1000, 154 fill: 'both', 155 delay: 1000, 156 iterationStart: 0.75, 157 easing: 'steps(4, start)' 158 }, 159 conditions: [ 160 { currentTime: 0, progress: 0.75 }, 161 { currentTime: 999, progress: 0.75 }, 162 { currentTime: 1000, progress: 1 }, 163 { currentTime: 2000, progress: 1 }, 164 { currentTime: 2500, progress: 1 } 165 ] 166 }, 167 { 168 description: 'Test bounds point of step-start easing ' + 169 'with alternate direction', 170 effect: { 171 duration: 1000, 172 fill: 'both', 173 delay: 1000, 174 iterations: 2, 175 iterationStart: 1.5, 176 direction: 'alternate', 177 easing: 'steps(2, start)' 178 }, 179 conditions: [ 180 { currentTime: 0, progress: 1 }, 181 { currentTime: 1000, progress: 1 }, 182 { currentTime: 1001, progress: 0.5 }, 183 { currentTime: 2999, progress: 1 }, 184 { currentTime: 3000, progress: 0.5 }, 185 { currentTime: 3500, progress: 0.5 } 186 ] 187 }, 188 { 189 description: 'Test bounds point of step-start easing ' + 190 'with alternate-reverse direction', 191 effect: { 192 duration: 1000, 193 fill: 'both', 194 delay: 1000, 195 iterations: 2, 196 iterationStart: 0.5, 197 direction: 'alternate-reverse', 198 easing: 'steps(2, start)' 199 }, 200 conditions: [ 201 { currentTime: 0, progress: 1 }, 202 { currentTime: 1000, progress: 1 }, 203 { currentTime: 1001, progress: 0.5 }, 204 { currentTime: 2999, progress: 1 }, 205 { currentTime: 3000, progress: 0.5 }, 206 { currentTime: 3500, progress: 0.5 } 207 ] 208 }, 209 { 210 description: 'Test bounds point of step-end easing', 211 effect: { 212 delay: 1000, 213 duration: 1000, 214 fill: 'both', 215 easing: 'steps(2, end)' 216 }, 217 conditions: [ 218 { currentTime: 0, progress: 0 }, 219 { currentTime: 999, progress: 0 }, 220 { currentTime: 1000, progress: 0 }, 221 { currentTime: 1499, progress: 0 }, 222 { currentTime: 1500, progress: 0.5 }, 223 { currentTime: 2000, progress: 1 } 224 ] 225 }, 226 { 227 description: 'Test bounds point of step-end easing ' + 228 'with iterationStart and delay', 229 effect: { 230 duration: 1000, 231 fill: 'both', 232 delay: 1000, 233 iterationStart: 0.5, 234 easing: 'steps(2, end)' 235 }, 236 conditions: [ 237 { currentTime: 0, progress: 0 }, 238 { currentTime: 999, progress: 0 }, 239 { currentTime: 1000, progress: 0.5 }, 240 { currentTime: 1499, progress: 0.5 }, 241 { currentTime: 1500, progress: 0 }, 242 { currentTime: 1999, progress: 0 }, 243 { currentTime: 2000, progress: 0.5 }, 244 { currentTime: 2500, progress: 0.5 } 245 ] 246 }, 247 { 248 description: 'Test bounds point of step-end easing ' + 249 'with iterationStart not at a transition point', 250 effect: { 251 delay: 1000, 252 duration: 1000, 253 fill: 'both', 254 iterationStart: 0.75, 255 easing: 'steps(2, end)' 256 }, 257 conditions: [ 258 { currentTime: 0, progress: 0.5 }, 259 { currentTime: 999, progress: 0.5 }, 260 { currentTime: 1000, progress: 0.5 }, 261 { currentTime: 1249, progress: 0.5 }, 262 { currentTime: 1250, progress: 0 }, 263 { currentTime: 1749, progress: 0 }, 264 { currentTime: 1750, progress: 0.5 }, 265 { currentTime: 2000, progress: 0.5 }, 266 { currentTime: 2500, progress: 0.5 }, 267 ] 268 }, 269 { 270 description: 'Test bounds point of steps(jump-both) easing', 271 effect: { 272 delay: 1000, 273 duration: 1000, 274 fill: 'both', 275 easing: 'steps(2, jump-both)' 276 }, 277 conditions: [ 278 { currentTime: 0, progress: 0 }, 279 { currentTime: 999, progress: 0 }, 280 { currentTime: 1000, progress: 1/3 }, 281 { currentTime: 1499, progress: 1/3 }, 282 { currentTime: 1500, progress: 2/3 }, 283 { currentTime: 2000, progress: 1 } 284 ] 285 }, 286 { 287 description: 'Test bounds point of steps(jump-both) easing ' + 288 'with iterationStart and delay', 289 effect: { 290 duration: 1000, 291 fill: 'both', 292 delay: 1000, 293 iterationStart: 0.5, 294 easing: 'steps(2, jump-both)' 295 }, 296 conditions: [ 297 { currentTime: 0, progress: 1/3 }, 298 { currentTime: 999, progress: 1/3 }, 299 { currentTime: 1000, progress: 2/3 }, 300 { currentTime: 1499, progress: 2/3 }, 301 { currentTime: 1500, progress: 1/3 }, 302 { currentTime: 1999, progress: 1/3 }, 303 { currentTime: 2000, progress: 2/3 }, 304 { currentTime: 2500, progress: 2/3 } 305 ] 306 }, 307 { 308 description: 'Test bounds point of steps(jump-both) easing ' + 309 'with iterationStart not at a transition point', 310 effect: { 311 delay: 1000, 312 duration: 1000, 313 fill: 'both', 314 iterationStart: 0.75, 315 easing: 'steps(2, jump-both)' 316 }, 317 conditions: [ 318 { currentTime: 0, progress: 2/3 }, 319 { currentTime: 999, progress: 2/3 }, 320 { currentTime: 1000, progress: 2/3 }, 321 { currentTime: 1249, progress: 2/3 }, 322 { currentTime: 1250, progress: 1/3 }, 323 { currentTime: 1749, progress: 1/3 }, 324 { currentTime: 1750, progress: 2/3 }, 325 { currentTime: 2000, progress: 2/3 }, 326 { currentTime: 2500, progress: 2/3 } 327 ] 328 }, 329 { 330 description: 'Test bounds point of steps(jump-none) easing', 331 effect: { 332 delay: 1000, 333 duration: 1000, 334 fill: 'both', 335 easing: 'steps(2, jump-none)' 336 }, 337 conditions: [ 338 { currentTime: 0, progress: 0 }, 339 { currentTime: 1000, progress: 0 }, 340 { currentTime: 1499, progress: 0 }, 341 { currentTime: 1500, progress: 1 }, 342 { currentTime: 2000, progress: 1 } 343 ] 344 }, 345 { 346 description: 'Test bounds point of steps(jump-none) easing ' + 347 'with iterationStart and delay', 348 effect: { 349 duration: 1000, 350 fill: 'both', 351 delay: 1000, 352 iterationStart: 0.5, 353 easing: 'steps(2, jump-none)' 354 }, 355 conditions: [ 356 { currentTime: 0, progress: 0 }, 357 { currentTime: 999, progress: 0 }, 358 { currentTime: 1000, progress: 1 }, 359 { currentTime: 1499, progress: 1 }, 360 { currentTime: 1500, progress: 0 }, 361 { currentTime: 1999, progress: 0 }, 362 { currentTime: 2000, progress: 1 }, 363 { currentTime: 2500, progress: 1 } 364 ] 365 }, 366 { 367 description: 'Test bounds point of steps(jump-none) easing ' + 368 'with iterationStart not at a transition point', 369 effect: { 370 delay: 1000, 371 duration: 1000, 372 fill: 'both', 373 iterationStart: 0.75, 374 easing: 'steps(2, jump-none)' 375 }, 376 conditions: [ 377 { currentTime: 0, progress: 1 }, 378 { currentTime: 999, progress: 1 }, 379 { currentTime: 1000, progress: 1 }, 380 { currentTime: 1249, progress: 1 }, 381 { currentTime: 1250, progress: 0 }, 382 { currentTime: 1749, progress: 0 }, 383 { currentTime: 1750, progress: 1 }, 384 { currentTime: 2000, progress: 1 }, 385 { currentTime: 2500, progress: 1 } 386 ] 387 }, 388 ]; 389 390 for (const options of gStepTimingFunctionTests) { 391 test(t => { 392 const target = createDiv(t); 393 const animation = target.animate(null, options.effect); 394 for (const condition of options.conditions) { 395 animation.currentTime = condition.currentTime; 396 assert_equals(animation.effect.getComputedTiming().progress, 397 condition.progress, 398 `Progress at ${animation.currentTime}ms`); 399 } 400 }, options.description); 401 } 402 403 test(t => { 404 const target = createDiv(t); 405 const anim = target.animate( 406 [ 407 { easing: 'steps(1, start)', opacity: 0 }, 408 { opacity: 1 } 409 ], 410 { easing: 'linear(-2, 2)', duration: 1000, fill: 'both' }); 411 412 anim.currentTime = 0; 413 assert_equals(anim.effect.getComputedTiming().progress, -2); 414 // Input < 0 ==> output = 0. 415 assert_equals(getComputedStyle(target).opacity, "0"); 416 anim.currentTime = 500; 417 assert_equals(anim.effect.getComputedTiming().progress, 0); 418 // Input = 0 & before flag = false ==> output = 1. 419 assert_equals(getComputedStyle(target).opacity, "1"); 420 anim.currentTime = 1000; 421 // Input > 0 & before flag = false ==> output = 1. 422 assert_equals(anim.effect.getComputedTiming().progress, 2); 423 assert_equals(getComputedStyle(target).opacity, "1"); 424 425 }, 'Test global timing function with values outside [0,1] with a step ' + 426 'timing function on the keyframe'); 427 428 </script> 429 </body>