third_party/WebKit/LayoutTests/animations/composition/motion-offset-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: 'motion-offset',
   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: 'motion-offset',
  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: 'motion-offset',
  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: 'motion-offset',
  47   underlying: '50px',
  48   addFrom: '100px',
  49   replaceTo: '200px',
  50 }, [
  51   {at: -0.3, is: '135px'},
  52   {at: 0, is: '150px'},
  53   {at: 0.5, is: '175px'},
  54   {at: 1, is: '200px'},
  55   {at: 1.5, is: '225px'},
  56 ]);
  57 </script>
  58 </body>