| <!DOCTYPE html> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <style> |
| |
| div { |
| position: absolute; |
| left: 0; |
| top: 0; |
| width: 100px; |
| height: 100px; |
| background-color: black; |
| } |
| |
| </style> |
| <script> |
| |
| const createDiv = test => { |
| const div = document.createElement("div"); |
| test.add_cleanup(() => div.remove()); |
| return document.body.appendChild(div); |
| } |
| |
| const animationReadyToAnimateAccelerated = async animation => { |
| await animation.ready; |
| await new Promise(requestAnimationFrame); |
| await new Promise(requestAnimationFrame); |
| await new Promise(requestAnimationFrame); |
| } |
| |
| const duration = 1000 * 1000; // 1000s. |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animation = target.animate( |
| { transform: "translateX(100px)" }, |
| { composite: "add", duration } |
| ); |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| }, "Setting 'composite' to 'add' should prevent acceleration"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animation = target.animate( |
| [{ offset: 1, composite: "add", transform: "translateX(100px)" }], |
| { duration } |
| ); |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| }, "Setting 'composite' to 'add' on a keyframe should prevent acceleration"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| // First add a replace animation that could be accelerated by itself. |
| animations.push(target.animate( |
| { transform: "translateX(100px)" }, |
| { duration } |
| )); |
| // Then, add a composing animation that prevents the whole stack to be accelerated. |
| animations.push(target.animate( |
| { transform: "translateY(100px)" }, |
| { composite: "add", duration } |
| )); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| }, "Setting 'composite' to 'add' on an animation further up the stack should prevent lower animations in the stack from being accelerated"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| // First add a composing animation that cannot be run accelerated on its own. |
| animations.push(target.animate( |
| { transform: "translateX(100px)" }, |
| { composite: "add", duration } |
| )); |
| // Then, add a replace animation that should be accelerated since it completely obliterates |
| // the previous composing animation. |
| animations.push(target.animate( |
| { transform: ["none", "translateY(100px)"] }, |
| { duration } |
| )); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| }, "Setting 'composite' to 'add' on an animation lower down the stack should allow replace animations further up the stack to be accelerated"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| // First add a composing animation that cannot be run accelerated on its own. |
| animations.push(target.animate( |
| { transform: "translateX(100px)" }, |
| { composite: "add", duration } |
| )); |
| // Then, add a replace animation that should be accelerated except it can't because |
| // it contains an implicit keyframe derived from the output of the previous animation. |
| animations.push(target.animate( |
| { transform: "translateX(100px)" }, |
| { duration } |
| )); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| }, "Setting 'composite' to 'add' on an animation lower down the stack should prevent replace animations with an implicity keyframe further up the stack to be accelerated"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| // First add a composing animation that cannot be run accelerated on its own. |
| animations.push(target.animate( |
| { marginLeft: "100px" }, |
| { composite: "add", duration } |
| )); |
| // Then, add a replace animation with an implicit keyframes that can be accelerated |
| // since there are no other composing animations below it in the stack that target |
| // that property. |
| animations.push(target.animate( |
| { transform: "translateX(100px)" }, |
| { duration } |
| )); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| }, "Setting 'composite' to 'add' on an animation lower down the stack targeting a property that isn't accelerated should allow replace animations with implicit keyframes further up the stack to be accelerated"); |
| |
| // The following tests check the dynamic interruption and/or start of accelerated animations |
| // after changes made to other effects in the stack. |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animation = target.animate({ transform: "translateX(100px)" }, duration); |
| |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| |
| // Setting the effect composition to "add" means that the animation should |
| // no longer be accelerated. |
| animation.effect.composite = "add"; |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| |
| // Resetting the effect composition to "replace" means that the animation |
| // should be accelerated again. |
| animation.effect.composite = "replace"; |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| }, "Dynamically setting 'composite' on an effect should toggle acceleration"); |
| |
| promise_test(async test => { |
| const keyframes = composite => [{ offset: 1, composite, transform: "translateX(100px)" }]; |
| |
| const target = createDiv(test); |
| const animation = target.animate(keyframes("replace"), duration); |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| |
| // Setting the keyframe composition to "add" means that the animation should |
| // no longer be accelerated. |
| animation.effect.setKeyframes(keyframes("add")); |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| |
| // Resetting the keyframe composition to "replace" means that the animation |
| // should be accelerated again. |
| animation.effect.setKeyframes(keyframes("replace")); |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| }, "Dynamically setting 'composite' on a keyframe should toggle acceleration"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| |
| animations.push(target.animate({ transform: "translateX(100px)" }, duration)); |
| animations.push(target.animate({ transform: "translateY(100px)" }, duration)); |
| |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 2, "Step 1"); |
| |
| // Make the second animation a composing animation. This will prevent the first animation |
| // from running accelerated as well. |
| animations[1].effect.composite = "add"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0, "Step 2"); |
| |
| // Reset to the original state. |
| animations[1].effect.composite = "replace"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 2, "Step 3"); |
| }, "Dynamically setting 'composite' to 'add' on an animation further up the stack should toggle acceleration on lower animations in the stack"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| |
| const animations = []; |
| animations.push(target.animate({ transform: "translateX(100px)" }, duration)); |
| animations.push(target.animate({ transform: ["none", "translateY(100px)"] }, duration)); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 2); |
| |
| // Make the first animation a composing animation. This will prevent the other animation from running accelerated. |
| animations[0].effect.composite = "add"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| |
| // Reset to the original state. |
| animations[0].effect.composite = "replace"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 2); |
| }, "Dynamically setting 'composite' to 'add' on an animation lower down the stack should toggle acceleration but always allow replace animations further up the stack to be accelerated"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| |
| animations.push(target.animate({ transform: "translateX(100px)" }, duration)); |
| animations.push(target.animate({ transform: "translateX(100px)" }, duration)); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 2); |
| |
| // Make the first animation a composing animation. This will prevent both animations |
| // from running accelerated since the second animation uses the first animation as |
| // input due to using an implicit 0% keyframe. |
| animations[0].effect.composite = "add"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| |
| // Reset to the original state. |
| animations[0].effect.composite = "replace"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 2); |
| }, "Dynamically setting 'composite' to 'add' on an animation lower down the stack should toggle acceleration on replace animations with an implicity keyframe further up the stack"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animations = []; |
| |
| animations.push(target.animate({ marginLeft: "100px" }, duration)); |
| animations.push(target.animate({ transform: "translateX(100px)" }, duration)); |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| |
| // Make the first animation a composing animation. This should not prevent the other animation from running accelerated. |
| animations[0].effect.composite = "add"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| |
| // Reset to the original state. |
| animations[0].effect.composite = "replace"; |
| await Promise.all(animations.map(animation => animationReadyToAnimateAccelerated(animation))); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| }, "Dynamically setting 'composite' to 'add' on an animation lower down the stack targeting a property that isn't accelerated shouldn't prevent acceleration of animations with implicit keyframes further up the stack to be accelerated"); |
| |
| promise_test(async test => { |
| const target = createDiv(test); |
| const animation = target.animate({ transform: "translateX(100px)" }, duration); |
| |
| await animationReadyToAnimateAccelerated(animation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 1); |
| |
| const composingAnimation = target.animate( |
| { transform: "translateY(100px)" }, |
| { composite: "add", duration } |
| ); |
| |
| await animationReadyToAnimateAccelerated(composingAnimation); |
| assert_equals(internals.acceleratedAnimationsForElement(target).length, 0); |
| }, "Adding a composing effect on top of an existing replace effect should prevent both effects from running accelerated"); |
| |
| </script> |
| </body> |
