blob: 329cebf2193b2f4d44fe9316ecae3f2dbbaf92bc [file] [log] [blame]
<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>