third_party/WebKit/LayoutTests/animations/interpolation/vertical-align-interpolation.html

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