third_party/WebKit/ManualTests/animation/compositor-animation-multiple-timelines.html

   1 <html>
   2 <style>
   3 div {
   4     position: relative;
   5     height: 100px;
   6     width: 100px;
   7     background: yellow;
   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 Multiple iframes test.
  21 <br>
  22 <div id="test1_blink">BLINK THREAD</div>
  23 <div id="test1_impl">IMPL THREAD</div>
  24 <hr>
  25
  26 <script>
  27 var leftKeyframes = [
  28     {left: '100px'},
  29     {left: '600px'}
  30     ];
  31 var translateKeyframes = [
  32     {transform: 'translateX(100px)'},
  33     {transform: 'translateX(600px)'}
  34     ];
  35
  36 var player1_blink = test1_blink.animate(leftKeyframes, {
  37         duration: 5000,
  38         delay: 100,
  39     });
  40 var player1_impl = test1_impl.animate(translateKeyframes, {
  41         duration: 5000,
  42         delay: 100,
  43     });
  44 </script>
  45
  46 <iframe src="compositor-animation-steps.html" style="border: 0; width: 100%; height: 50%">No iframe</iframe>
  47
  48 <iframe src="compositor-animation-same-property.html" style="border: 0; width: 100%; height: 50%">No iframe</iframe>
  49
  50 </body>
  51 </html>