| <!DOCTYPE html> |
| <style type="text/css"> |
| .box { |
| position: relative; |
| height: 25px; |
| width: 25px; |
| background-color: blue; |
| margin: 10px; |
| } |
| .animation { |
| animation-duration: 0.1s; |
| animation-name: animation; |
| } |
| #animation1 { |
| animation-delay: 0.05s; |
| } |
| #animation2 { |
| animation-delay: -0.05s; |
| } |
| #animation3 { |
| animation-delay: -0.15s; |
| } |
| @keyframes animation { |
| from { left: 0; } |
| to { left: 500px; } |
| } |
| </style> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script type="text/javascript"> |
| async_test(t => { |
| var count = 0; |
| document.addEventListener('animationstart', t.step_func((event) => { |
| // Elapsed time caps at the animation duration. |
| var pass = event.elapsedTime === [0, 0.05, 0.1][count++]; |
| assert_true(pass, event.target.id + ': Start event: elapsedTime=' + event.elapsedTime); |
| })); |
| |
| document.addEventListener('animationend', t.step_func((event) => { |
| var pass = event.elapsedTime === 0.1; |
| assert_true(pass, 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: |
| t.done(); |
| } |
| })); |
| }, "Tests animation events with a negative delay"); |
| </script> |
| <div id="animation1" class="box animation"></div> |
| <div id="animation2" class="box"></div> |
| <div id="animation3" class="box"></div> |
