third_party/WebKit/ManualTests/animation/animation-direction-reverse-timing-functions-hardware.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4   <style>
   5     .wrapper {
   6       margin-bottom: 20px;
   7     }
   8     .wrapper div {
   9       height: 18px;
  10       width: 200px;
  11       color: white;
  12     }
  13     .expected {
  14       background-color: red;
  15     }
  16     .animated {
  17       background-color: green;
  18       /* This timing function has value 0 at inputs of 1/3 and 2/3. Chosen because it's very asymmetric about x = y. */
  19       -webkit-animation: move 3000000s 2 cubic-bezier(0.333333, 0.333333, 0.666666, -0.833333) forwards;
  20       margin-bottom: 4px;
  21     }
  22
  23     .delay_zero {
  24       -webkit-animation-delay: 0s;
  25     }
  26     .delay_one_third {
  27       -webkit-animation-delay: -1000000s;
  28     }
  29     .delay_two_thirds {
  30       -webkit-animation-delay: -2000000s;
  31     }
  32     .delay_three_thirds {
  33       -webkit-animation-delay: -3000000s;
  34     }
  35     .delay_four_thirds {
  36       -webkit-animation-delay: -4000000s;
  37     }
  38     .delay_five_thirds {
  39       -webkit-animation-delay: -5000000s;
  40     }
  41     .delay_six_thirds {
  42       -webkit-animation-delay: -6000000s;
  43     }
  44
  45     .expected {
  46       transform: translateX(100px);
  47     }
  48     #normal .expected.delay_six_thirds {
  49       transform: translateX(200px);
  50     }
  51     #alternate .expected.delay_three_thirds {
  52       transform: translateX(200px);
  53     }
  54     #reverse .expected.delay_zero, #reverse .expected.delay_three_thirds {
  55       transform: translateX(200px);
  56     }
  57     #alternate-reverse .expected.delay_zero, #alternate-reverse .expected.delay_six_thirds {
  58       transform: translateX(200px);
  59     }
  60
  61     #normal div {
  62       -webkit-animation-direction: normal;
  63     }
  64     #alternate div {
  65       -webkit-animation-direction: alternate;
  66     }
  67     #reverse div {
  68       -webkit-animation-direction: reverse;
  69     }
  70     #alternate-reverse div {
  71       -webkit-animation-direction: alternate-reverse;
  72     }
  73
  74     @-webkit-keyframes move {
  75       from { transform: translateX(100px); }
  76       to   { transform: translateX(200px); }
  77     }
  78   </style>
  79 </head>
  80 <body>
  81 <div>
  82   Tests animation direction with timing functions and hardware acceleration.
  83   The green boxes use live animations and each should line up with the red box
  84   immediately above it.
  85 </div>
  86 <div class="wrapper" id="normal">
  87   <div class="expected delay_zero">normal</div>
  88   <div class="animated delay_zero">normal</div>
  89   <div class="expected delay_one_third">normal</div>
  90   <div class="animated delay_one_third">normal</div>
  91   <div class="expected delay_two_thirds">normal</div>
  92   <div class="animated delay_two_thirds">normal</div>
  93   <div class="expected delay_three_thirds">normal</div>
  94   <div class="animated delay_three_thirds">normal</div>
  95   <div class="expected delay_four_thirds">normal</div>
  96   <div class="animated delay_four_thirds">normal</div>
  97   <div class="expected delay_five_thirds">normal</div>
  98   <div class="animated delay_five_thirds">normal</div>
  99   <div class="expected delay_six_thirds">normal</div>
 100   <div class="animated delay_six_thirds">normal</div>
 101 </div>
 102 <div class="wrapper" id="alternate">
 103   <div class="expected delay_zero">alternate</div>
 104   <div class="animated delay_zero">alternate</div>
 105   <div class="expected delay_one_third">alternate</div>
 106   <div class="animated delay_one_third">alternate</div>
 107   <div class="expected delay_two_thirds">alternate</div>
 108   <div class="animated delay_two_thirds">alternate</div>
 109   <div class="expected delay_three_thirds">alternate</div>
 110   <div class="animated delay_three_thirds">alternate</div>
 111   <div class="expected delay_four_thirds">alternate</div>
 112   <div class="animated delay_four_thirds">alternate</div>
 113   <div class="expected delay_five_thirds">alternate</div>
 114   <div class="animated delay_five_thirds">alternate</div>
 115   <div class="expected delay_six_thirds">alternate</div>
 116   <div class="animated delay_six_thirds">alternate</div>
 117 </div>
 118 <div class="wrapper" id="reverse">
 119   <div class="expected delay_zero">reverse</div>
 120   <div class="animated delay_zero">reverse</div>
 121   <div class="expected delay_one_third">reverse</div>
 122   <div class="animated delay_one_third">reverse</div>
 123   <div class="expected delay_two_thirds">reverse</div>
 124   <div class="animated delay_two_thirds">reverse</div>
 125   <div class="expected delay_three_thirds">reverse</div>
 126   <div class="animated delay_three_thirds">reverse</div>
 127   <div class="expected delay_four_thirds">reverse</div>
 128   <div class="animated delay_four_thirds">reverse</div>
 129   <div class="expected delay_five_thirds">reverse</div>
 130   <div class="animated delay_five_thirds">reverse</div>
 131   <div class="expected delay_six_thirds">reverse</div>
 132   <div class="animated delay_six_thirds">reverse</div>
 133 </div>
 134 <div class="wrapper" id="alternate-reverse">
 135   <div class="expected delay_zero">alternate-reverse</div>
 136   <div class="animated delay_zero">alternate-reverse</div>
 137   <div class="expected delay_one_third">alternate-reverse</div>
 138   <div class="animated delay_one_third">alternate-reverse</div>
 139   <div class="expected delay_two_thirds">alternate-reverse</div>
 140   <div class="animated delay_two_thirds">alternate-reverse</div>
 141   <div class="expected delay_three_thirds">alternate-reverse</div>
 142   <div class="animated delay_three_thirds">alternate-reverse</div>
 143   <div class="expected delay_four_thirds">alternate-reverse</div>
 144   <div class="animated delay_four_thirds">alternate-reverse</div>
 145   <div class="expected delay_five_thirds">alternate-reverse</div>
 146   <div class="animated delay_five_thirds">alternate-reverse</div>
 147   <div class="expected delay_six_thirds">alternate-reverse</div>
 148   <div class="animated delay_six_thirds">alternate-reverse</div>
 149 </div>
 150 </body>
 151 </html>