third_party/WebKit/ManualTests/animation/compositor-animation-delay-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 Delay is set to -1s
  21 <br>
  22 <div id="test1a">MT</div>
  23 <div id="test1b">CT</div>
  24
  25 Delay is 0
  26 <br>
  27 <div id="test2a">MT</div>
  28 <div id="test2b">CT</div>
  29
  30 Delay is set to 1s
  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     var leftKeyframes = [
  40         {left: '0'},
  41         {left: '500px'}];
  42     var players = [];
  43     players.push(test1a.animate(leftKeyframes, {
  44             duration: 1000,
  45             iterations: 2,
  46             fill: 'forwards',
  47             delay: -1000
  48         }));
  49     players.push(test1b.animate(transformKeyframes, {
  50             duration: 1000,
  51             iterations: 2,
  52             fill: 'forwards',
  53             delay: -1000
  54         }));
  55     players.push(test2a.animate(leftKeyframes, {
  56             duration: 1000,
  57             iterations: 4,
  58             fill: 'forwards',
  59             delay: 0
  60         }));
  61     players.push(test2b.animate(transformKeyframes, {
  62             duration: 1000,
  63             iterations: 4,
  64             fill: 'forwards',
  65             delay: 0
  66         }));
  67     players.push(test3a.animate(leftKeyframes, {
  68             duration: 1000,
  69             iterations: 8,
  70             fill: 'forwards',
  71             delay: 1000
  72         }));
  73     players.push(test3b.animate(transformKeyframes, {
  74             duration: 1000,
  75             iterations: 8,
  76             fill: 'forwards',
  77             delay: 1000
  78         }));
  79
  80     setTimeout(function() {
  81         players.forEach(function(player) {
  82             player.playbackRate = 0.5;
  83         });
  84     }, 500);
  85     setTimeout(function() {
  86         players.forEach(function(player) {
  87             player.playbackRate = 1.5;
  88         });
  89     }, 1500);
  90 </script>
  91 </body>
  92 </html>