src/third_party/WebKit/ManualTests/animation/compositor-change-playback-rate.html

   1 <style>
   2 div {
   3   height: 100px;
   4   width: 100px;
   5   background: blue;
   6 }
   7 </style>
   8 <p>
   9 The four squares should make identical rotations at different rates without jumping.
  10 <div id="target1"></div>
  11 <div id="target2"></div>
  12 <div id="target3"></div>
  13 <div id="target4"></div>
  14 <script>
  15 var player1 = target1.animate([
  16   {transform: 'none'},
  17   {transform: 'rotate(90deg)'}
  18 ], {duration: 1000, iterations: 200000});
  19
  20 var player2 = target2.animate([
  21   {transform: 'none', background: 'blue'},
  22   {transform: 'rotate(90deg)', background: 'blue'}
  23 ], {duration: 1000, iterations: 200000});
  24
  25 var player3 = target3.animate([
  26   {transform: 'none'},
  27   {transform: 'rotate(90deg)'}
  28 ], {duration: 1000, iterations: Infinity});
  29
  30 var player4 = target4.animate([
  31   {transform: 'none', background: 'blue'},
  32   {transform: 'rotate(90deg)', background: 'blue'}
  33 ], {duration: 1000, iterations: Infinity});
  34
  35 setInterval(function() {
  36   var playbackRate = (Math.random() - 0.5) * 5;
  37   player1.playbackRate = playbackRate;
  38   player2.playbackRate = playbackRate;
  39   player3.playbackRate = playbackRate;
  40   player4.playbackRate = playbackRate;
  41 }, 100);
  42 </script>