third_party/WebKit/LayoutTests/animations/interpolation/svg-cx-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   cx: 100px;
   6 }
   7 .target {
   8   font-size: 16px;
   9   cx: 50px;
  10 }
  11 .expected {
  12   fill: green;
  13 }
  14 </style>
  15 <body>
  16 <template id="target-template">
  17   <svg height="20" width="400">
  18     <circle cx="50%" cy="50%" r="10" class="target">
  19   </svg>
  20 </template>
  21 <script src="resources/interpolation-test.js"></script>
  22 <script>
  23 assertInterpolation({
  24   property: 'cx',
  25   from: '',
  26   to: '20px',
  27 }, [
  28   {at: -0.25, is: '57.5px'},
  29   {at: 0, is: '50px'},
  30   {at: 0.25, is: '42.5px'},
  31   {at: 0.5, is: '35px'},
  32   {at: 0.75, is: '27.5px'},
  33   {at: 1, is: '20px'},
  34   {at: 1.25, is: '12.5px'},
  35 ]);
  36
  37 assertInterpolation({
  38   property: 'cx',
  39   from: 'initial',
  40   to: '20px',
  41 }, [
  42   {at: -0.25, is: '-5px'},
  43   {at: 0, is: '0px'},
  44   {at: 0.25, is: '5px'},
  45   {at: 0.5, is: '10px'},
  46   {at: 0.75, is: '15px'},
  47   {at: 1, is: '20px'},
  48   {at: 1.25, is: '25px'},
  49 ]);
  50
  51 assertInterpolation({
  52   property: 'cx',
  53   from: 'inherit',
  54   to: '20px',
  55 }, [
  56   {at: -0.25, is: '120px'},
  57   {at: 0, is: '100px'},
  58   {at: 0.25, is: '80px'},
  59   {at: 0.5, is: '60px'},
  60   {at: 0.75, is: '40px'},
  61   {at: 1, is: '20px'},
  62   {at: 1.25, is: '0px'},
  63 ]);
  64
  65 assertInterpolation({
  66   property: 'cx',
  67   from: 'unset',
  68   to: '20px',
  69 }, [
  70   {at: -0.25, is: '-5px'},
  71   {at: 0, is: '0px'},
  72   {at: 0.25, is: '5px'},
  73   {at: 0.5, is: '10px'},
  74   {at: 0.75, is: '15px'},
  75   {at: 1, is: '20px'},
  76   {at: 1.25, is: '25px'},
  77 ]);
  78
  79 assertInterpolation({
  80   property: 'cx',
  81   from: '-10px',
  82   to: '10px',
  83 }, [
  84   {at: -0.25, is: '-15px'},
  85   {at: 0, is: '-10px'},
  86   {at: 0.25, is: '-5px'},
  87   {at: 0.5, is: '0px'},
  88   {at: 0.75, is: '5px'},
  89   {at: 1, is: '10px'},
  90   {at: 1.25, is: '15px'},
  91 ]);
  92
  93 assertInterpolation({
  94   property: 'cx',
  95   from: '-20px',
  96   to: '30em',
  97 }, [
  98   {at: -0.25, is: '-145px'},
  99   {at: 0, is: '-20px'},
 100   {at: 0.25, is: '105px'},
 101   {at: 0.5, is: '230px'},
 102   {at: 0.75, is: '355px'},
 103   {at: 1, is: '30em'},
 104   {at: 1.25, is: '605px'},
 105 ]);
 106
 107 assertInterpolation({
 108   property: 'cx',
 109   from: '-10',
 110   to: '10',
 111 }, [
 112   {at: -0.25, is: '-15'},
 113   {at: 0, is: '-10'},
 114   {at: 0.25, is: '-5'},
 115   {at: 0.5, is: '0'},
 116   {at: 0.75, is: '5'},
 117   {at: 1, is: '10'},
 118   {at: 1.25, is: '15'},
 119 ]);
 120 </script>
 121 </body>