| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| .target { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: red; |
| margin-bottom: 10px; |
| } |
| .animated { |
| -webkit-animation: test 1s linear; |
| animation: test 1s linear; |
| } |
| #negative-delay { |
| -webkit-animation-delay: -500ms; |
| animation-delay: -500ms; |
| } |
| #zero-delay { |
| -webkit-animation-delay: 0ms; |
| animation-delay: 0ms; |
| } |
| #positive-delay { |
| -webkit-animation-delay: 500ms; |
| animation-delay: 500ms; |
| } |
| @-webkit-keyframes test { |
| from { left: 100px; } |
| to { left: 300px; } |
| } |
| @keyframes test { |
| from { left: 100px; } |
| to { left: 300px; } |
| } |
| </style> |
| <script type="text/javascript"> |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| testRunner.waitUntilDone(); |
| } |
| |
| var immediate = true; |
| onload = function() { |
| requestAnimationFrame(function(t) { |
| ['negative-delay', 'zero-delay', 'positive-delay'].forEach(function(id) { |
| var target = document.getElementById(id); |
| target.addEventListener('webkitAnimationStart', onStartEventFired); |
| target.classList.add('animated'); |
| }); |
| requestAnimationFrame(function() { |
| immediate = false; |
| }); |
| }); |
| }; |
| |
| function log(message) { |
| var div = document.createElement('div'); |
| div.textContent = message; |
| document.body.appendChild(div); |
| } |
| |
| function onStartEventFired(e) { |
| var id = e.target.id; |
| var pass = immediate || id == 'positive-delay'; |
| log((pass ? 'PASS' : 'FAIL') + ': ' + id + ': Start event ' + (immediate ? 'fired' : 'did not fire') + ' immediately'); |
| if (id === 'positive-delay' && window.testRunner) { |
| testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <p>Tests that the start event is fired at the correct time with different start delays.</p> |
| <div class="target" id="negative-delay"></div> |
| <div class="target" id="zero-delay"></div> |
| <div class="target" id="positive-delay"></div> |
| <div id="result"></div> |
| </body> |
| </html> |
