third_party/WebKit/ManualTests/animation/compositor-neutral-keyframes.html

   1 <html>
   2 <style>
   3 div {
   4     position: relative;
   5     height: 100px;
   6     width: 100px;
   7     background: blue;
   8     will-change: transform;
   9     left: 0px;
  10     -webkit-animation-duration: 2s;
  11     -webkit-animation-timing-function: linear;
  12     -webkit-animation-iteration-count: 2;
  13 }
  14
  15 .anim-left {
  16     -webkit-animation-name: anim-left;
  17     z-index: 100;
  18 }
  19
  20 .anim-transform {
  21     -webkit-animation-name: anim-transform;
  22     z-index: 200;
  23 }
  24
  25 @-webkit-keyframes anim-left {
  26     100% { left: 300px; }
  27 }
  28
  29 @-webkit-keyframes anim-transform {
  30     100% { transform: translateX(300px); }
  31 }
  32 </style>
  33 <body>
  34 <p>
  35 The section below has two boxes, the top runs on the main thread, the bottom
  36 on the compositor. The animations should be identical but start at different
  37 times.
  38 </p><p>
  39 This test is successful if the each pair of boxes are mostly in sync (there
  40 might be a small offset between them).
  41 </p>
  42 <hr>
  43
  44 <div id="target-left" class='anim-left'></div>
  45 <div id="target-transform" class='anim-transform'></div>
  46
  47 </body>
  48 <script>
  49   setTimeout(function() { document.getElementById('target-left').style.left = '500px'; }, 2000);
  50   setTimeout(function() { document.getElementById('target-transform').style.transform = 'translateX(500px)'; }, 2000);
  51 </script>
  52 </html>