<html>
<style>
div {
    position: relative;
    height: 100px;
    width: 100px;
    background: blue;
}
</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>

Delay is set to -1s
<br>
<div id="test1a">MT</div>
<div id="test1b">CT</div>

Delay is 0
<br>
<div id="test2a">MT</div>
<div id="test2b">CT</div>

Delay is set to 1s
<br>
<div id="test3a">MT</div>
<div id="test3b">CT</div>

<script>
    var transformKeyframes = [
        {transform: 'translateX(0px)'},
        {transform: 'translateX(500px)'}];
    var leftKeyframes = [
        {left: '0'},
        {left: '500px'}];
    var players = [];
    players.push(test1a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 2,
            fill: 'forwards',
            delay: -1000
        }));
    players.push(test1b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 2,
            fill: 'forwards',
            delay: -1000
        }));
    players.push(test2a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'forwards',
            delay: 0
        }));
    players.push(test2b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'forwards',
            delay: 0
        }));
    players.push(test3a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 8,
            fill: 'forwards',
            delay: 1000
        }));
    players.push(test3b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 8,
            fill: 'forwards',
            delay: 1000
        }));

    setTimeout(function() {
        players.forEach(function(player) {
            player.playbackRate = 0.5;
        });
    }, 500);
    setTimeout(function() {
        players.forEach(function(player) {
            player.playbackRate = 1.5;
        });
    }, 1500);
</script>
</body>
</html>