| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <style> |
| |
| .target { |
| transform: translateX(100px); |
| transition: transform 100ms linear; |
| } |
| |
| .target.in-flight { |
| transform: translateX(0); |
| } |
| |
| .target.in-flight.retargeted { |
| transform: translateY(0); |
| } |
| |
| </style> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| promise_test(async test => { |
| const target = document.body.appendChild(document.createElement("div")); |
| target.classList.add("target"); |
| |
| const getAnimation = () => { |
| const animations = target.getAnimations(); |
| assert_equals(animations.length, 1, "There is one animation applied to the target."); |
| |
| const transition = animations[0]; |
| assert_true(transition instanceof CSSTransition, "There is one transition applied to the target."); |
| |
| return transition; |
| } |
| |
| let initialTransition; |
| let retargetedTransition; |
| |
| // Start the initial transition. |
| await new Promise(requestAnimationFrame); |
| target.classList.add("in-flight"); |
| initialTransition = getAnimation(); |
| |
| // Wait until the animation is complete and retarget the transition to the same value. |
| await(initialTransition.ready); |
| await(new Promise(resolve => setTimeout(resolve, 100))); |
| target.classList.add("retargeted"); |
| retargetedTransition = getAnimation(); |
| |
| assert_not_equals(initialTransition, retargetedTransition, "Retargeting yielded a new transition."); |
| |
| const transformAtKeyframeIndex = (animation, index) => new DOMMatrixReadOnly(animation.effect.getKeyframes()[index].transform).toString(); |
| assert_not_equals(transformAtKeyframeIndex(initialTransition, 0), transformAtKeyframeIndex(retargetedTransition, 0), "The initial and retargeted transitions have different from values."); |
| assert_equals(transformAtKeyframeIndex(initialTransition, 1), transformAtKeyframeIndex(retargetedTransition, 1), "The initial and retargeted transitions have the same to values."); |
| assert_equals(transformAtKeyframeIndex(retargetedTransition, 0), transformAtKeyframeIndex(retargetedTransition, 1), "The retargeted transition from and to values are the same."); |
| }, `A CSS transition that is retargeted upon completion based on a timer should not use its to style as its before-change style.`); |
| |
| </script> |
| </body> |
