compositor-animation-playback-rate-reverse.html

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

Playback rate is set to -0.5
<br>
<div id="test0a">MT</div>
<div id="test0b">CT</div>

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

Playback rate is set to -2
<br>
<div id="test2a">MT</div>
<div id="test2b">CT</div>

Playback rate is set to -1, direction is alternate
<br>
<div id="test3a">MT</div>
<div id="test3b">CT</div>

Playback rate is set to -1, direction is alternate, iterations is 5 - should finish a second later.
<br>
<div id="test4a">MT</div>
<div id="test4b">CT</div>

Playback rate is set to -1, direction is alternate-reverse
<br>
<div id="test5a">MT</div>
<div id="test5b">CT</div>

Playback rate is set to -1, direction is alternate-reverse, iterations is 5 - should finish a second later.
<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 player0a = test0a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 2,
            fill: 'forwards',
            playbackRate: -0.5
        });
    var player0b = test0b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 2,
            fill: 'forwards',
            playbackRate: -0.5
        });
    var player1a = test1a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'forwards',
            playbackRate: -1
        });
    var player1b = test1b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'forwards',
            playbackRate: -1
        });
    var player2a = test2a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 8,
            fill: 'forwards',
            playbackRate: -2
        });
    var player2b = test2b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 8,
            fill: 'forwards',
            playbackRate: -2
        });
    var player3a = test3a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate'
        });
    var player3b = test3b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate'
        });
    var player4a = test4a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 5,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate'
        });
    var player4b = test4b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 5,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate'
        });
    var player5a = test5a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate-reverse'
        });
    var player5b = test5b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate-reverse'
        });
    var player6a = test6a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 5,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate-reverse'
        });
    var player6b = test6b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 5,
            fill: 'both',
            playbackRate: -1,
            direction: 'alternate-reverse'
        });
</script>
</body>
</html>
chromium/third_party/blink/manual_tests/animation/compositor-animation-playback-rate-reverse.html
