third_party/WebKit/LayoutTests/animations/composition/left-composition.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <body>
   4 <script src="../interpolation/resources/interpolation-test.js"></script>
   5 <script>
   6 assertComposition({
   7   property: 'left',
   8   underlying: '50px',
   9   addFrom: '100px',
  10   addTo: '200px',
  11 }, [
  12   {at: -0.3, is: '120px'},
  13   {at: 0, is: '150px'},
  14   {at: 0.5, is: '200px'},
  15   {at: 1, is: '250px'},
  16   {at: 1.5, is: '300px'},
  17 ]);
  18
  19 assertComposition({
  20   property: 'left',
  21   underlying: '100px',
  22   addFrom: '10px',
  23   addTo: '2px',
  24 }, [
  25   {at: -0.5, is: '114px'},
  26   {at: 0, is: '110px'},
  27   {at: 0.5, is: '106px'},
  28   {at: 1, is: '102px'},
  29   {at: 1.5, is: '98px'},
  30 ]);
  31
  32 assertComposition({
  33   property: 'left',
  34   underlying: '10%',
  35   addFrom: '100px',
  36   addTo: '20%',
  37 }, [
  38   {at: -0.3, is: 'calc(130px + 4%)'},
  39   {at: 0, is: 'calc(100px + 10%)'},
  40   {at: 0.5, is: 'calc(50px + 20%)'},
  41   {at: 1, is: '30%'},
  42   {at: 1.5, is: 'calc(-50px + 40%)'},
  43 ]);
  44
  45 assertComposition({
  46   property: 'left',
  47   underlying: '10%',
  48   addFrom: '100px',
  49   addTo: '-10%',
  50 }, [
  51   {at: -0.3, is: 'calc(130px + 13%)'},
  52   {at: 0, is: 'calc(100px + 10%)'},
  53   {at: 0.5, is: 'calc(50px + 5%)'},
  54   {at: 1, is: '0%'},
  55   {at: 1.5, is: 'calc(-50px - 5%)'},
  56 ]);
  57
  58 assertComposition({
  59   property: 'left',
  60   underlying: '50px',
  61   addFrom: '100px',
  62   replaceTo: '200px',
  63 }, [
  64   {at: -0.3, is: '135px'},
  65   {at: 0, is: '150px'},
  66   {at: 0.5, is: '175px'},
  67   {at: 1, is: '200px'},
  68   {at: 1.5, is: '225px'},
  69 ]);
  70
  71 assertComposition({
  72   property: 'left',
  73   underlying: '100px',
  74   addFrom: '100px',
  75   addTo: 'auto',
  76 }, [
  77   {at: -0.3, is: '200px'},
  78   {at: 0, is: '200px'},
  79   {at: 0.5, is: 'auto'},
  80   {at: 1, is: 'auto'},
  81   {at: 1.5, is: 'auto'},
  82 ]);
  83 </script>
  84 </body>