blob: d1633b3612c97cf5973b989e021da4c931ddb20d [file] [log] [blame]
<style>
div {
height: 100px;
width: 100px;
background: blue;
margin: 10px;
}
</style>
<p>
Tests forcing changes to currentTime for a compositor animation.
<p>
The three squares should make identical movements from left to right, jumping every 200ms.
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<script>
var p1 = target1.animate([
{transform: 'translate(0%)'},
{transform: 'translate(800px)'}
], 1000);
var p2 = target2.animate([
{transform: 'translate(0px)'},
{transform: 'translate(800px)'}
], 1000);
var p3 = target3.animate([
{transform: 'translate(800px)'},
{transform: 'translate(0px)'}
], 1000);
p3.reverse();
setInterval(function() {
p1.currentTime += 100;
p2.currentTime += 100;
p3.currentTime -= 100;
if (p1.playState == 'finished')
p1.play();
if (p2.playState == 'finished')
p2.play();
if (p3.playState == 'finished')
p3.play();
}, 200);
</script>