blob: 0079e82143adf6d1d6cd9c9edb14e1ddd401a944 [file] [log] [blame]
<div id="target" style="width: 100px; height: 100px; background-color: black;"></div>
<script src="../resources/js-test.js"></script>
<script>
const element = document.getElementById("target");
const duration = 1000;
const iterations = Infinity;
const shouldBecomeEqualAsync = async (actual, expected) => new Promise(resolve => shouldBecomeEqual(actual, expected, resolve));
(async () => {
if (!window.testRunner || !window.internals) {
debug("This test should be run in a test runner.");
return;
}
testRunner.waitUntilDone();
// First, start a transform-related animation that can be accelerated.
element.animate({ scale: [1, 2] }, { duration, iterations });
await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "1");
// Now, start another transform-related animation that cannot be accelerated due to using
// steps() easing. This should not only prevent this animation from running accelerated,
// but also make the previous animation revert to a non-accelerated state.
element.animate({ rotate: ["30deg", "60deg"] }, { duration, iterations, easing: "steps(60)" });
await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "0");
testRunner.notifyDone();
})();
</script>