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="test0a">MT</div>
     23 <div id="test0b">CT</div>
     24 
     25 Playback rate is set to -1
     26 <br>
     27 <div id="test1a">MT</div>
     28 <div id="test1b">CT</div>
     29 
     30 Playback rate is set to -2
     31 <br>
     32 <div id="test2a">MT</div>
     33 <div id="test2b">CT</div>
     34 
     35 Playback rate is set to -1, direction is alternate
     36 <br>
     37 <div id="test3a">MT</div>
     38 <div id="test3b">CT</div>
     39 
     40 Playback rate is set to -1, direction is alternate, iterations is 5 - should finish a second later.
     41 <br>
     42 <div id="test4a">MT</div>
     43 <div id="test4b">CT</div>
     44 
     45 Playback rate is set to -1, direction is alternate-reverse
     46 <br>
     47 <div id="test5a">MT</div>
     48 <div id="test5b">CT</div>
     49 
     50 Playback rate is set to -1, direction is alternate-reverse, iterations is 5 - should finish a second later.
     51 <br>
     52 <div id="test6a">MT</div>
     53 <div id="test6b">CT</div>
     54 
     55 <script>
     56     var transformKeyframes = [
     57         {transform: 'translateX(0px)'},
     58         {transform: 'translateX(500px)'}
     59         ];
     60     var leftKeyframes = [
     61         {left: '0'},
     62         {left: '500px'}
     63         ];
     64     var player0a = test0a.animate(leftKeyframes, {
     65             duration: 1000,
     66             iterations: 2,
     67             fill: 'forwards',
     68             playbackRate: -0.5
     69         });
     70     var player0b = test0b.animate(transformKeyframes, {
     71             duration: 1000,
     72             iterations: 2,
     73             fill: 'forwards',
     74             playbackRate: -0.5
     75         });
     76     var player1a = test1a.animate(leftKeyframes, {
     77             duration: 1000,
     78             iterations: 4,
     79             fill: 'forwards',
     80             playbackRate: -1
     81         });
     82     var player1b = test1b.animate(transformKeyframes, {
     83             duration: 1000,
     84             iterations: 4,
     85             fill: 'forwards',
     86             playbackRate: -1
     87         });
     88     var player2a = test2a.animate(leftKeyframes, {
     89             duration: 1000,
     90             iterations: 8,
     91             fill: 'forwards',
     92             playbackRate: -2
     93         });
     94     var player2b = test2b.animate(transformKeyframes, {
     95             duration: 1000,
     96             iterations: 8,
     97             fill: 'forwards',
     98             playbackRate: -2
     99         });
    100     var player3a = test3a.animate(leftKeyframes, {
    101             duration: 1000,
    102             iterations: 4,
    103             fill: 'both',
    104             playbackRate: -1,
    105             direction: 'alternate'
    106         });
    107     var player3b = test3b.animate(transformKeyframes, {
    108             duration: 1000,
    109             iterations: 4,
    110             fill: 'both',
    111             playbackRate: -1,
    112             direction: 'alternate'
    113         });
    114     var player4a = test4a.animate(leftKeyframes, {
    115             duration: 1000,
    116             iterations: 5,
    117             fill: 'both',
    118             playbackRate: -1,
    119             direction: 'alternate'
    120         });
    121     var player4b = test4b.animate(transformKeyframes, {
    122             duration: 1000,
    123             iterations: 5,
    124             fill: 'both',
    125             playbackRate: -1,
    126             direction: 'alternate'
    127         });
    128     var player5a = test5a.animate(leftKeyframes, {
    129             duration: 1000,
    130             iterations: 4,
    131             fill: 'both',
    132             playbackRate: -1,
    133             direction: 'alternate-reverse'
    134         });
    135     var player5b = test5b.animate(transformKeyframes, {
    136             duration: 1000,
    137             iterations: 4,
    138             fill: 'both',
    139             playbackRate: -1,
    140             direction: 'alternate-reverse'
    141         });
    142     var player6a = test6a.animate(leftKeyframes, {
    143             duration: 1000,
    144             iterations: 5,
    145             fill: 'both',
    146             playbackRate: -1,
    147             direction: 'alternate-reverse'
    148         });
    149     var player6b = test6b.animate(transformKeyframes, {
    150             duration: 1000,
    151             iterations: 5,
    152             fill: 'both',
    153             playbackRate: -1,
    154             direction: 'alternate-reverse'
    155         });
    156 </script>
    157 </body>
    158 </html>