third_party/WebKit/LayoutTests/animations/interpolation/border-image-width-interpolation.html

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