| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <title>Reversal of accelerated in-flight CSS Transitions</title> |
| <style type="text/css" media="screen"> |
| |
| .target.opacity { |
| transition: opacity 2s linear; |
| } |
| |
| .target.opacity.in-flight { |
| opacity: 0; |
| } |
| |
| .target.transform { |
| transition: transform 2s linear; |
| } |
| |
| .target.transform.in-flight { |
| transform: scale(0); |
| } |
| |
| </style> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| function targetTest(propertyName) |
| { |
| async_test(test => { |
| const target = document.body.appendChild(document.createElement("div")); |
| target.classList.add("target"); |
| target.classList.add(propertyName); |
| |
| let initialTransition; |
| let reversedTransition; |
| |
| // Start the initial transition. |
| requestAnimationFrame(() => { |
| target.classList.add("in-flight"); |
| const animations = target.getAnimations(); |
| assert_equals(animations.length, 1, "There is one animation applied to the target after starting the initial transition."); |
| |
| initialTransition = animations[0]; |
| assert_true(initialTransition instanceof CSSTransition, "There is one animation applied to the target after starting the initial transition."); |
| |
| // Wait for the initial transition to start and then two frames before reversing the transition, to be certain that the animation did start. |
| // Indeed, the "transitionstart" event will be fired right before the next rAF callback is called, as the animation starts in that very same |
| // frame, and so progress will be 0 and the transition wouldn't be reversable until the next frame when the animation has progress > 0. |
| target.addEventListener("transitionstart", event => { |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| target.classList.remove("in-flight"); |
| const animations = target.getAnimations(); |
| assert_equals(animations.length, 1, "There is one animation applied to the target after reversing the initial transition."); |
| |
| reversedTransition = animations[0]; |
| assert_true(reversedTransition instanceof CSSTransition, "There is one animation applied to the target after reversing the initial transition."); |
| assert_not_equals(initialTransition, reversedTransition, "The animation applied to the target after reversing the initial transition is different than the original transition."); |
| |
| target.remove(); |
| test.done(); |
| }); |
| }); |
| }); |
| }); |
| }, `A CSS transition targeting ${propertyName} can be reversed in-flight.`); |
| } |
| |
| targetTest("opacity"); |
| targetTest("transform"); |
| |
| </script> |
| </body> |
