third_party/WebKit/ManualTests/animation/compositor-animation-cubic.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 has below has two boxes.
  13 <ul>
  14   <li>Top - runs on main thread.</li>
  15   <li>Bottom - runs on the compositor, unless otherwise specified.</li>
  16 </ul>
  17 The animations should be identical but start at different times.
  18 </p><p>
  19 This test is successful if the boxes are mostly in sync (there might be a small
  20 offset between them).
  21 </p>
  22 <hr>
  23
  24 Start delay 0s.
  25 <br>
  26 <div class='test0 anim-left'></div>
  27 <div class='test0 anim-transform'></div>
  28
  29 Start delay 3s. Bottom does not run on compositor.
  30 <br>
  31 <div class='test1 anim-left'></div>
  32 <div class='test1 anim-transform'></div>
  33
  34 Start delay 6s.
  35 <br>
  36 <div class='test2 anim-left'></div>
  37 <div class='test2 anim-transform'></div>
  38
  39 Start delay 9s.
  40 <br>
  41 <div class='test3 anim-left'></div>
  42 <div class='test3 anim-transform'></div>
  43 <script>
  44   document.getElementsByClassName('test0 anim-left')[0].animate(
  45       [{left: '0'}, {left: '300px'}],
  46       {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  47
  48   document.getElementsByClassName('test0 anim-transform')[0].animate(
  49       [{transform: 'translateX(0)'}, {transform: 'translateX(300px)'}],
  50       {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  51
  52   setTimeout(function() {
  53     document.getElementsByClassName('test1 anim-left')[0].animate(
  54         [{left: '0', easing: 'ease-in'}, {left: '300px'}],
  55         {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  56
  57     document.getElementsByClassName('test1 anim-transform')[0].animate(
  58         [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}],
  59         {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  60   }, 3000);
  61
  62   setTimeout(function() {
  63     document.getElementsByClassName('test2 anim-left')[0].animate(
  64         [{left: '0', easing: 'ease-in'}, {left: '300px'}],
  65         {duration: 2000, easing: 'ease-out'});
  66
  67     document.getElementsByClassName('test2 anim-transform')[0].animate(
  68         [{transform: 'translateX(0)', easing: 'ease-in'}, {transform: 'translateX(300px)'}],
  69         {duration: 2000, easing: 'ease-out'});
  70   }, 6000);
  71
  72   setTimeout(function() {
  73     document.getElementsByClassName('test3 anim-left')[0].animate([
  74         {left: '0'},
  75         {left: '100px', easing: 'ease-in'},
  76         {left: '200px'},
  77         {left: '300px'}
  78     ], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  79
  80     document.getElementsByClassName('test3 anim-transform')[0].animate([
  81         {transform: 'translateX(0)'},
  82         {transform: 'translateX(100px)', easing: 'ease-in'},
  83         {transform: 'translateX(200px)'},
  84         {transform: 'translateX(300px)'}
  85     ], {duration: 2000, easing: 'cubic-bezier(.5, -1, .5, 2)'});
  86   }, 9000);
  87 </script>
  88 </body>
  89 </html>