36 lines
1.5 KiB
HTML
36 lines
1.5 KiB
HTML
<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 timing = { duration: 1000, 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] }, timing);
|
|
await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "1");
|
|
|
|
// Now, start another transform-related animation that can also be accelerated.
|
|
const rotationAnimation = element.animate({ rotate: ["30deg", "60deg"] }, timing);
|
|
await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "2");
|
|
|
|
// Now, update the last transform-related animation to a state that cannot be accelerated anymore
|
|
// due to using a steps() timing function. This should not only prevent this animation from
|
|
// running accelerated, but also make the first animation revert to a non-accelerated state.
|
|
rotationAnimation.effect.updateTiming({ easing: "steps(60)" });
|
|
await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "0");
|
|
|
|
testRunner.notifyDone();
|
|
})();
|
|
|
|
</script>
|