third_party/WebKit/LayoutTests/animations/interpolation/outline-offset-interpolation.html

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