| <!DOCTYPE html> |
| <meta charset="utf-8"> |
| <style> |
| |
| .target { |
| margin-left: 0; |
| transition: margin-left 1s linear; |
| } |
| |
| .target.in-flight { |
| margin-left: 100px; |
| } |
| |
| .target.in-flight.retargeted { |
| margin-left: 200px; |
| } |
| |
| </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 ready and retarget the transition. |
| await initialTransition.ready; |
| target.classList.add("retargeted"); |
| retargetedTransition = getAnimation(); |
| |
| assert_not_equals(initialTransition, retargetedTransition, "Retargeting yielded a new transition."); |
| assert_not_equals(initialTransition.effect.getKeyframes()[0].marginLeft, retargetedTransition.effect.getKeyframes()[0].marginLeft, "The new transition used a different from value."); |
| assert_not_equals(initialTransition.effect.getKeyframes()[1].marginLeft, retargetedTransition.effect.getKeyframes()[1].marginLeft, "The new transition used a different to value."); |
| }, `A CSS transition that is retargeted during its ready promise should not use its from style as its before-change style.`); |
| |
| </script> |
| </body> |
