<!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>