| OLD | NEW |
|---|
| 1 <!doctype html> | 1 <!doctype html> |
| 2 <meta charset="utf-8"> | 2 <meta charset="utf-8"> |
| 3 <body> | 3 <body> |
| 4 <script> | 4 <script> |
| 5 onload = function() { | 5 onload = function() { |
| 6 | 6 |
| 7 log('Sanity tests:'); | 7 log('Sanity tests:'); |
| 8 assertIterationTime('1s linear', [ | 8 assertIterationTime('1s linear', [ |
| 9 {is: null, at: -1}, | 9 {is: null, at: -1}, |
| 10 {is: 0, at: 0}, | 10 {is: 0, at: 0}, |
| (...skipping 265 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 276 if (klass) { | 276 if (klass) { |
| 277 child = document.createElement('span'); | 277 child = document.createElement('span'); |
| 278 child.classList.add(klass); | 278 child.classList.add(klass); |
| 279 child.textContent = message; | 279 child.textContent = message; |
| 280 } else { | 280 } else { |
| 281 child = document.createTextNode(message); | 281 child = document.createTextNode(message); |
| 282 } | 282 } |
| 283 document.body.appendChild(child); | 283 document.body.appendChild(child); |
| 284 } | 284 } |
| 285 | 285 |
| 286 var prefix = 'animation' in document.body.style ? '' : '-webkit-'; | |
| 287 function assertIterationTime(animation, expectations) { | 286 function assertIterationTime(animation, expectations) { |
| 288 testElement.style.setProperty(prefix + 'animation', 'invalid ' + animation); | 287 testElement.style.setProperty('animation', 'invalid ' + animation); |
| 289 update(); | 288 update(); |
| 290 | 289 |
| 291 expectations.forEach(function(expectation) { | 290 expectations.forEach(function(expectation) { |
| 292 if (expectation.is !== null && expectation.is != Math.round(expectation.is *
100) / 100) { | 291 if (expectation.is !== null && expectation.is != Math.round(expectation.is *
100) / 100) { |
| 293 console.log('ERROR: Test requires too much precision. ' + JSON.stringify(ex
pectation)); | 292 console.log('ERROR: Test requires too much precision. ' + JSON.stringify(ex
pectation)); |
| 294 return; | 293 return; |
| 295 } | 294 } |
| 296 testElement.style.setProperty(prefix + 'animation-name', 'invalid'); | 295 testElement.style.setProperty('animation-name', 'invalid'); |
| 297 update(); | 296 update(); |
| 298 | 297 |
| 299 var delay = expectation.at * -1; | 298 var delay = expectation.at * -1; |
| 300 testElement.style.setProperty(prefix + 'animation-delay', delay + 's'); | 299 testElement.style.setProperty('animation-delay', delay + 's'); |
| 301 testElement.style.setProperty(prefix + 'animation-name', 'test'); | 300 testElement.style.setProperty('animation-name', 'test'); |
| 302 update(); | |
| 303 // FIXME: Set play-state: paused before starting the animation. | |
| 304 // For now, updating the style another two times makes this work in WebKit/Bl
ink | |
| 305 testElement.style.setProperty(prefix + 'animation-name', 'test'); | |
| 306 update(); | |
| 307 testElement.style.setProperty(prefix + 'animation-name', 'test'); | |
| 308 update(); | 301 update(); |
| 309 | 302 |
| 310 var result = getComputedStyle(testElement).left; | 303 var result = getComputedStyle(testElement).left; |
| 311 if (result === 'auto') { | 304 if (result === 'auto') { |
| 312 result = null; | 305 result = null; |
| 313 } else { | 306 } else { |
| 314 result = Math.round(Number(result.replace(/px$/, '')) * 100) / 100; | 307 result = Math.round(Number(result.replace(/px$/, '')) * 100) / 100; |
| 315 } | 308 } |
| 316 if (result === expectation.is) { | 309 if (result === expectation.is) { |
| 317 log('PASS: [' + animation + '] iteration time was [' + expectation.is + ']
at ' + expectation.at + 's'); | 310 log('PASS: [' + animation + '] iteration time was [' + expectation.is + ']
at ' + expectation.at + 's'); |
| 318 } else { | 311 } else { |
| 319 log('FAIL: [' + animation + '] iteration time was [' + result + '] at ' + e
xpectation.at + 's' + ' expected [' + expectation.is + ']', 'fail'); | 312 log('FAIL: [' + animation + '] iteration time was [' + result + '] at ' + e
xpectation.at + 's' + ' expected [' + expectation.is + ']', 'fail'); |
| 320 } | 313 } |
| 321 }); | 314 }); |
| 322 } | 315 } |
| 323 </script> | 316 </script> |
| 324 <style> | 317 <style> |
| 325 body { | 318 body { |
| 326 white-space: pre; | 319 white-space: pre; |
| 327 font-family: monospace; | 320 font-family: monospace; |
| 328 } | 321 } |
| 329 .fail { | 322 .fail { |
| 330 font-weight: bold; | 323 font-weight: bold; |
| 331 color: red; | 324 color: red; |
| 332 } | 325 } |
| 333 @-webkit-keyframes test { | |
| 334 0% { | |
| 335 left: 0px; | |
| 336 } | |
| 337 100% { | |
| 338 left: 1px; | |
| 339 } | |
| 340 } | |
| 341 @keyframes test { | 326 @keyframes test { |
| 342 0% { | 327 0% { |
| 343 left: 0px; | 328 left: 0px; |
| 344 } | 329 } |
| 345 100% { | 330 100% { |
| 346 left: 1px; | 331 left: 1px; |
| 347 } | 332 } |
| 348 } | 333 } |
| 349 </style> | 334 </style> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2970883003:
Separate out animations tests with prefixing (Closed)
