src/third_party/WebKit/ManualTests/animation/compositor-animation-iteration-start.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 checks that the compositor and main thread are performing identically
  16 given the same input parameters. This test is successful if each pairing of boxes
  17 are identical and all the boxes sync up and finish at the same time.
  18 </p>
  19 <hr>
  20
  21 Iteration start is set to 0
  22 <br>
  23 <div id="test1a">MT</div>
  24 <div id="test1b">CT</div>
  25
  26 Iteration start is set to 0.4
  27 <br>
  28 <div id="test2a">MT</div>
  29 <div id="test2b">CT</div>
  30
  31 Iteration start is set to 0.8
  32 <br>
  33 <div id="test3a">MT</div>
  34 <div id="test3b">CT</div>
  35
  36 Iteration start is set to 0, iterations is 3, direction is set to alternate
  37 <br>
  38 <div id="test4a">MT</div>
  39 <div id="test4b">CT</div>
  40
  41 Iteration start is set to 1, iterations is 3, direction is set to alternate-reverse
  42 <br>
  43 <div id="test5a">MT</div>
  44 <div id="test5b">CT</div>
  45
  46 Iteration start is set to 1, iterations is 3, direction is set to alternate, playback rate is set to -1
  47 <br>
  48 <div id="test6a">MT</div>
  49 <div id="test6b">CT</div>
  50
  51
  52 <script>
  53 var transformKeyframes = [
  54     {transform: 'translateX(0px)'},
  55     {transform: 'translateX(500px)'}
  56     ];
  57 var leftKeyframes = [
  58     {left: '0'},
  59     {left: '500px'}
  60     ];
  61 var player1a = test1a.animate(leftKeyframes, {
  62         duration: 1000,
  63         iterations: 3,
  64         fill: 'both',
  65     });
  66 var player1b = test1b.animate(transformKeyframes, {
  67         duration: 1000,
  68         iterations: 3,
  69         fill: 'both',
  70     });
  71 var player2a = test2a.animate(leftKeyframes, {
  72         duration: 1000,
  73         iterations: 2.6,
  74         fill: 'both',
  75         iterationStart: 0.4,
  76         delay: 400,
  77     });
  78 var player2b = test2b.animate(transformKeyframes, {
  79         duration: 1000,
  80         iterations: 2.6,
  81         fill: 'both',
  82         iterationStart: 0.4,
  83         delay: 400,
  84     });
  85 var player3a = test3a.animate(leftKeyframes, {
  86         duration: 1000,
  87         iterations: 2.2,
  88         fill: 'both',
  89         iterationStart: 0.8,
  90         delay: 800,
  91     });
  92 var player3b = test3b.animate(transformKeyframes, {
  93         duration: 1000,
  94         iterations: 2.2,
  95         fill: 'both',
  96         iterationStart: 0.8,
  97         delay: 800,
  98     });
  99 var player4a = test4a.animate(leftKeyframes, {
 100         duration: 1000,
 101         iterations: 3,
 102         fill: 'both',
 103         direction: 'alternate',
 104     });
 105 var player4b = test4b.animate(transformKeyframes, {
 106         duration: 1000,
 107         iterations: 3,
 108         fill: 'both',
 109         direction: 'alternate',
 110     });
 111 var player5a = test5a.animate(leftKeyframes, {
 112         duration: 1000,
 113         iterations: 3,
 114         fill: 'both',
 115         iterationStart: 1,
 116         direction: 'alternate-reverse',
 117     });
 118 var player5b = test5b.animate(transformKeyframes, {
 119         duration: 1000,
 120         iterations: 3,
 121         fill: 'both',
 122         iterationStart: 1,
 123         direction: 'alternate-reverse',
 124     });
 125 var player6a = test6a.animate(leftKeyframes, {
 126         duration: 1000,
 127         iterations: 3,
 128         fill: 'both',
 129         iterationStart: 1,
 130         direction: 'alternate',
 131         playbackRate: -1,
 132     });
 133 var player6b = test6b.animate(transformKeyframes, {
 134         duration: 1000,
 135         iterations: 3,
 136         fill: 'both',
 137         iterationStart: 1,
 138         direction: 'alternate',
 139         playbackRate: -1,
 140     });
 141 </script>
 142 </body>
 143 </html>