third_party/WebKit/LayoutTests/animations/interpolation/shape-margin-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   shape-margin: 30px;
   6 }
   7 .target {
   8   shape-margin: 10px;
   9 }
  10 </style>
  11 <body>
  12 <script src="resources/interpolation-test.js"></script>
  13 <script>
  14 assertInterpolation({
  15   property: 'shape-margin',
  16   from: '',
  17   to: '20px',
  18 }, [
  19   {at: -0.3, is: '7px'},
  20   {at: 0, is: '10px'},
  21   {at: 0.3, is: '13px'},
  22   {at: 0.6, is: '16px'},
  23   {at: 1, is: '20px'},
  24   {at: 1.5, is: '25px'},
  25 ]);
  26
  27 assertInterpolation({
  28   property: 'shape-margin',
  29   from: 'initial',
  30   to: '20px',
  31 }, [
  32   {at: -0.3, is: '0px'},
  33   {at: 0, is: '0px'},
  34   {at: 0.3, is: '6px'},
  35   {at: 0.6, is: '12px'},
  36   {at: 1, is: '20px'},
  37   {at: 1.5, is: '30px'},
  38 ]);
  39
  40 assertInterpolation({
  41   property: 'shape-margin',
  42   from: 'inherit',
  43   to: '20px',
  44 }, [
  45   {at: -0.3, is: '33px'},
  46   {at: 0, is: '30px'},
  47   {at: 0.3, is: '27px'},
  48   {at: 0.6, is: '24px'},
  49   {at: 1, is: '20px'},
  50   {at: 1.5, is: '15px'},
  51 ]);
  52
  53 assertInterpolation({
  54   property: 'shape-margin',
  55   from: 'unset',
  56   to: '20px',
  57 }, [
  58   {at: -0.3, is: '0px'},
  59   {at: 0, is: '0px'},
  60   {at: 0.3, is: '6px'},
  61   {at: 0.6, is: '12px'},
  62   {at: 1, is: '20px'},
  63   {at: 1.5, is: '30px'},
  64 ]);
  65
  66 assertInterpolation({
  67   property: 'shape-margin',
  68   from: '0px',
  69   to: '100px'
  70 }, [
  71   {at: -0.3, is: '0px'}, // CSS shape-margin can't be negative.
  72   {at: 0, is: '0px'},
  73   {at: 0.3, is: '30px'},
  74   {at: 0.6, is: '60px'},
  75   {at: 1, is: '100px'},
  76   {at: 1.5, is: '150px'},
  77 ]);
  78 </script>
  79 </body>