| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <meta charset=utf-8> |
| 3 <title>KeyframeEffect.iterationComposite tests</title> |
| 4 <link rel="help" href="https://w3c.github.io/web-animations/#effect-accumulation
-section"> |
| 5 <script src=/resources/testharness.js></script> |
| 6 <script src=/resources/testharnessreport.js></script> |
| 7 <script src="../../testcommon.js"></script> |
| 8 <div id="log"></div> |
| 9 <script> |
| 10 'use strict'; |
| 11 |
| 12 test(function(t) { |
| 13 var div = createDiv(t); |
| 14 var anim = |
| 15 div.animate({ marginLeft: ['0px', '10px'] }, |
| 16 { duration: 100 * MS_PER_SEC, |
| 17 easing: 'linear', |
| 18 iterations: 10, |
| 19 iterationComposite: 'accumulate' }); |
| 20 anim.pause(); |
| 21 |
| 22 anim.currentTime = anim.effect.timing.duration / 2; |
| 23 assert_equals(getComputedStyle(div).marginLeft, '5px', |
| 24 'Animated margin-left style at 50s of the first iteration'); |
| 25 anim.currentTime = anim.effect.timing.duration * 2; |
| 26 assert_equals(getComputedStyle(div).marginLeft, '20px', |
| 27 'Animated margin-left style at 0s of the third iteration'); |
| 28 anim.currentTime += anim.effect.timing.duration / 2; |
| 29 assert_equals(getComputedStyle(div).marginLeft, '25px', |
| 30 'Animated margin-left style at 50s of the third iteration'); |
| 31 }, 'iterationComposite of <length> type animation'); |
| 32 |
| 33 test(function(t) { |
| 34 var parent = createDiv(t); |
| 35 parent.style.width = '100px'; |
| 36 var div = createDiv(t); |
| 37 parent.appendChild(div); |
| 38 |
| 39 var anim = |
| 40 div.animate({ width: ['0%', '50%'] }, |
| 41 { duration: 100 * MS_PER_SEC, |
| 42 easing: 'linear', |
| 43 iterations: 10, |
| 44 iterationComposite: 'accumulate' }); |
| 45 anim.pause(); |
| 46 |
| 47 anim.currentTime = anim.effect.timing.duration / 2; |
| 48 assert_equals(getComputedStyle(div).width, '25px', |
| 49 'Animated width style at 50s of the first iteration'); |
| 50 anim.currentTime = anim.effect.timing.duration * 2; |
| 51 assert_equals(getComputedStyle(div).width, '100px', |
| 52 'Animated width style at 0s of the third iteration'); |
| 53 anim.currentTime += anim.effect.timing.duration / 2; |
| 54 assert_equals(getComputedStyle(div).width, '125px', |
| 55 'Animated width style at 50s of the third iteration'); |
| 56 }, 'iterationComposite of <percentage> type animation'); |
| 57 |
| 58 test(function(t) { |
| 59 var div = createDiv(t); |
| 60 var anim = |
| 61 div.animate({ color: ['rgb(0, 0, 0)', 'rgb(120, 120, 120)'] }, |
| 62 { duration: 100 * MS_PER_SEC, |
| 63 easing: 'linear', |
| 64 iterations: 10, |
| 65 iterationComposite: 'accumulate' }); |
| 66 anim.pause(); |
| 67 |
| 68 anim.currentTime = anim.effect.timing.duration / 2; |
| 69 assert_equals(getComputedStyle(div).color, 'rgb(60, 60, 60)', |
| 70 'Animated color style at 50s of the first iteration'); |
| 71 anim.currentTime = anim.effect.timing.duration * 2; |
| 72 assert_equals(getComputedStyle(div).color, 'rgb(240, 240, 240)', |
| 73 'Animated color style at 0s of the third iteration'); |
| 74 anim.currentTime += anim.effect.timing.duration / 2; |
| 75 assert_equals(getComputedStyle(div).color, 'rgb(255, 255, 255)', |
| 76 'Animated color style at 50s of the third iteration'); |
| 77 }, 'iterationComposite of <color> type animation'); |
| 78 |
| 79 test(function(t) { |
| 80 var div = createDiv(t); |
| 81 var anim = |
| 82 div.animate({ color: ['rgb(0, 120, 0)', 'rgb(60, 60, 60)'] }, |
| 83 { duration: 100 * MS_PER_SEC, |
| 84 easing: 'linear', |
| 85 iterations: 10, |
| 86 iterationComposite: 'accumulate' }); |
| 87 anim.pause(); |
| 88 |
| 89 anim.currentTime = anim.effect.timing.duration / 2; |
| 90 assert_equals(getComputedStyle(div).color, 'rgb(30, 90, 30)', |
| 91 'Animated color style at 50s of the first iteration'); |
| 92 anim.currentTime = anim.effect.timing.duration * 2; |
| 93 assert_equals(getComputedStyle(div).color, 'rgb(120, 240, 120)', |
| 94 'Animated color style at 0s of the third iteration'); |
| 95 anim.currentTime += anim.effect.timing.duration / 2; |
| 96 // The green color is (240 + 180) / 2 = 210 |
| 97 assert_equals(getComputedStyle(div).color, 'rgb(150, 210, 150)', |
| 98 'Animated color style at 50s of the third iteration'); |
| 99 }, 'iterationComposite of <color> type animation that green component is ' + |
| 100 'decreasing'); |
| 101 |
| 102 test(function(t) { |
| 103 var div = createDiv(t); |
| 104 var anim = |
| 105 div.animate({ flexGrow: [0, 10] }, |
| 106 { duration: 100 * MS_PER_SEC, |
| 107 easing: 'linear', |
| 108 iterations: 10, |
| 109 iterationComposite: 'accumulate' }); |
| 110 anim.pause(); |
| 111 |
| 112 anim.currentTime = anim.effect.timing.duration / 2; |
| 113 assert_equals(getComputedStyle(div).flexGrow, '5', |
| 114 'Animated flex-grow style at 50s of the first iteration'); |
| 115 anim.currentTime = anim.effect.timing.duration * 2; |
| 116 assert_equals(getComputedStyle(div).flexGrow, '20', |
| 117 'Animated flex-grow style at 0s of the third iteration'); |
| 118 anim.currentTime += anim.effect.timing.duration / 2; |
| 119 assert_equals(getComputedStyle(div).flexGrow, '25', |
| 120 'Animated flex-grow style at 50s of the third iteration'); |
| 121 }, 'iterationComposite of <number> type animation'); |
| 122 |
| 123 test(function(t) { |
| 124 var div = createDiv(t); |
| 125 div.style.position = 'absolute'; |
| 126 var anim = |
| 127 div.animate({ clip: ['rect(0px, 0px, 0px, 0px)', |
| 128 'rect(10px, 10px, 10px, 10px)'] }, |
| 129 { duration: 100 * MS_PER_SEC, |
| 130 easing: 'linear', |
| 131 iterations: 10, |
| 132 iterationComposite: 'accumulate' }); |
| 133 anim.pause(); |
| 134 |
| 135 anim.currentTime = anim.effect.timing.duration / 2; |
| 136 assert_equals(getComputedStyle(div).clip, 'rect(5px, 5px, 5px, 5px)', |
| 137 'Animated clip style at 50s of the first iteration'); |
| 138 anim.currentTime = anim.effect.timing.duration * 2; |
| 139 assert_equals(getComputedStyle(div).clip, 'rect(20px, 20px, 20px, 20px)', |
| 140 'Animated clip style at 0s of the third iteration'); |
| 141 anim.currentTime += anim.effect.timing.duration / 2; |
| 142 assert_equals(getComputedStyle(div).clip, 'rect(25px, 25px, 25px, 25px)', |
| 143 'Animated clip style at 50s of the third iteration'); |
| 144 }, 'iterationComposite of <shape> type animation'); |
| 145 |
| 146 test(function(t) { |
| 147 var div = createDiv(t); |
| 148 var anim = |
| 149 div.animate({ width: ['calc(0vw + 0px)', 'calc(0vw + 10px)'] }, |
| 150 { duration: 100 * MS_PER_SEC, |
| 151 easing: 'linear', |
| 152 iterations: 10, |
| 153 iterationComposite: 'accumulate' }); |
| 154 anim.pause(); |
| 155 |
| 156 anim.currentTime = anim.effect.timing.duration / 2; |
| 157 assert_equals(getComputedStyle(div).width, '5px', |
| 158 'Animated calc width style at 50s of the first iteration'); |
| 159 anim.currentTime = anim.effect.timing.duration * 2; |
| 160 assert_equals(getComputedStyle(div).width, '20px', |
| 161 'Animated calc width style at 0s of the third iteration'); |
| 162 anim.currentTime += anim.effect.timing.duration / 2; |
| 163 assert_equals(getComputedStyle(div).width, '25px', |
| 164 'Animated calc width style at 50s of the third iteration'); |
| 165 }, 'iterationComposite of <calc()> value animation'); |
| 166 |
| 167 test(function(t) { |
| 168 var parent = createDiv(t); |
| 169 parent.style.width = '100px'; |
| 170 var div = createDiv(t); |
| 171 parent.appendChild(div); |
| 172 |
| 173 var anim = |
| 174 div.animate({ width: ['calc(0% + 0px)', 'calc(10% + 10px)'] }, |
| 175 { duration: 100 * MS_PER_SEC, |
| 176 easing: 'linear', |
| 177 iterations: 10, |
| 178 iterationComposite: 'accumulate' }); |
| 179 anim.pause(); |
| 180 |
| 181 anim.currentTime = anim.effect.timing.duration / 2; |
| 182 assert_equals(getComputedStyle(div).width, '10px', |
| 183 // 100px * 5% + 5px |
| 184 'Animated calc width style at 50s of the first iteration'); |
| 185 anim.currentTime = anim.effect.timing.duration * 2; |
| 186 assert_equals(getComputedStyle(div).width, |
| 187 '40px', // 100px * (10% + 10%) + (10px + 10px) |
| 188 'Animated calc width style at 0s of the third iteration'); |
| 189 anim.currentTime += anim.effect.timing.duration / 2; |
| 190 assert_equals(getComputedStyle(div).width, |
| 191 '50px', // (40px + 60px) / 2 |
| 192 'Animated calc width style at 50s of the third iteration'); |
| 193 }, 'iterationComposite of <calc()> value animation that the values can\'t' + |
| 194 'be reduced'); |
| 195 |
| 196 test(function(t) { |
| 197 var div = createDiv(t); |
| 198 var anim = |
| 199 div.animate({ opacity: [0, 0.4] }, |
| 200 { duration: 100 * MS_PER_SEC, |
| 201 easing: 'linear', |
| 202 iterations: 10, |
| 203 iterationComposite: 'accumulate' }); |
| 204 anim.pause(); |
| 205 |
| 206 anim.currentTime = anim.effect.timing.duration / 2; |
| 207 assert_equals(getComputedStyle(div).opacity, '0.2', |
| 208 'Animated opacity style at 50s of the first iteration'); |
| 209 anim.currentTime = anim.effect.timing.duration * 2; |
| 210 assert_equals(getComputedStyle(div).opacity, '0.8', |
| 211 'Animated opacity style at 0s of the third iteration'); |
| 212 anim.currentTime += anim.effect.timing.duration / 2; |
| 213 assert_equals(getComputedStyle(div).opacity, '1', // (0.8 + 1.2) * 0.5 |
| 214 'Animated opacity style at 50s of the third iteration'); |
| 215 }, 'iterationComposite of opacity animation'); |
| 216 |
| 217 test(function(t) { |
| 218 var div = createDiv(t); |
| 219 var anim = |
| 220 div.animate({ boxShadow: ['rgb(0, 0, 0) 0px 0px 0px 0px', |
| 221 'rgb(120, 120, 120) 10px 10px 10px 0px'] }, |
| 222 { duration: 100 * MS_PER_SEC, |
| 223 easing: 'linear', |
| 224 iterations: 10, |
| 225 iterationComposite: 'accumulate' }); |
| 226 anim.pause(); |
| 227 |
| 228 anim.currentTime = anim.effect.timing.duration / 2; |
| 229 assert_equals(getComputedStyle(div).boxShadow, |
| 230 'rgb(60, 60, 60) 5px 5px 5px 0px', |
| 231 'Animated box-shadow style at 50s of the first iteration'); |
| 232 anim.currentTime = anim.effect.timing.duration * 2; |
| 233 assert_equals(getComputedStyle(div).boxShadow, |
| 234 'rgb(240, 240, 240) 20px 20px 20px 0px', |
| 235 'Animated box-shadow style at 0s of the third iteration'); |
| 236 anim.currentTime += anim.effect.timing.duration / 2; |
| 237 assert_equals(getComputedStyle(div).boxShadow, |
| 238 'rgb(255, 255, 255) 25px 25px 25px 0px', |
| 239 'Animated box-shadow style at 50s of the third iteration'); |
| 240 }, 'iterationComposite of box-shadow animation'); |
| 241 |
| 242 test(function(t) { |
| 243 var div = createDiv(t); |
| 244 var anim = |
| 245 div.animate({ filter: ['blur(0px)', 'blur(10px)'] }, |
| 246 { duration: 100 * MS_PER_SEC, |
| 247 easing: 'linear', |
| 248 iterations: 10, |
| 249 iterationComposite: 'accumulate' }); |
| 250 anim.pause(); |
| 251 |
| 252 anim.currentTime = anim.effect.timing.duration / 2; |
| 253 assert_equals(getComputedStyle(div).filter, 'blur(5px)', |
| 254 'Animated filter blur style at 50s of the first iteration'); |
| 255 anim.currentTime = anim.effect.timing.duration * 2; |
| 256 assert_equals(getComputedStyle(div).filter, 'blur(20px)', |
| 257 'Animated filter blur style at 0s of the third iteration'); |
| 258 anim.currentTime += anim.effect.timing.duration / 2; |
| 259 assert_equals(getComputedStyle(div).filter, 'blur(25px)', |
| 260 'Animated filter blur style at 50s of the third iteration'); |
| 261 }, 'iterationComposite of filter blur animation'); |
| 262 |
| 263 test(function(t) { |
| 264 var div = createDiv(t); |
| 265 var anim = |
| 266 div.animate({ filter: ['brightness(1)', |
| 267 'brightness(180%)'] }, |
| 268 { duration: 100 * MS_PER_SEC, |
| 269 easing: 'linear', |
| 270 iterations: 10, |
| 271 iterationComposite: 'accumulate' }); |
| 272 anim.pause(); |
| 273 |
| 274 anim.currentTime = anim.effect.timing.duration / 2; |
| 275 assert_equals(getComputedStyle(div).filter, |
| 276 'brightness(1.4)', |
| 277 'Animated filter brightness style at 50s of the first iteration'); |
| 278 anim.currentTime = anim.effect.timing.duration * 2; |
| 279 assert_equals(getComputedStyle(div).filter, |
| 280 'brightness(2.6)', // brightness(1) + brightness(0.8) + brightness(0.8) |
| 281 'Animated filter brightness style at 0s of the third iteration'); |
| 282 anim.currentTime += anim.effect.timing.duration / 2; |
| 283 assert_equals(getComputedStyle(div).filter, |
| 284 'brightness(3)', // (brightness(2.6) + brightness(3.4)) * 0.5 |
| 285 'Animated filter brightness style at 50s of the third iteration'); |
| 286 }, 'iterationComposite of filter brightness for different unit animation'); |
| 287 |
| 288 test(function(t) { |
| 289 var div = createDiv(t); |
| 290 var anim = |
| 291 div.animate({ filter: ['brightness(0)', |
| 292 'brightness(1)'] }, |
| 293 { duration: 100 * MS_PER_SEC, |
| 294 easing: 'linear', |
| 295 iterations: 10, |
| 296 iterationComposite: 'accumulate' }); |
| 297 anim.pause(); |
| 298 |
| 299 anim.currentTime = anim.effect.timing.duration / 2; |
| 300 assert_equals(getComputedStyle(div).filter, |
| 301 'brightness(0.5)', |
| 302 'Animated filter brightness style at 50s of the first iteration'); |
| 303 anim.currentTime = anim.effect.timing.duration * 2; |
| 304 assert_equals(getComputedStyle(div).filter, |
| 305 'brightness(0)', // brightness(1) is an identity element, not accumulated. |
| 306 'Animated filter brightness style at 0s of the third iteration'); |
| 307 anim.currentTime += anim.effect.timing.duration / 2; |
| 308 assert_equals(getComputedStyle(div).filter, |
| 309 'brightness(0.5)', // brightness(1) is an identity element, not accumulated. |
| 310 'Animated filter brightness style at 50s of the third iteration'); |
| 311 }, 'iterationComposite of filter brightness animation'); |
| 312 |
| 313 test(function(t) { |
| 314 var div = createDiv(t); |
| 315 var anim = |
| 316 div.animate({ filter: ['drop-shadow(rgb(0, 0, 0) 0px 0px 0px)', |
| 317 'drop-shadow(rgb(120, 120, 120) 10px 10px 10px)'] }, |
| 318 { duration: 100 * MS_PER_SEC, |
| 319 easing: 'linear', |
| 320 iterations: 10, |
| 321 iterationComposite: 'accumulate' }); |
| 322 anim.pause(); |
| 323 |
| 324 anim.currentTime = anim.effect.timing.duration / 2; |
| 325 assert_equals(getComputedStyle(div).filter, |
| 326 'drop-shadow(rgb(60, 60, 60) 5px 5px 5px)', |
| 327 'Animated filter drop-shadow style at 50s of the first iteration'); |
| 328 anim.currentTime = anim.effect.timing.duration * 2; |
| 329 assert_equals(getComputedStyle(div).filter, |
| 330 'drop-shadow(rgb(240, 240, 240) 20px 20px 20px)', |
| 331 'Animated filter drop-shadow style at 0s of the third iteration'); |
| 332 anim.currentTime += anim.effect.timing.duration / 2; |
| 333 assert_equals(getComputedStyle(div).filter, |
| 334 'drop-shadow(rgb(255, 255, 255) 25px 25px 25px)', |
| 335 'Animated filter drop-shadow style at 50s of the third iteration'); |
| 336 }, 'iterationComposite of filter drop-shadow animation'); |
| 337 |
| 338 test(function(t) { |
| 339 var div = createDiv(t); |
| 340 var anim = |
| 341 div.animate({ filter: ['brightness(1) contrast(1)', |
| 342 'brightness(2) contrast(2)'] }, |
| 343 { duration: 100 * MS_PER_SEC, |
| 344 easing: 'linear', |
| 345 iterations: 10, |
| 346 iterationComposite: 'accumulate' }); |
| 347 anim.pause(); |
| 348 |
| 349 anim.currentTime = anim.effect.timing.duration / 2; |
| 350 assert_equals(getComputedStyle(div).filter, |
| 351 'brightness(1.5) contrast(1.5)', |
| 352 'Animated filter list at 50s of the first iteration'); |
| 353 anim.currentTime = anim.effect.timing.duration * 2; |
| 354 assert_equals(getComputedStyle(div).filter, |
| 355 'brightness(3) contrast(3)', |
| 356 'Animated filter list at 0s of the third iteration'); |
| 357 anim.currentTime += anim.effect.timing.duration / 2; |
| 358 assert_equals(getComputedStyle(div).filter, |
| 359 'brightness(3.5) contrast(3.5)', |
| 360 'Animated filter list at 50s of the third iteration'); |
| 361 }, 'iterationComposite of same filter list animation'); |
| 362 |
| 363 test(function(t) { |
| 364 var div = createDiv(t); |
| 365 var anim = |
| 366 div.animate({ filter: ['brightness(1) contrast(1)', |
| 367 'contrast(2) brightness(2)'] }, |
| 368 { duration: 100 * MS_PER_SEC, |
| 369 easing: 'linear', |
| 370 iterations: 10, |
| 371 iterationComposite: 'accumulate' }); |
| 372 anim.pause(); |
| 373 |
| 374 anim.currentTime = anim.effect.timing.duration / 2; |
| 375 assert_equals(getComputedStyle(div).filter, |
| 376 'contrast(2) brightness(2)', // discrete |
| 377 'Animated filter list at 50s of the first iteration'); |
| 378 anim.currentTime = anim.effect.timing.duration * 2; |
| 379 assert_equals(getComputedStyle(div).filter, |
| 380 // We can't accumulate 'contrast(2) brightness(2)' onto |
| 381 // the first list 'brightness(1) contrast(1)' because of |
| 382 // mismatch of the order. |
| 383 'brightness(1) contrast(1)', |
| 384 'Animated filter list at 0s of the third iteration'); |
| 385 anim.currentTime += anim.effect.timing.duration / 2; |
| 386 assert_equals(getComputedStyle(div).filter, |
| 387 // We *can* accumulate 'contrast(2) brightness(2)' onto |
| 388 // the same list 'contrast(2) brightness(2)' here. |
| 389 'contrast(4) brightness(4)', // discrete |
| 390 'Animated filter list at 50s of the third iteration'); |
| 391 }, 'iterationComposite of discrete filter list because of mismatch ' + |
| 392 'of the order'); |
| 393 |
| 394 test(function(t) { |
| 395 var div = createDiv(t); |
| 396 var anim = |
| 397 div.animate({ filter: ['sepia(0)', |
| 398 'sepia(1) contrast(2)'] }, |
| 399 { duration: 100 * MS_PER_SEC, |
| 400 easing: 'linear', |
| 401 iterations: 10, |
| 402 iterationComposite: 'accumulate' }); |
| 403 anim.pause(); |
| 404 |
| 405 anim.currentTime = anim.effect.timing.duration / 2; |
| 406 assert_equals(getComputedStyle(div).filter, |
| 407 'sepia(0.5) contrast(1.5)', |
| 408 'Animated filter list at 50s of the first iteration'); |
| 409 anim.currentTime = anim.effect.timing.duration * 2; |
| 410 assert_equals(getComputedStyle(div).filter, |
| 411 'sepia(2) contrast(3)', |
| 412 'Animated filter list at 0s of the third iteration'); |
| 413 anim.currentTime += anim.effect.timing.duration / 2; |
| 414 assert_equals(getComputedStyle(div).filter, |
| 415 'sepia(2.5) contrast(3.5)', |
| 416 'Animated filter list at 50s of the third iteration'); |
| 417 }, 'iterationComposite of different length filter list animation'); |
| 418 |
| 419 test(function(t) { |
| 420 var div = createDiv(t); |
| 421 var anim = |
| 422 div.animate({ transform: ['rotate(0deg)', 'rotate(180deg)'] }, |
| 423 { duration: 100 * MS_PER_SEC, |
| 424 easing: 'linear', |
| 425 iterations: 10, |
| 426 iterationComposite: 'accumulate' }); |
| 427 anim.pause(); |
| 428 |
| 429 anim.currentTime = anim.effect.timing.duration / 2; |
| 430 assert_equals(getComputedStyle(div).transform, |
| 431 'matrix(0, 1, -1, 0, 0, 0)', // rotate(90deg) |
| 432 'Animated transform(rotate) style at 50s of the first iteration'); |
| 433 anim.currentTime = anim.effect.timing.duration * 2; |
| 434 assert_equals(getComputedStyle(div).transform, |
| 435 'matrix(1, 0, 0, 1, 0, 0)', // rotate(360deg) |
| 436 'Animated transform(rotate) style at 0s of the third iteration'); |
| 437 anim.currentTime += anim.effect.timing.duration / 2; |
| 438 assert_equals(getComputedStyle(div).transform, |
| 439 'matrix(0, 1, -1, 0, 0, 0)', // rotate(450deg) |
| 440 'Animated transform(rotate) style at 50s of the third iteration'); |
| 441 }, 'iterationComposite of transform(rotate) animation'); |
| 442 |
| 443 test(function(t) { |
| 444 var div = createDiv(t); |
| 445 var anim = |
| 446 div.animate({ transform: ['scale(0)', 'scale(1)'] }, |
| 447 { duration: 100 * MS_PER_SEC, |
| 448 easing: 'linear', |
| 449 iterations: 10, |
| 450 iterationComposite: 'accumulate' }); |
| 451 anim.pause(); |
| 452 |
| 453 anim.currentTime = anim.effect.timing.duration / 2; |
| 454 assert_equals(getComputedStyle(div).transform, |
| 455 'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5) |
| 456 'Animated transform(scale) style at 50s of the first iteration'); |
| 457 anim.currentTime = anim.effect.timing.duration * 2; |
| 458 assert_equals(getComputedStyle(div).transform, |
| 459 'matrix(0, 0, 0, 0, 0, 0)', // scale(0); scale(1) is an identity element, |
| 460 // not accumulated. |
| 461 'Animated transform(scale) style at 0s of the third iteration'); |
| 462 anim.currentTime += anim.effect.timing.duration / 2; |
| 463 assert_equals(getComputedStyle(div).transform, |
| 464 'matrix(0.5, 0, 0, 0.5, 0, 0)', // scale(0.5); scale(1) an identity |
| 465 // element, not accumulated. |
| 466 'Animated transform(scale) style at 50s of the third iteration'); |
| 467 }, 'iterationComposite of transform: [ scale(0), scale(1) ] animation'); |
| 468 |
| 469 test(function(t) { |
| 470 var div = createDiv(t); |
| 471 var anim = |
| 472 div.animate({ transform: ['scale(1)', 'scale(2)'] }, |
| 473 { duration: 100 * MS_PER_SEC, |
| 474 easing: 'linear', |
| 475 iterations: 10, |
| 476 iterationComposite: 'accumulate' }); |
| 477 anim.pause(); |
| 478 |
| 479 anim.currentTime = anim.effect.timing.duration / 2; |
| 480 assert_equals(getComputedStyle(div).transform, |
| 481 'matrix(1.5, 0, 0, 1.5, 0, 0)', // scale(1.5) |
| 482 'Animated transform(scale) style at 50s of the first iteration'); |
| 483 anim.currentTime = anim.effect.timing.duration * 2; |
| 484 assert_equals(getComputedStyle(div).transform, |
| 485 'matrix(3, 0, 0, 3, 0, 0)', // scale(1 + (2 -1) + (2 -1)) |
| 486 'Animated transform(scale) style at 0s of the third iteration'); |
| 487 anim.currentTime += anim.effect.timing.duration / 2; |
| 488 assert_equals(getComputedStyle(div).transform, |
| 489 'matrix(3.5, 0, 0, 3.5, 0, 0)', // (scale(3) + scale(4)) * 0.5 |
| 490 'Animated transform(scale) style at 50s of the third iteration'); |
| 491 }, 'iterationComposite of transform: [ scale(1), scale(2) ] animation'); |
| 492 |
| 493 test(function(t) { |
| 494 var div = createDiv(t); |
| 495 var anim = |
| 496 div.animate({ transform: ['scale(0)', 'scale(2)'] }, |
| 497 { duration: 100 * MS_PER_SEC, |
| 498 easing: 'linear', |
| 499 iterations: 10, |
| 500 iterationComposite: 'accumulate' }); |
| 501 anim.pause(); |
| 502 |
| 503 anim.currentTime = anim.effect.timing.duration / 2; |
| 504 assert_equals(getComputedStyle(div).transform, |
| 505 'matrix(1, 0, 0, 1, 0, 0)', // scale(1) |
| 506 'Animated transform(scale) style at 50s of the first iteration'); |
| 507 anim.currentTime = anim.effect.timing.duration * 2; |
| 508 assert_equals(getComputedStyle(div).transform, |
| 509 'matrix(2, 0, 0, 2, 0, 0)', // (scale(0) + scale(2-1)*2) |
| 510 'Animated transform(scale) style at 0s of the third iteration'); |
| 511 anim.currentTime += anim.effect.timing.duration / 2; |
| 512 assert_equals(getComputedStyle(div).transform, |
| 513 'matrix(3, 0, 0, 3, 0, 0)', // (scale(2) + scale(4)) * 0.5 |
| 514 'Animated transform(scale) style at 50s of the third iteration'); |
| 515 }, 'iterationComposite of transform: scale(2) animation'); |
| 516 |
| 517 test(function(t) { |
| 518 var div = createDiv(t); |
| 519 var anim = |
| 520 div.animate({ transform: ['rotate(0deg) translateX(0px)', |
| 521 'rotate(180deg) translateX(10px)'] }, |
| 522 { duration: 100 * MS_PER_SEC, |
| 523 easing: 'linear', |
| 524 iterations: 10, |
| 525 iterationComposite: 'accumulate' }); |
| 526 anim.pause(); |
| 527 |
| 528 anim.currentTime = anim.effect.timing.duration / 2; |
| 529 assert_equals(getComputedStyle(div).transform, |
| 530 'matrix(0, 1, -1, 0, 0, 5)', // rotate(90deg) translateX(5px) |
| 531 'Animated transform list at 50s of the first iteration'); |
| 532 anim.currentTime = anim.effect.timing.duration * 2; |
| 533 assert_equals(getComputedStyle(div).transform, |
| 534 'matrix(1, 0, 0, 1, 20, 0)', // rotate(360deg) translateX(20px) |
| 535 'Animated transform list at 0s of the third iteration'); |
| 536 anim.currentTime += anim.effect.timing.duration / 2; |
| 537 assert_equals(getComputedStyle(div).transform, |
| 538 'matrix(0, 1, -1, 0, 0, 25)', // rotate(450deg) translateX(25px) |
| 539 'Animated transform list at 50s of the third iteration'); |
| 540 }, 'iterationComposite of transform list animation'); |
| 541 |
| 542 test(function(t) { |
| 543 var div = createDiv(t); |
| 544 // The transform list whose order is mismatched is compounded, |
| 545 // so below animation is the same as; |
| 546 // from matrix(2, 0, 0, 2, 0, 0) to matrix(3, 0, 0, 3, 30, 0) |
| 547 var anim = |
| 548 div.animate({ transform: ['translateX(0px) scale(2)', |
| 549 'scale(3) translateX(10px)'] }, |
| 550 { duration: 100 * MS_PER_SEC, |
| 551 easing: 'linear', |
| 552 iterations: 10, |
| 553 iterationComposite: 'accumulate' }); |
| 554 anim.pause(); |
| 555 |
| 556 anim.currentTime = anim.effect.timing.duration / 2; |
| 557 assert_equals(getComputedStyle(div).transform, |
| 558 'matrix(2.5, 0, 0, 2.5, 15, 0)', // scale(2.5) (0px + 30px*2) / 2 |
| 559 'Animated transform list at 50s of the first iteration'); |
| 560 anim.currentTime = anim.effect.timing.duration * 2; |
| 561 assert_equals(getComputedStyle(div).transform, |
| 562 'matrix(4, 0, 0, 4, 60, 0)', // scale(2+(3-2)*2) (0px + 30px*2) |
| 563 'Animated transform list at 0s of the third iteration'); |
| 564 anim.currentTime += anim.effect.timing.duration / 2; |
| 565 assert_equals(getComputedStyle(div).transform, |
| 566 'matrix(5.5, 0, 0, 5.5, 135, 0)', // scale(4+7)/2 (60px + 210px) |
| 567 'Animated transform list at 50s of the third iteration'); |
| 568 }, 'iterationComposite of transform list animation whose order is mismatched'); |
| 569 |
| 570 test(function(t) { |
| 571 var div = createDiv(t); |
| 572 // Even if each transform list does not have functions which exist in |
| 573 // other pair of the list, we don't fill any missing functions at all, |
| 574 // it's just computed as compounded matrices |
| 575 // Below animation is the same as; |
| 576 // from matrix(1, 0, 0, 1, 0, 0) to matrix(2, 0, 0, 2, 20, 0) |
| 577 var anim = |
| 578 div.animate({ transform: ['translateX(0px)', |
| 579 'scale(2) translateX(10px)'] }, |
| 580 { duration: 100 * MS_PER_SEC, |
| 581 easing: 'linear', |
| 582 iterations: 10, |
| 583 iterationComposite: 'accumulate' }); |
| 584 anim.pause(); |
| 585 |
| 586 anim.currentTime = anim.effect.timing.duration / 2; |
| 587 assert_equals(getComputedStyle(div).transform, |
| 588 'matrix(1.5, 0, 0, 1.5, 10, 0)', // scale(1.5) (0px + 10px*2) / 2 |
| 589 'Animated transform list at 50s of the first iteration'); |
| 590 anim.currentTime = anim.effect.timing.duration * 2; |
| 591 assert_equals(getComputedStyle(div).transform, |
| 592 'matrix(3, 0, 0, 3, 40, 0)', // scale(1+(2-1)*2) (0px + 20px*2) |
| 593 'Animated transform list at 0s of the third iteration'); |
| 594 anim.currentTime += anim.effect.timing.duration / 2; |
| 595 assert_equals(getComputedStyle(div).transform, |
| 596 'matrix(3.5, 0, 0, 3.5, 80, 0)', // scale(3+4)/2 (40px + 20px) |
| 597 'Animated transform list at 50s of the third iteration'); |
| 598 }, 'iterationComposite of transform list animation whose order is mismatched'); |
| 599 |
| 600 test(function(t) { |
| 601 var div = createDiv(t); |
| 602 var anim = |
| 603 div.animate({ marginLeft: ['10px', '20px'] }, |
| 604 { duration: 100 * MS_PER_SEC, |
| 605 easing: 'linear', |
| 606 iterations: 10, |
| 607 iterationComposite: 'accumulate' }); |
| 608 anim.pause(); |
| 609 |
| 610 anim.currentTime = anim.effect.timing.duration / 2; |
| 611 assert_equals(getComputedStyle(div).marginLeft, '15px', |
| 612 'Animated margin-left style at 50s of the first iteration'); |
| 613 anim.currentTime = anim.effect.timing.duration * 2; |
| 614 assert_equals(getComputedStyle(div).marginLeft, '50px', // 10px + 20px + 20px |
| 615 'Animated margin-left style at 0s of the third iteration'); |
| 616 anim.currentTime += anim.effect.timing.duration / 2; |
| 617 assert_equals(getComputedStyle(div).marginLeft, '55px', // (50px + 60px) * 0.5 |
| 618 'Animated margin-left style at 50s of the third iteration'); |
| 619 }, 'iterationComposite starts with non-zero value animation'); |
| 620 |
| 621 test(function(t) { |
| 622 var div = createDiv(t); |
| 623 var anim = |
| 624 div.animate({ marginLeft: ['10px', '-10px'] }, |
| 625 { duration: 100 * MS_PER_SEC, |
| 626 easing: 'linear', |
| 627 iterations: 10, |
| 628 iterationComposite: 'accumulate' }); |
| 629 anim.pause(); |
| 630 |
| 631 anim.currentTime = anim.effect.timing.duration / 2; |
| 632 assert_equals(getComputedStyle(div).marginLeft, |
| 633 '0px', |
| 634 'Animated margin-left style at 50s of the first iteration'); |
| 635 anim.currentTime = anim.effect.timing.duration * 2; |
| 636 assert_equals(getComputedStyle(div).marginLeft, |
| 637 '-10px', // 10px + -10px + -10px |
| 638 'Animated margin-left style at 0s of the third iteration'); |
| 639 anim.currentTime += anim.effect.timing.duration / 2; |
| 640 assert_equals(getComputedStyle(div).marginLeft, |
| 641 '-20px', // (-10px + -30px) * 0.5 |
| 642 'Animated margin-left style at 50s of the third iteration'); |
| 643 }, 'iterationComposite with negative final value animation'); |
| 644 |
| 645 test(function(t) { |
| 646 var div = createDiv(t); |
| 647 var anim = div.animate({ marginLeft: ['0px', '10px'] }, |
| 648 { duration: 100 * MS_PER_SEC, |
| 649 easing: 'linear', |
| 650 iterations: 10, |
| 651 iterationComposite: 'accumulate' }); |
| 652 anim.pause(); |
| 653 |
| 654 anim.currentTime = |
| 655 anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2; |
| 656 assert_equals(getComputedStyle(div).marginLeft, '25px', |
| 657 'Animated style at 50s of the third iteration'); |
| 658 |
| 659 anim.effect.iterationComposite = 'replace'; |
| 660 assert_equals(getComputedStyle(div).marginLeft, '5px', |
| 661 'Animated style at 50s of the third iteration'); |
| 662 |
| 663 anim.effect.iterationComposite = 'accumulate'; |
| 664 assert_equals(getComputedStyle(div).marginLeft, '25px', |
| 665 'Animated style at 50s of the third iteration'); |
| 666 }, 'interationComposite changes'); |
| 667 |
| 668 test(function(t) { |
| 669 var div = createDiv(t); |
| 670 var anim = div.animate({ marginLeft: ['0px', '10px'] }, |
| 671 { duration: 100 * MS_PER_SEC, |
| 672 easing: 'linear', |
| 673 iterations: 10, |
| 674 iterationComposite: 'accumulate' }); |
| 675 anim.pause(); |
| 676 |
| 677 anim.currentTime = |
| 678 anim.effect.timing.duration * 2 + anim.effect.timing.duration / 2; |
| 679 assert_equals(getComputedStyle(div).marginLeft, '25px', |
| 680 'Animated style at 50s of the third iteration'); |
| 681 |
| 682 // double its duration. |
| 683 anim.effect.timing.duration = anim.effect.timing.duration * 2; |
| 684 assert_equals(getComputedStyle(div).marginLeft, '12.5px', |
| 685 'Animated style at 25s of the first iteration'); |
| 686 |
| 687 // half of original. |
| 688 anim.effect.timing.duration = anim.effect.timing.duration / 4; |
| 689 assert_equals(getComputedStyle(div).marginLeft, '50px', |
| 690 'Animated style at 50s of the fourth iteration'); |
| 691 }, 'duration changes with iterationComposite(accumulate)'); |
| 692 |
| 693 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2408493002:
Import wpt@357b83b809e3cbc7a1805e7c3ca108a7980d782f (Closed)
