third_party/WebKit/LayoutTests/animations/interpolation/motion-offset-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   motion-offset: 30px;
   6 }
   7 .target {
   8   width: 10px;
   9   height: 10px;
  10   background-color: black;
  11   motion-path: path("M0 0H 400");
  12   motion-offset: 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: 'motion-offset',
  23   from: '',
  24   to: '20px',
  25 }, [
  26   {at: -0.3, is: '7px'},
  27   {at: 0, is: '10px'},
  28   {at: 0.3, is: '13px'},
  29   {at: 0.6, is: '16px'},
  30   {at: 1, is: '20px'},
  31   {at: 1.5, is: '25px'},
  32 ]);
  33
  34 assertInterpolation({
  35   property: 'motion-offset',
  36   from: 'initial',
  37   to: '20px',
  38 }, [
  39   {at: -0.3, is: '-6px'},
  40   {at: 0, is: '0px'},
  41   {at: 0.3, is: '6px'},
  42   {at: 0.6, is: '12px'},
  43   {at: 1, is: '20px'},
  44   {at: 1.5, is: '30px'},
  45 ]);
  46
  47 assertInterpolation({
  48   property: 'motion-offset',
  49   from: 'inherit',
  50   to: '20px',
  51 }, [
  52   {at: -0.3, is: '33px'},
  53   {at: 0, is: '30px'},
  54   {at: 0.3, is: '27px'},
  55   {at: 0.6, is: '24px'},
  56   {at: 1, is: '20px'},
  57   {at: 1.5, is: '15px'},
  58 ]);
  59
  60 assertInterpolation({
  61   property: 'motion-offset',
  62   from: 'unset',
  63   to: '20px',
  64 }, [
  65   {at: -0.3, is: '-6px'},
  66   {at: 0, is: '0px'},
  67   {at: 0.3, is: '6px'},
  68   {at: 0.6, is: '12px'},
  69   {at: 1, is: '20px'},
  70   {at: 1.5, is: '30px'},
  71 ]);
  72
  73 assertInterpolation({
  74   property: 'motion-offset',
  75   from: '10px',
  76   to: '50px',
  77 }, [
  78   {at: -0.3, is: '-2px'},
  79   {at: 0, is: '10px'},
  80   {at: 0.3, is: '22px'},
  81   {at: 0.6, is: '34px'},
  82   {at: 1, is: '50px'},
  83   {at: 1.5, is: '70px'},
  84 ]);
  85
  86 assertInterpolation({
  87   property: 'motion-offset',
  88   from: '10px',
  89   to: '100%',
  90 }, [
  91   // These expectations are expected to fail on the current animation engine
  92   // with different (but equivalent) calc expressions.
  93   {at: -0.3, is: 'calc(13px + -30%)'},
  94   {at: 0, is: '10px'},
  95   {at: 0.3, is: 'calc(7px + 30%)'},
  96   {at: 0.6, is: 'calc(4px + 60%)'},
  97   {at: 1, is: '100%'},
  98   {at: 1.5, is: 'calc(-5px + 150%)'},
  99 ]);
 100 </script>
 101 </body>