| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style> |
| #box { |
| height: 200px; |
| width: 200px; |
| margin: 20px; |
| background-color: blue; |
| } |
| |
| .animated { |
| -webkit-transition: opacity 2000s step-end; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| function log(s) |
| { |
| var results = document.getElementById('results'); |
| results.innerHTML += s + '<br>'; |
| } |
| |
| function testTransitions() |
| { |
| var box = document.getElementById('box'); |
| box.className = 'animated'; |
| box.style.opacity = '0.5'; |
| if (getComputedStyle(box).opacity == '0.5') |
| log("Transition didn't start: FAIL"); |
| else { |
| box.className = ''; |
| if (getComputedStyle(box).opacity == '0.5') |
| log('No running transitions: PASS'); |
| else |
| log('Transition still running: FAIL') |
| } |
| if (window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| |
| window.addEventListener('load', testTransitions, false); |
| </script> |
| </head> |
| <body> |
| |
| <div id="box"></div> |
| |
| <div id="results"></div> |
| </body> |
| </html> |
