| <!DOCTYPE html> |
| <style type="text/css"> |
| .target { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: red; |
| margin-bottom: 10px; |
| } |
| .animated { |
| animation: test 1s linear; |
| animation: test 1s linear; |
| } |
| #negative-delay { |
| animation-delay: -500ms; |
| animation-delay: -500ms; |
| } |
| #zero-delay { |
| animation-delay: 0ms; |
| animation-delay: 0ms; |
| } |
| #positive-delay { |
| animation-delay: 500ms; |
| animation-delay: 500ms; |
| } |
| @keyframes test { |
| from { left: 100px; } |
| to { left: 300px; } |
| } |
| @keyframes test { |
| from { left: 100px; } |
| to { left: 300px; } |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script type="text/javascript"> |
| async_test(t => { |
| var immediate = true; |
| window.addEventListener("load", t.step_func(() => { |
| requestAnimationFrame(t.step_func(() => { |
| ['negative-delay', 'zero-delay', 'positive-delay'].forEach((id) => { |
| var target = document.getElementById(id); |
| target.addEventListener('animationstart', onStartEventFired); |
| target.classList.add('animated'); |
| }); |
| requestAnimationFrame(t.step_func(() => { |
| 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'); |
| assert_true(pass, 'Start event should be fired'); |
| if (id === 'positive-delay') { |
| t.done(); |
| } |
| } |
| })); |
| }, "Tests that the start event is fired at the correct time with different start delays"); |
| </script> |
| <div class="target" id="negative-delay"></div> |
| <div class="target" id="zero-delay"></div> |
| <div class="target" id="positive-delay"></div> |
