LayoutTests/webanimations/combining-transform-animations-with-different-acceleration-capabilities-5.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, 1] }, timing);
    await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "1");

    // Now, set an !important style for that same property with the !important value matching the first keyframe
    // of the animation, which should interrupt the accelerated animation,
    element.style.setProperty("scale", "1", "important");
    await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "0");

    // Now, remove the !important style, this should resume the accelerated animation.
    element.style.removeProperty("scale");
    await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "1");

    testRunner.notifyDone();
})();
    
</script>