third_party/WebKit/ManualTests/animation/compositor-pause-play.html

   1 <style>
   2 div {
   3     position: relative;
   4     height: 100px;
   5     width: 100px;
   6     background: blue;
   7 }
   8 </style>
   9
  10 Player modified then pause()/play() on and off the compositor. The two boxes should have identical motions.
  11 <br>
  12
  13 <div id="target1"></div>
  14 <div id="target2"></div>
  15
  16 <script>
  17 var player1 = target1.animate([
  18     {left: '0px'},
  19     {left: '800px'},
  20 ], {
  21     duration: 1000,
  22     direction: 'alternate',
  23     iterations: Infinity,
  24 });
  25
  26 var player2 = target2.animate([
  27     {transform: 'translate(0px)'},
  28     {transform: 'translate(800px)'},
  29 ], {
  30     duration: 1000,
  31     direction: 'alternate',
  32     iterations: Infinity,
  33 });
  34
  35 setInterval(function() {
  36   player1.currentTime = 0;
  37   player1.pause();
  38   player1.play();
  39   player2.currentTime = 0;
  40   player2.pause();
  41   player2.play();
  42 }, 500);
  43 </script>