third_party/WebKit/ManualTests/animation/compositor-animation-steps.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 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 Steps for easing timing function is set to 9.
  21 <br>
  22 <div id="test1a">MT</div>
  23 <div id="test1b">CT</div>
  24 <hr>
  25
  26 Per-keyframe steps easing function (18 and 9 steps).
  27 <br>
  28 <div id="test2a">MT</div>
  29 <div id="test2b">CT</div>
  30
  31 Cubic-bezier easing function combined with a step keyframe.
  32 <br>
  33 <div id="test3a">MT</div>
  34 <div id="test3b">CT</div>
  35
  36 Steps easing function combined with a cubic-bezier keyframe.
  37 <br>
  38 <div id="test4a">MT</div>
  39 <div id="test4b">CT</div>
  40
  41 <script>
  42 var transformKeyframes = [
  43     {transform: 'translateX(0px)'},
  44     {transform: 'translateX(500px)'}
  45     ];
  46 var leftKeyframes = [
  47     {left: '0'},
  48     {left: '500px'}
  49     ];
  50 var player1a = test1a.animate(leftKeyframes, {
  51         duration: 6000,
  52         iterations: Infinity,
  53         easing: 'steps(9)'
  54     });
  55 var player1b = test1b.animate(transformKeyframes, {
  56         duration: 6000,
  57         iterations: Infinity,
  58         easing: 'steps(9)'
  59     });
  60
  61 var transformKeyframesEasing = [
  62     {transform: 'translateX(0px)', easing: 'steps(18)'},
  63     {transform: 'translateX(250px)', easing: 'steps(9)'},
  64     {transform: 'translateX(500px)'}
  65     ];
  66 var leftKeyframesEasing = [
  67     {left: '0', easing: 'steps(18)'},
  68     {left: '250px', easing: 'steps(9)'},
  69     {left: '500px'}
  70     ];
  71 var player2a = test2a.animate(leftKeyframesEasing, {
  72         duration: 6000,
  73         iterations: Infinity
  74     });
  75 var player2b = test2b.animate(transformKeyframesEasing, {
  76         duration: 6000,
  77         iterations: Infinity
  78     });
  79
  80 var transformKeyframesWithStepsKeyframe = [
  81     {transform: 'translateX(0px)', easing: 'steps(9)'},
  82     {transform: 'translateX(500px)'}
  83     ];
  84 var leftKeyframesWithStepsKeyframe = [
  85     {left: '0', easing: 'steps(9)'},
  86     {left: '500px'}
  87     ];
  88 var player3a = test3a.animate(leftKeyframesWithStepsKeyframe, {
  89         duration: 6000,
  90         iterations: Infinity,
  91         easing: 'cubic-bezier(.5, -1, .5, 2)'
  92     });
  93 var player3b = test3b.animate(transformKeyframesWithStepsKeyframe, {
  94         duration: 6000,
  95         iterations: Infinity,
  96         easing: 'cubic-bezier(.5, -1, .5, 2)'
  97     });
  98
  99 var transformKeyframesWithCubicKeyframe = [
 100     {transform: 'translateX(0px)', easing: 'cubic-bezier(.5, -1, .5, 2)'},
 101     {transform: 'translateX(500px)'}
 102     ];
 103 var leftKeyframesWithCubicKeyframe = [
 104     {left: '0', easing: 'cubic-bezier(.5, -1, .5, 2)'},
 105     {left: '500px'}
 106     ];
 107 var player4a = test4a.animate(leftKeyframesWithCubicKeyframe, {
 108         duration: 6000,
 109         iterations: Infinity,
 110         easing: 'steps(9)'
 111     });
 112 var player4b = test4b.animate(transformKeyframesWithCubicKeyframe, {
 113         duration: 6000,
 114         iterations: Infinity,
 115         easing: 'steps(9)'
 116     });
 117 </script>
 118 </body>
 119 </html>