| <!DOCTYPE html> |
| |
| <html> |
| <head> |
| <style type="text/css"> |
| .box { |
| position: relative; |
| height: 25px; |
| width: 25px; |
| background-color: blue; |
| margin: 10px; |
| } |
| .animation { |
| -webkit-animation-duration: 0.1s; |
| -webkit-animation-name: animation; |
| } |
| #animation1 { |
| -webkit-animation-delay: 0.05s; |
| } |
| #animation2 { |
| -webkit-animation-delay: -0.05s; |
| } |
| #animation3 { |
| -webkit-animation-delay: -0.15s; |
| } |
| @-webkit-keyframes animation { |
| from { left: 0; } |
| to { left: 500px; } |
| } |
| </style> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| function log(text) { |
| var div = document.createElement('div'); |
| div.innerText = text; |
| document.getElementById('log').appendChild(div); |
| } |
| |
| var count = 0; |
| document.addEventListener('webkitAnimationStart', function(event) { |
| var pass = event.elapsedTime === [0, 0.05, 0.15][count++]; |
| log((pass ? 'PASS' : 'FAIL') + ': ' + event.target.id + ': Start event: elapsedTime=' + event.elapsedTime); |
| }, false); |
| |
| document.addEventListener('webkitAnimationEnd', function(event) { |
| var pass = event.elapsedTime === 0.1; |
| log((pass ? 'PASS' : 'FAIL') + ': ' + event.target.id + ': End event: elapsedTime=' + event.elapsedTime); |
| switch (count) { |
| case 1: |
| document.getElementById('animation2').classList.add('animation'); |
| break; |
| case 2: |
| document.getElementById('animation3').classList.add('animation'); |
| break; |
| case 3: |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| }, false); |
| </script> |
| </head> |
| <body> |
| <p>Tests animation events with a negative delay. |
| <div id="animation1" class="box animation"></div> |
| <div id="animation2" class="box"></div> |
| <div id="animation3" class="box"></div> |
| <div id="log"></div> |
| </body> |
| </html> |
