third_party/WebKit/ManualTests/animation/compositor-animation-playback-rate-reverse.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 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>