third_party/WebKit/ManualTests/animation/compositor-animation-2-keyframe.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 three boxes.
  13 <ul>
  14   <li>Top - runs on the main thread.</li>
  15   <li>Middle - runs on the compositor, timing function set on whole animation.</li>
  16   <li>Bottom - runs on the compositor, timing function set on the first keyframe.</li>
  17 </ul>
  18 The animations should be identical but start at different times.
  19 </p><p>
  20 This test is successful if the boxes are mostly in sync (there might be a small
  21 offset between them).
  22 </p>
  23 <hr>
  24
  25 Start delay 0s (no start delay, should finish first.)
  26 <br>
  27 <div class='test0 anim-left'></div>
  28 <div class='test0 anim-transform'></div>
  29 <div class='test0 anim-transform-keyframe'></div>
  30
  31 Start delay 3s (starts 3 seconds after page load, should finish last.)
  32 <br>
  33 <div class='test1 anim-left'></div>
  34 <div class='test1 anim-transform'></div>
  35 <div class='test1 anim-transform-keyframe'></div>
  36
  37 <script>
  38   document.getElementsByClassName('test0 anim-left')[0].animate(
  39       [{left: '0'}, {left: '300px'}],
  40       {duration: 2000, easing: 'ease-in'});
  41
  42   document.getElementsByClassName('test0 anim-transform')[0].animate(
  43       [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}],
  44       {duration: 2000, easing: 'ease-in'});
  45
  46   document.getElementsByClassName('test0 anim-transform-keyframe')[0].animate(
  47       [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}],
  48       {duration: 2000});
  49
  50   // Delay these manually otherwise won't hit the compositor.
  51   setTimeout(function() {
  52     document.getElementsByClassName('test1 anim-left')[0].animate(
  53         [{left: '0'}, {left: '300px'}],
  54         {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  55
  56     document.getElementsByClassName('test1 anim-transform')[0].animate(
  57         [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}],
  58         {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  59
  60     document.getElementsByClassName('test1 anim-transform-keyframe')[0].animate(
  61         [{transform: 'translateX(0)', easing: 'cubic-bezier(.5, -1, .5, 2)'}, {transform: 'translateX(300px)'}],
  62         {duration: 2000});
  63     }, 3000);
  64 </script>
  65 </body>
  66 </html>