compositor-animation-playback-rate.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="test1a">MT</div>
<div id="test1b">CT</div>

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

Playback rate is set to 2
<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 player1a = test1a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 2,
            fill: 'forwards',
            playbackRate: 0.5
        });
    var player1b = test1b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 2,
            fill: 'forwards',
            playbackRate: 0.5
        });
    var player2a = test2a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'forwards',
            playbackRate: 1
        });
    var player2b = test2b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 4,
            fill: 'forwards',
            playbackRate: 1
        });
    var player3a = test3a.animate(leftKeyframes, {
            duration: 1000,
            iterations: 8,
            fill: 'forwards',
            playbackRate: 2
        });
    var player3b = test3b.animate(transformKeyframes, {
            duration: 1000,
            iterations: 8,
            fill: 'forwards',
            playbackRate: 2
        });
</script>
</body>
</html>
chromium/third_party/blink/manual_tests/animation/compositor-animation-playback-rate.html
