<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: yellow;
}
</style>
<body>
<p>
Each section below has two boxes, the top runs on the main thread, the bottom
on the compositor.
</p><p>
This test is successful if the boxes are mostly in sync and all finish at the
same time.
</p>
<hr>

Add second translate animation on timeout (with fill=forwards)
<br>
<div id="test1_blink">BLINK THREAD</div>
<div id="test1_impl">IMPL THREAD</div>
<hr>

Add second translate animation on timeout if first one was paused earlier
<br>
<div id="test2_blink">BLINK THREAD</div>
<div id="test2_impl">IMPL THREAD</div>
<hr>

Add second translate animation on timeout if first one was finished earlier
<br>
<div id="test3_blink">BLINK THREAD</div>
<div id="test3_impl">IMPL THREAD</div>
<hr>

Add second translate animation on timeout if first higher-priority one was paused earlier
<br>
<div id="test4_blink">BLINK THREAD</div>
<div id="test4_impl">IMPL THREAD</div>
<hr>

<script>
var leftKeyframes = [
    {left: '100px'},
    {left: '600px'}
    ];
var translateKeyframes = [
    {transform: 'translateX(100px)'},
    {transform: 'translateX(600px)'}
    ];

var leftKeyframes2 = [
    {left: '600px'},
    {left: '700px'}
    ];
var translateKeyframes2 = [
    {transform: 'translateX(600px)'},
    {transform: 'translateX(700px)'}
    ];

var player1_blink = test1_blink.animate(leftKeyframes, {
        duration: 5000,
        delay: 100,
        fill: 'forwards'
    });
var player1_impl = test1_impl.animate(translateKeyframes, {
        duration: 5000,
        delay: 100,
        fill: 'forwards'
    });

var player2_blink = test2_blink.animate(leftKeyframes, {
        duration: 5000,
        delay: 100,
    });
var player2_impl = test2_impl.animate(translateKeyframes, {
        duration: 5000,
        delay: 100,
    });

var player3_blink = test3_blink.animate(leftKeyframes, {
        duration: 5000,
        delay: 100,
    });
var player3_impl = test3_impl.animate(translateKeyframes, {
        duration: 5000,
        delay: 100,
    });

// Create detached lower-priority second player with short animation
var player4_blink2 = test4_blink.animate(leftKeyframes2, {
        duration: 1000,
        delay: 500,
    });
player4_blink2.cancel();
var player4_impl2 = test4_impl.animate(translateKeyframes2, {
        duration: 1000,
        delay: 500,
    });
player4_impl2.cancel();

var player4_blink = test4_blink.animate(leftKeyframes, {
        duration: 5000,
        delay: 100,
    });
var player4_impl = test4_impl.animate(translateKeyframes, {
        duration: 5000,
        delay: 100,
    });

setTimeout(function() {
    player2_blink.pause();
    player2_impl.pause();

    player3_blink.finish();
    player3_impl.finish();

    player4_blink.pause();
    player4_impl.pause();
}, 1500);

setTimeout(function() {
    var player1_blink2 = test1_blink.animate(leftKeyframes2, {
            duration: 1000,
            delay: 500,
            fill: 'forwards'
        });
    var player1_impl2 = test1_impl.animate(translateKeyframes2, {
            duration: 1000,
            delay: 500,
            fill: 'forwards'
        });

    var player2_blink2 = test2_blink.animate(leftKeyframes2, {
            duration: 1000,
            delay: 500,
        });
    var player2_impl2 = test2_impl.animate(translateKeyframes2, {
            duration: 1000,
            delay: 500,
        });

    var player3_blink2 = test3_blink.animate(leftKeyframes2, {
            duration: 1000,
            delay: 500,
        });
    var player3_impl2 = test3_impl.animate(translateKeyframes2, {
            duration: 1000,
            delay: 500,
        });

    player4_blink2.play();
    player4_impl2.play();
}, 2500);
</script>
</body>
</html>