third_party/WebKit/LayoutTests/animations/interpolation/top-interpolation.html

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