Home | History | Annotate | Download | only in animation 
      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>
     67