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

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   border-image-slice: 50%;
   6 }
   7 .target {
   8   width: 50px;
   9   height: 50px;
  10   background-color: black;
  11   display: inline-block;
  12   border: 25px;
  13   border-image-source: linear-gradient(45deg, red, blue, green);
  14   border-image-slice: 20%;
  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-slice',
  26   from: '',
  27   to: '10%',
  28 }, [
  29   {at: -0.3, is: '23%'},
  30   {at: 0, is: '20%'},
  31   {at: 0.3, is: '17%'},
  32   {at: 0.5, is: '15%'},
  33   {at: 0.6, is: '14%'},
  34   {at: 1, is: '10%'},
  35   {at: 1.5, is: '5%'},
  36 ]);
  37
  38 assertInterpolation({
  39   property: 'border-image-slice',
  40   from: 'initial',
  41   to: '10%',
  42 }, [
  43   {at: -0.3, is: '127%'},
  44   {at: 0, is: '100%'},
  45   {at: 0.3, is: '73%'},
  46   {at: 0.5, is: '55%'},
  47   {at: 0.6, is: '46%'},
  48   {at: 1, is: '10%'},
  49   {at: 1.5, is: '0%'},
  50 ]);
  51
  52 assertInterpolation({
  53   property: 'border-image-slice',
  54   from: 'inherit',
  55   to: '10%',
  56 }, [
  57   {at: -0.3, is: '62%'},
  58   {at: 0, is: '50%'},
  59   {at: 0.3, is: '38%'},
  60   {at: 0.5, is: '30%'},
  61   {at: 0.6, is: '26%'},
  62   {at: 1, is: '10%'},
  63   {at: 1.5, is: '0%'},
  64 ]);
  65
  66 assertInterpolation({
  67   property: 'border-image-slice',
  68   from: 'unset',
  69   to: '10%',
  70 }, [
  71   {at: -0.3, is: '127%'},
  72   {at: 0, is: '100%'},
  73   {at: 0.3, is: '73%'},
  74   {at: 0.5, is: '55%'},
  75   {at: 0.6, is: '46%'},
  76   {at: 1, is: '10%'},
  77   {at: 1.5, is: '0%'},
  78 ]);
  79
  80 assertInterpolation({
  81   property: 'border-image-slice',
  82   from: '0%',
  83   to: '50%',
  84 }, [
  85   {at: -0.3, is: '0%'}, // CSS border-image-slice can't be negative.
  86   {at: 0, is: '0%'},
  87   {at: 0.3, is: '15%'},
  88   {at: 0.5, is: '25%'},
  89   {at: 0.6, is: '30%'},
  90   {at: 1, is: '50%'},
  91   {at: 1.5, is: '75%'},
  92 ]);
  93
  94 assertNoInterpolation({
  95   property: 'border-image-slice',
  96   from: '0% fill',
  97   to: '50%',
  98 });
  99
 100 assertNoInterpolation({
 101   property: 'border-image-slice',
 102   from: '50%',
 103   to: '100',
 104 });
 105
 106 assertInterpolation({
 107   property: 'border-image-slice',
 108   from: '0% 10% 20% 30%',
 109   to: '40% 50% 60% 70%',
 110 }, [
 111   {at: -0.5, is: '0% 0% 0% 10%'},
 112   {at: 0, is: '0% 10% 20% 30%'},
 113   {at: 0.3, is: '12% 22% 32% 42%'},
 114   {at: 0.5, is: '20% 30% 40% 50%'},
 115   {at: 0.6, is: '24% 34% 44% 54%'},
 116   {at: 1, is: '40% 50% 60% 70%'},
 117   {at: 1.5, is: '60% 70% 80% 90%'},
 118 ]);
 119
 120 assertInterpolation({
 121   property: 'border-image-slice',
 122   from: '0 10 20 30 fill',
 123   to: '40 50 60 70 fill',
 124 }, [
 125   {at: -0.5, is: '0 0 0 10 fill'}, // CSS border-image-slice can't be negative.
 126   {at: 0, is: '0 10 20 30 fill'},
 127   {at: 0.3, is: '12 22 32 42 fill'},
 128   {at: 0.5, is: '20 30 40 50 fill'},
 129   {at: 0.6, is: '24 34 44 54 fill'},
 130   {at: 1, is: '40 50 60 70 fill'},
 131   {at: 1.5, is: '60 70 80 90 fill'},
 132 ]);
 133
 134 </script>
 135 </body>