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

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   scale: 0.5 1 2
   6 }
   7 .target {
   8   width: 10px;
   9   height: 10px;
  10   background-color: black;
  11   scale: 1.1;
  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: 'scale',
  26   from: '',
  27   to: '1.5',
  28 }, [
  29   {at: -1, is: '0.7 0.7'},
  30   {at: 0, is: '1.1 1.1'},
  31   {at: 0.25, is: '1.2 1.2'},
  32   {at: 0.75, is: '1.4 1.4'},
  33   {at: 1, is: '1.5 1.5'},
  34   {at: 2, is: '1.9 1.9'},
  35 ]);
  36
  37 assertInterpolation({
  38   property: 'scale',
  39   from: 'unset',
  40   to: '1.5',
  41 }, [
  42   {at: -1, is: '0.5 0.5'},
  43   {at: 0, is: '1'},
  44   {at: 0.25, is: '1.125 1.125'},
  45   {at: 0.75, is: '1.375 1.375'},
  46   {at: 1, is: '1.5 1.5'},
  47   {at: 2, is: '2 2'},
  48 ]);
  49
  50 assertInterpolation({
  51   property: 'scale',
  52   from: '-10',
  53   to: '10',
  54 }, [
  55   {at: -1, is: '-30'},
  56   {at: 0, is: '-10'},
  57   {at: 0.25, is: '-5'},
  58   {at: 0.75, is: '5'},
  59   {at: 1, is: '10'},
  60   {at: 2, is: '30'},
  61 ]);
  62
  63 assertInterpolation({
  64   property: 'scale',
  65   from: '-10 5',
  66   to: '10 -5',
  67 }, [
  68   {at: -1, is: '-30 15'},
  69   {at: 0, is: '-10 5'},
  70   {at: 0.25, is: '-5 2.5'},
  71   {at: 0.75, is: '5 -2.5'},
  72   {at: 1, is: '10 -5'},
  73   {at: 2, is: '30 -15'},
  74 ]);
  75
  76 assertInterpolation({
  77   property: 'scale',
  78   from: '-10 5 1',
  79   to: '10 -5 0',
  80 }, [
  81   {at: -1, is: '-30 15 2'},
  82   {at: 0, is: '-10 5 1'},
  83   {at: 0.25, is: '-5 2.5 0.75'},
  84   {at: 0.75, is: '5 -2.5 0.25'},
  85   {at: 1, is: '10 -5 0'},
  86   {at: 2, is: '30 -15 -1'},
  87 ]);
  88
  89 assertInterpolation({
  90   property: 'scale',
  91   from: '1',
  92   to: '10 -5 0',
  93 }, [
  94   {at: -1, is: '-8 7 2'},
  95   {at: 0, is: '1'},
  96   {at: 0.25, is: '3.25 -0.5 0.75'},
  97   {at: 0.75, is: '7.75 -3.5 0.25'},
  98   {at: 1, is: '10 -5 0'},
  99   {at: 2, is: '19 -11 -1'},
 100 ]);
 101
 102 assertInterpolation({
 103   property: 'scale',
 104   from: '-10 5 1',
 105   to: '1',
 106 }, [
 107   {at: -1, is: '-21 9'},
 108   {at: 0, is: '-10 5'},
 109   {at: 0.25, is: '-7.25 4'},
 110   {at: 0.75, is: '-1.75 2'},
 111   {at: 1, is: '1'},
 112   {at: 2, is: '12 -3'},
 113 ]);
 114
 115 assertInterpolation({
 116   property: 'scale',
 117   from: 'inherit',
 118   to: '2 0.5 1',
 119 }, [
 120   {at: -1, is: '-1 1.5 3'},
 121   {at: 0, is: '0.5 1 2'},
 122   {at: 0.25, is: '0.875 0.875 1.75'},
 123   {at: 0.75, is: '1.625 0.625 1.25'},
 124   {at: 1, is: '2 0.5 1'},
 125   {at: 2, is: '3.5 0 0'},
 126 ]);
 127
 128 assertInterpolation({
 129   property: 'scale',
 130   from: '2 0.5 1',
 131   to: 'inherit',
 132 }, [
 133   {at: -1, is: '3.5 0 0'},
 134   {at: 0, is: '2 0.5 1'},
 135   {at: 0.25, is: '1.625 0.625 1.25'},
 136   {at: 0.75, is: '0.875 0.875 1.75'},
 137   {at: 1, is: '0.5 1 2'},
 138   {at: 2, is: '-1 1.5 3'},
 139 ]);
 140
 141 assertInterpolation({
 142   property: 'scale',
 143   from: 'initial',
 144   to: '2 0.5 1',
 145 }, [
 146   {at: -1, is: '0 1.5'},
 147   {at: 0, is: '1'},
 148   {at: 0.25, is: '1.25 0.875'},
 149   {at: 0.75, is: '1.75 0.625'},
 150   {at: 1, is: '2 0.5'},
 151   {at: 2, is: '3 0'},
 152 ]);
 153
 154 assertInterpolation({
 155   property: 'scale',
 156   from: '2 0.5 1',
 157   to: 'initial',
 158 }, [
 159   {at: -1, is: '3 0'},
 160   {at: 0, is: '2 0.5 1'},
 161   {at: 0.25, is: '1.75 0.6251'},
 162   {at: 0.75, is: '1.25 0.875'},
 163   {at: 1, is: '1 1 1'},
 164   {at: 2, is: '0 1.5'},
 165 ]);
 166
 167 assertInterpolation({
 168   property: 'scale',
 169   from: 'initial',
 170   to: 'inherit',
 171 }, [
 172   {at: -1, is: '1.5 1 0'},
 173   {at: 0, is: '1'},
 174   {at: 0.25, is: '0.875 1 1.25'},
 175   {at: 0.75, is: '0.625 1 1.75'},
 176   {at: 1, is: '0.5 1 2'},
 177   {at: 2, is: '0 1 3'},
 178 ]);
 179
 180 assertInterpolation({
 181   property: 'scale',
 182   from: 'inherit',
 183   to: 'initial',
 184 }, [
 185   {at: -1, is: '0 1 3'},
 186   {at: 0, is: '0.5 1 2'},
 187   {at: 0.25, is: '0.625 1 1.75'},
 188   {at: 0.75, is: '0.875 1 1.25'},
 189   {at: 1, is: '1 1 1'},
 190   {at: 2, is: '1.5 1 0'},
 191 ]);
 192 </script>