| <!DOCTYPE html> <!-- webkit-test-runner [ ThreadedTimeBasedAnimationsEnabled=false ] --> |
| <style> |
| |
| #target { |
| animation: anim 1s infinite; |
| } |
| |
| @keyframes anim { |
| to { scale: 2 } |
| } |
| |
| </style> |
| <div id="target" style="width: 100px; height: 100px; background-color: black;"></div> |
| <script src="../resources/js-test.js"></script> |
| <script> |
| window.jsTestIsAsync = true; |
| |
| 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; |
| } |
| |
| |
| // First, check the initial transform-related CSS Animation can be accelerated. |
| 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 transform-related CSS Animation to a state that cannot be accelerated anymore |
| // due to using a linear() timing function. This should not only prevent this animation from |
| // running accelerated, but also make the second animation revert to a non-accelerated state. |
| element.style.animationTimingFunction = "linear(0 0%, 0.2 50%, 1 100%)"; |
| await shouldBecomeEqualAsync("internals.acceleratedAnimationsForElement(element).length", "0"); |
| |
| finishJSTest(); |
| })(); |
| |
| </script> |
