<!DOCTYPE html>

<html>
<head>
    <style type="text/css" media="screen">
        .box {
            position: absolute;
            height: 100px;
            width: 100px;
            left: 0px;
            background-color: blue;
        }

        .box.transitioning {
            transition: left 10s linear;
            left: 100px;
        }

        .box.animating {
            animation: move 0.1s linear;
        }
        
        .box.retargeted {
            left: 200px;
        }
        
        @keyframes move {
            from { left: 500px }
            to   { left: 501px }
        }
        
    </style>
    <script src="../resources/js-test-pre.js"></script>
</head>
<body>
    <div id="test" class="box"></div>
    <script type="text/javascript" charset="utf-8">

    description("Once animation has finished, box should be running left transition from 0px to 200px.");

    window.jsTestIsAsync = true;

    let animations;
    const testElement = document.getElementById('test');

    // Start the test by starting a transition from 0 to 100px.
    window.setTimeout(() => testElement.classList.add("transitioning"));

    // Then, once the transition has started, start an animation.
    testElement.addEventListener("transitionstart", event => {
        setTimeout(() => testElement.classList.add("animating"));
    });

    // Then wait for the animation to start and change the underlying left value.
    testElement.addEventListener("animationstart", event => {
        testElement.classList.add("retargeted");
    });

    // When the animation has ended, check that we're transitioning from ~0 > 200, and not 100 > 200.
    testElement.addEventListener("animationend", event => {
        animations = testElement.getAnimations();
        shouldBe("animations.length", "1");
        shouldBeTrue("animations[0] instanceof CSSTransition");
        shouldNotBeEqualToString("animations[0].effect.getKeyframes()[0].left", "100px");
        shouldBeEqualToString("animations[0].effect.getKeyframes()[1].left", "200px");
        finishJSTest();
    });

    </script>
    <script src="../resources/js-test-post.js"></script>
</body>
</html>