third_party/WebKit/ManualTests/animation/compositor-synchronized-start-reverse.html

   1 <style>
   2 div {
   3   height: 100px;
   4   width: 100px;
   5   background: blue;
   6   margin: 10px;
   7 }
   8 </style>
   9 <p>
  10 Tests that a player playing in reverse started concurrently with another player receives the correct start time.
  11 <p>
  12 The three squares should make identical movements from left to right.
  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(800px)'},
  19   {transform: 'translate(-800px)'}
  20 ], 2000);
  21 p1.currentTime = 1000;
  22 p1.playbackRate = -1;
  23
  24 var p2 = target2.animate([
  25   {transform: 'translate(800px)'},
  26   {transform: 'translate(0px)'}
  27 ], 1000);
  28 p2.reverse();
  29
  30 var p3 = target3.animate([
  31   {transform: 'translate(-800px)'},
  32   {transform: 'translate(800px)'}
  33 ], 2000);
  34 p3.currentTime = 1000;
  35 </script>