| <!DOCTYPE html> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| |
| #target { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| } |
| |
| </style> |
| <div id="target"></div> |
| <script> |
| |
| promise_test(async t => { |
| // Start an accelerated "transform" animation with a tiny delay. |
| const animation = document.getElementById("target").animate({ transform: "translateX(600px)" }, { duration: 1000 * 1000, delay: 1 }); |
| |
| // Wait two frames for the accelerated animation to be committed. |
| await animation.ready; |
| await new Promise(requestAnimationFrame); |
| await new Promise(requestAnimationFrame); |
| // And another one since the delay means it will take another frame until the animation enters its active phase. |
| await new Promise(requestAnimationFrame); |
| |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1, "There should be an accelerated animation."); |
| }, "A transform animation with a delay should run accelerated."); |
| |
| </script> |
| </body> |
