<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 checks that the compositor and main thread are performing identically
given the same input parameters. This test is successful if each pairing of boxes
are identical and all the boxes sync up and finish at the same time.
</p>
<hr>

Iteration start is set to 0
<br>
<div id="test1a">MT</div>
<div id="test1b">CT</div>

Iteration start is set to 0.4
<br>
<div id="test2a">MT</div>
<div id="test2b">CT</div>

Iteration start is set to 0.8
<br>
<div id="test3a">MT</div>
<div id="test3b">CT</div>

Iteration start is set to 0, iterations is 3, direction is set to alternate
<br>
<div id="test4a">MT</div>
<div id="test4b">CT</div>

Iteration start is set to 1, iterations is 3, direction is set to alternate-reverse
<br>
<div id="test5a">MT</div>
<div id="test5b">CT</div>

Iteration start is set to 1, iterations is 3, direction is set to alternate, playback rate is set to -1
<br>
<div id="test6a">MT</div>
<div id="test6b">CT</div>


<script>
var transformKeyframes = [
    {transform: 'translateX(0px)'},
    {transform: 'translateX(500px)'}
    ];
var leftKeyframes = [
    {left: '0'},
    {left: '500px'}
    ];
var player1a = test1a.animate(leftKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
    });
var player1b = test1b.animate(transformKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
    });
var player2a = test2a.animate(leftKeyframes, {
        duration: 1000,
        iterations: 2.6,
        fill: 'both',
        iterationStart: 0.4,
        delay: 400,
    });
var player2b = test2b.animate(transformKeyframes, {
        duration: 1000,
        iterations: 2.6,
        fill: 'both',
        iterationStart: 0.4,
        delay: 400,
    });
var player3a = test3a.animate(leftKeyframes, {
        duration: 1000,
        iterations: 2.2,
        fill: 'both',
        iterationStart: 0.8,
        delay: 800,
    });
var player3b = test3b.animate(transformKeyframes, {
        duration: 1000,
        iterations: 2.2,
        fill: 'both',
        iterationStart: 0.8,
        delay: 800,
    });
var player4a = test4a.animate(leftKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
        direction: 'alternate',
    });
var player4b = test4b.animate(transformKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
        direction: 'alternate',
    });
var player5a = test5a.animate(leftKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
        iterationStart: 1,
        direction: 'alternate-reverse',
    });
var player5b = test5b.animate(transformKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
        iterationStart: 1,
        direction: 'alternate-reverse',
    });
var player6a = test6a.animate(leftKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
        iterationStart: 1,
        direction: 'alternate',
        playbackRate: -1,
    });
var player6b = test6b.animate(transformKeyframes, {
        duration: 1000,
        iterations: 3,
        fill: 'both',
        iterationStart: 1,
        direction: 'alternate',
        playbackRate: -1,
    });
</script>
</body>
</html>