| <style> |
| #box { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background-color: blue; |
| animation-name: move; |
| animation-duration: 0.2s; |
| animation-iteration-count: infinite; |
| animation-timing-function: linear; |
| animation-delay: -999999s; |
| } |
| |
| @keyframes move { |
| 0% { left: 0; } |
| 100% { left: 300px; } |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| function output(msg) { |
| document.getElementById('result').innerHTML += `${msg}<br>`; |
| } |
| |
| function iterated(event) { |
| output("PASS: Saw iteration event. The animation did start."); |
| |
| if (event.elapsedTime > 1000) |
| output("PASS: Elapsed time is large. The animation thinks it started a long time ago."); |
| else |
| output("FAIL: Elapsed time wasn't big enough."); |
| |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| |
| window.addEventListener("animationiteration", iterated, { once: true }); |
| </script> |
| <div id="box"></div> |
| <div id="result"></div> |