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

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