third_party/WebKit/LayoutTests/animations/interpolation/webkit-clip-path-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   -webkit-clip-path: inset(10px);
   6   padding: 10px;
   7 }
   8 .target {
   9   display: inline-block;
  10   width: 100px;
  11   height: 100px;
  12   background-color: black;
  13   -webkit-clip-path: inset(10px);
  14 }
  15 .expected {
  16   background-color: green;
  17 }
  18 </style>
  19 <body>
  20 <script src="resources/interpolation-test.js"></script>
  21 <script>
  22 assertInterpolation({
  23   property: '-webkit-clip-path',
  24   from: '',
  25   to: 'inset(20px)',
  26 }, [
  27   {at: -0.3, is: 'inset(7px)'},
  28   {at: 0, is: 'inset(10px)'},
  29   {at: 0.3, is: 'inset(13px)'},
  30   {at: 0.6, is: 'inset(16px)'},
  31   {at: 1, is: 'inset(20px)'},
  32   {at: 1.5, is: 'inset(25px)'},
  33 ]);
  34
  35 assertNoInterpolation({
  36   property: '-webkit-clip-path',
  37   from: 'initial',
  38   to: 'inset(20px)',
  39 });
  40
  41 assertInterpolation({
  42   property: '-webkit-clip-path',
  43   from: 'inherit',
  44   to: 'inset(20px)',
  45 }, [
  46   {at: -0.3, is: 'inset(7px)'},
  47   {at: 0, is: 'inset(10px)'},
  48   {at: 0.3, is: 'inset(13px)'},
  49   {at: 0.6, is: 'inset(16px)'},
  50   {at: 1, is: 'inset(20px)'},
  51   {at: 1.5, is: 'inset(25px)'},
  52 ]);
  53
  54 assertNoInterpolation({
  55   property: '-webkit-clip-path',
  56   from: 'unset',
  57   to: 'inset(20px)',
  58 });
  59
  60 assertInterpolation({
  61   property: '-webkit-clip-path',
  62   from: 'circle(10px at 25px 75px)',
  63   to: 'circle(50px at 50px 50px)'
  64 }, [
  65   {at: -0.3, is: 'circle(0px at 17.5px 82.5px)'}, // radius can't be negative
  66   {at: 0, is: 'circle(10px at 25px 75px)'},
  67   {at: 0.3, is: 'circle(22px at 32.5px 67.5px)'},
  68   {at: 0.6, is: 'circle(34px at 40px 60px)'},
  69   {at: 1, is: 'circle(50px at 50px 50px)'},
  70   {at: 1.5, is: 'circle(70px at 62.5px 37.5px)'}
  71 ]);
  72
  73 assertNoInterpolation({
  74   property: '-webkit-clip-path',
  75   from: 'none',
  76   to: 'circle(3px at 1px 2px)'
  77 });
  78
  79 assertInterpolation({
  80   property: '-webkit-clip-path',
  81   from: 'inset(0%)',
  82   to: 'inset(20%)',
  83 }, [
  84   {at: -0.3, is: 'inset(-6%)'},
  85   {at: 0, is: 'inset(0%)'},
  86   {at: 0.3, is: 'inset(6%)'},
  87   {at: 0.6, is: 'inset(12%)'},
  88   {at: 1, is: 'inset(20%)'},
  89   {at: 1.5, is: 'inset(30%)'},
  90 ]);
  91
  92 </script>
  93 </body>