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 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 Playback rate is set to 0.5
     21 <br>
     22 <div id="test1a">MT</div>
     23 <div id="test1b">CT</div>
     24 
     25 Playback rate is set to 1
     26 <br>
     27 <div id="test2a">MT</div>
     28 <div id="test2b">CT</div>
     29 
     30 Playback rate is set to 2
     31 <br>
     32 <div id="test3a">MT</div>
     33 <div id="test3b">CT</div>
     34 
     35 <script>
     36     var transformKeyframes = [
     37         {transform: 'translateX(0px)'},
     38         {transform: 'translateX(500px)'}
     39         ];
     40     var leftKeyframes = [
     41         {left: '0'},
     42         {left: '500px'}
     43         ];
     44     var player1a = test1a.animate(leftKeyframes, {
     45             duration: 1000,
     46             iterations: 2,
     47             fill: 'forwards',
     48             playbackRate: 0.5
     49         });
     50     var player1b = test1b.animate(transformKeyframes, {
     51             duration: 1000,
     52             iterations: 2,
     53             fill: 'forwards',
     54             playbackRate: 0.5
     55         });
     56     var player2a = test2a.animate(leftKeyframes, {
     57             duration: 1000,
     58             iterations: 4,
     59             fill: 'forwards',
     60             playbackRate: 1
     61         });
     62     var player2b = test2b.animate(transformKeyframes, {
     63             duration: 1000,
     64             iterations: 4,
     65             fill: 'forwards',
     66             playbackRate: 1
     67         });
     68     var player3a = test3a.animate(leftKeyframes, {
     69             duration: 1000,
     70             iterations: 8,
     71             fill: 'forwards',
     72             playbackRate: 2
     73         });
     74     var player3b = test3b.animate(transformKeyframes, {
     75             duration: 1000,
     76             iterations: 8,
     77             fill: 'forwards',
     78             playbackRate: 2
     79         });
     80 </script>
     81 </body>
     82 </html>