third_party/WebKit/LayoutTests/animations/interpolation/webkit-mask-box-image-slice-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   -webkit-mask-box-image-slice: 30%;
   6 }
   7 .target {
   8   width: 50px;
   9   height: 50px;
  10   background-color: black;
  11   display: inline-block;
  12   border: 25px;
  13   -webkit-mask-box-image-source: linear-gradient(45deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  14   -webkit-mask-box-image-slice: 10%;
  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: '-webkit-mask-box-image-slice',
  26   from: '',
  27   to: '20%',
  28 }, [
  29   {at: -0.3, is: '7%'},
  30   {at: 0, is: '10%'},
  31   {at: 0.4, is: '14%'},
  32   {at: 0.6, is: '16%'},
  33   {at: 1, is: '20%'},
  34   {at: 1.5, is: '25%'},
  35   {at: 10, is: '110%'},
  36 ]);
  37
  38 assertNoInterpolation({
  39   property: '-webkit-mask-box-image-slice',
  40   from: 'initial',
  41   to: '20%',
  42 });
  43
  44 assertInterpolation({
  45   property: '-webkit-mask-box-image-slice',
  46   from: 'inherit',
  47   to: '20%',
  48 }, [
  49   {at: -0.3, is: '33%'},
  50   {at: 0, is: '30%'},
  51   {at: 0.4, is: '26%'},
  52   {at: 0.6, is: '24%'},
  53   {at: 1, is: '20%'},
  54   {at: 1.5, is: '15%'},
  55   {at: 10, is: '0%'},
  56 ]);
  57
  58 assertNoInterpolation({
  59   property: '-webkit-mask-box-image-slice',
  60   from: 'unset',
  61   to: '20%',
  62 });
  63
  64
  65 assertInterpolation({
  66   property: '-webkit-mask-box-image-slice',
  67   from: '0%',
  68   to: '50%',
  69 }, [
  70   {at: -0.3, is: '0%'}, // CSS webkit-mask-box-image-slice can't be negative.
  71   {at: 0, is: '0%'},
  72   {at: 0.4, is: '20%'},
  73   {at: 0.6, is: '30%'},
  74   {at: 1, is: '50%'},
  75   {at: 1.5, is: '75%'},
  76   {at: 10, is: '500%'},
  77 ]);
  78
  79 assertNoInterpolation({
  80   property: '-webkit-mask-box-image-slice',
  81   from: '0%',
  82   to: '50% fill',
  83 });
  84 </script>
  85 </body>