third_party/WebKit/ManualTests/animation/compositor-change-current-time.html

   1 <style>
   2 div {
   3   height: 100px;
   4   width: 100px;
   5   background: blue;
   6   margin: 10px;
   7 }
   8 </style>
   9 <p>
  10 Tests forcing changes to currentTime for a compositor animation.
  11 <p>
  12 The three squares should make identical movements from left to right, jumping every 200ms.
  13 <div id="target1"></div>
  14 <div id="target2"></div>
  15 <div id="target3"></div>
  16 <script>
  17 var p1 = target1.animate([
  18   {transform: 'translate(0%)'},
  19   {transform: 'translate(800px)'}
  20 ], 1000);
  21
  22 var p2 = target2.animate([
  23   {transform: 'translate(0px)'},
  24   {transform: 'translate(800px)'}
  25 ], 1000);
  26
  27 var p3 = target3.animate([
  28   {transform: 'translate(800px)'},
  29   {transform: 'translate(0px)'}
  30 ], 1000);
  31 p3.reverse();
  32
  33 setInterval(function() {
  34   p1.currentTime += 100;
  35   p2.currentTime += 100;
  36   p3.currentTime -= 100;
  37   if (p1.playState == 'finished')
  38     p1.play();
  39   if (p2.playState == 'finished')
  40     p2.play();
  41   if (p3.playState == 'finished')
  42     p3.play();
  43 }, 200);
  44 </script>