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