third_party/WebKit/LayoutTests/animations/interpolation/translate-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   translate: 100px 200px 300px;
   6 }
   7 .target {
   8   width: 100px;
   9   height: 100px;
  10   background-color: black;
  11   translate: 10px;
  12 }
  13 .expected {
  14   background-color: green;
  15 }
  16 </style>
  17 <template id="target-template">
  18 <div class="parent">
  19     <div class="target"></div>
  20 </div>
  21 </template>
  22 <script src="resources/interpolation-test.js"></script>
  23 <script>
  24 assertInterpolation({
  25   property: 'translate',
  26   from: '',
  27   to: '20px',
  28 }, [
  29   {at: -1, is: '0px'},
  30   {at: 0, is: '10px'},
  31   {at: 0.25, is: '12.5px'},
  32   {at: 0.75, is: '17.5px'},
  33   {at: 1, is: '20px'},
  34   {at: 2, is: '30px'},
  35 ]);
  36
  37 assertInterpolation({
  38   property: 'translate',
  39   from: 'unset',
  40   to: '20px',
  41 }, [
  42   {at: -1, is: '-20px'},
  43   {at: 0, is: '0px'},
  44   {at: 0.25, is: '5px'},
  45   {at: 0.75, is: '15px'},
  46   {at: 1, is: '20px'},
  47   {at: 2, is: '40px'},
  48 ]);
  49
  50 assertInterpolation({
  51   property: 'translate',
  52   from: '-100px',
  53   to: '100px',
  54 }, [
  55   {at: -1, is: '-300px'},
  56   {at: 0, is: '-100px'},
  57   {at: 0.25, is: '-50px'},
  58   {at: 0.75, is: '50px'},
  59   {at: 1, is: '100px'},
  60   {at: 2, is: '300px'},
  61 ]);
  62
  63 assertInterpolation({
  64   property: 'translate',
  65   from: '-100%',
  66   to: '100%',
  67 }, [
  68   {at: -1, is: '-300%'},
  69   {at: 0, is: '-100%'},
  70   {at: 0.25, is: '-50%'},
  71   {at: 0.75, is: '50%'},
  72   {at: 1, is: '100%'},
  73   {at: 2, is: '300%'},
  74 ]);
  75
  76 assertInterpolation({
  77   property: 'translate',
  78   from: '-100px -50px',
  79   to: '100px 50px',
  80 }, [
  81   {at: -1, is: '-300px -150px'},
  82   {at: 0, is: '-100px -50px'},
  83   {at: 0.25, is: '-50px -25px'},
  84   {at: 0.75, is: '50px 25px'},
  85   {at: 1, is: '100px 50px'},
  86   {at: 2, is: '300px 150px'},
  87 ]);
  88
  89 assertInterpolation({
  90   property: 'translate',
  91   from: '-100px -50px 100px',
  92   to: '100px 50px 0px',
  93 }, [
  94   {at: -1, is: '-300px -150px 200px'},
  95   {at: 0, is: '-100px -50px 100px'},
  96   {at: 0.25, is: '-50px -25px 75px'},
  97   {at: 0.75, is: '50px 25px 25px'},
  98   {at: 1, is: '100px 50px 0px'},
  99   {at: 2, is: '300px 150px -100px'},
 100 ]);
 101
 102 assertInterpolation({
 103   property: 'translate',
 104   from: '0px',
 105   to: '-100px -50px 100px',
 106 }, [
 107   {at: -1, is: '100px 50px -100px'},
 108   {at: 0, is: '0px'},
 109   {at: 0.25, is: '-25px -12.5px 25px'},
 110   {at: 0.75, is: '-75px -37.5px 75px'},
 111   {at: 1, is: '-100px -50px 100px'},
 112   {at: 2, is: '-200px -100px 200px'},
 113 ]);
 114
 115 assertInterpolation({
 116   property: 'translate',
 117   from: '-100px -50px 100px',
 118   to: '0px',
 119 }, [
 120   {at: -1, is: '-200px -100px 200px'},
 121   {at: 0, is: '-100px -50px 100px'},
 122   {at: 0.25, is: '-75px -37.5px 75px'},
 123   {at: 0.75, is: '-25px -12.5px 25px'},
 124   {at: 1, is: '0px'},
 125   {at: 2, is: '100px 50px -100px'},
 126 ]);
 127
 128 assertInterpolation({
 129   property: 'translate',
 130   from: 'inherit',
 131   to: '200px 100px 200px',
 132 }, [
 133   {at: -1, is: '0px 300px 400px'},
 134   {at: 0, is: '100px 200px 300px'},
 135   {at: 0.25, is: '125px 175px 275px'},
 136   {at: 0.75, is: '175px 125px 225px'},
 137   {at: 1, is: '200px 100px 200px'},
 138   {at: 2, is: '300px 0px 100px'},
 139 ]);
 140
 141 assertInterpolation({
 142   property: 'translate',
 143   from: '200px 100px 200px',
 144   to: 'inherit',
 145 }, [
 146   {at: -1, is: '300px 0px 100px'},
 147   {at: 0, is: '200px 100px 200px'},
 148   {at: 0.25, is: '175px 125px 225px'},
 149   {at: 0.75, is: '125px 175px 275px'},
 150   {at: 1, is: '100px 200px 300px'},
 151   {at: 2, is: '0px 300px 400px'},
 152 ]);
 153
 154 assertInterpolation({
 155   property: 'translate',
 156   from: 'initial',
 157   to: '200px 100px 200px',
 158 }, [
 159   {at: -1, is: '-200px -100px -200px'},
 160   {at: 0, is: '0px'},
 161   {at: 0.25, is: '50px 25px 50px'},
 162   {at: 0.75, is: '150px 75px 150px'},
 163   {at: 1, is: '200px 100px 200px'},
 164   {at: 2, is: '400px 200px 400px'},
 165 ]);
 166
 167 assertInterpolation({
 168   property: 'translate',
 169   from: '200px 100px 200px',
 170   to: 'initial',
 171 }, [
 172   {at: -1, is: '400px 200px 400px'},
 173   {at: 0, is: '200px 100px 200px'},
 174   {at: 0.25, is: '150px 75px 150px'},
 175   {at: 0.75, is: '50px 25px 50px'},
 176   {at: 1, is: '0px'},
 177   {at: 2, is: '-200px -100px -200px'},
 178 ]);
 179
 180 assertInterpolation({
 181   property: 'translate',
 182   from: 'initial',
 183   to: 'inherit',
 184 }, [
 185   {at: -1, is: '-100px -200px -300px'},
 186   {at: 0, is: '0px'},
 187   {at: 0.25, is: '25px 50px 75px'},
 188   {at: 0.75, is: '75px 150px 225px'},
 189   {at: 1, is: '100px 200px 300px'},
 190   {at: 2, is: '200px 400px 600px'},
 191 ]);
 192
 193 assertInterpolation({
 194   property: 'translate',
 195   from: 'inherit',
 196   to: 'initial',
 197 }, [
 198   {at: -1, is: '200px 400px 600px'},
 199   {at: 0, is: '100px 200px 300px'},
 200   {at: 0.25, is: '75px 150px 225px'},
 201   {at: 0.75, is: '25px 50px 75px'},
 202   {at: 1, is: '0px'},
 203   {at: 2, is: '-100px -200px -300px'},
 204 ]);
 205 </script>