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

   1 <html>
   2 <style>
   3 div {
   4     position: relative;
   5     height: 100px;
   6     width: 100px;
   7     background: blue;
   8 }
   9 </style>
  10 <body>
  11 <p>
  12 Each section below has two boxes, the top runs on the main thread, the bottom
  13 on the compositor.
  14 </p><p>
  15 This test is successful if the boxes are mostly in sync and all finish at the
  16 same time.
  17 </p>
  18 <hr>
  19
  20 Playback rate is set to 0.5
  21 <br>
  22 <div id="test1a">MT</div>
  23 <div id="test1b">CT</div>
  24
  25 Playback rate is set to 1
  26 <br>
  27 <div id="test2a">MT</div>
  28 <div id="test2b">CT</div>
  29
  30 Playback rate is set to 2
  31 <br>
  32 <div id="test3a">MT</div>
  33 <div id="test3b">CT</div>
  34
  35 <script>
  36     var transformKeyframes = [
  37         {transform: 'translateX(0px)'},
  38         {transform: 'translateX(500px)'}
  39         ];
  40     var leftKeyframes = [
  41         {left: '0'},
  42         {left: '500px'}
  43         ];
  44     var player1a = test1a.animate(leftKeyframes, {
  45             duration: 1000,
  46             iterations: 2,
  47             fill: 'forwards',
  48             playbackRate: 0.5
  49         });
  50     var player1b = test1b.animate(transformKeyframes, {
  51             duration: 1000,
  52             iterations: 2,
  53             fill: 'forwards',
  54             playbackRate: 0.5
  55         });
  56     var player2a = test2a.animate(leftKeyframes, {
  57             duration: 1000,
  58             iterations: 4,
  59             fill: 'forwards',
  60             playbackRate: 1
  61         });
  62     var player2b = test2b.animate(transformKeyframes, {
  63             duration: 1000,
  64             iterations: 4,
  65             fill: 'forwards',
  66             playbackRate: 1
  67         });
  68     var player3a = test3a.animate(leftKeyframes, {
  69             duration: 1000,
  70             iterations: 8,
  71             fill: 'forwards',
  72             playbackRate: 2
  73         });
  74     var player3b = test3b.animate(transformKeyframes, {
  75             duration: 1000,
  76             iterations: 8,
  77             fill: 'forwards',
  78             playbackRate: 2
  79         });
  80 </script>
  81 </body>
  82 </html>