59 lines
1.9 KiB
HTML
59 lines
1.9 KiB
HTML
|
<!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>
|