third_party/WebKit/LayoutTests/animations/interpolation/svg-baseline-shift-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .parent {
   5   baseline-shift: 30px;
   6 }
   7 .target {
   8   stroke: black;
   9   /*
  10   CSS transitions and animations for baseline-shift are broken unless a
  11   numerical underlying value is specified. See crbug.com/304007.
  12   */
  13   baseline-shift: 0px;
  14 }
  15 .expected {
  16   stroke: green;
  17 }
  18 svg:nth-child(2n) {
  19   margin-right: 10px;
  20 }
  21 svg {
  22     baseline-shift: 30px;
  23 }
  24 </style>
  25 <body>
  26 <template id="target-template">
  27   <svg width="30" height="50">
  28     <!--
  29     We have to specify the target class on the text element because numerical
  30     values of baseline-shift are not inherited properly. See crbug.com/304006.
  31     -->
  32     <text x="0" y="25" font-size="10" class="target">
  33       <tspan>T</tspan>T
  34     </text>
  35   </svg>
  36 </template>
  37 <script src="resources/interpolation-test.js"></script>
  38 <script>
  39 assertInterpolation({
  40   property: 'baseline-shift',
  41   from: '',
  42   to: '20px',
  43 }, [
  44   {at: -0.25, is: '-5px'},
  45   {at: 0, is: '0px'},
  46   {at: 0.25, is: '5px'},
  47   {at: 0.5, is: '10px'},
  48   {at: 0.75, is: '15px'},
  49   {at: 1, is: '20px'},
  50   {at: 1.25, is: '25px'},
  51 ]);
  52
  53 assertInterpolation({
  54   property: 'baseline-shift',
  55   from: 'initial',
  56   to: '20px',
  57 }, [
  58   {at: -0.25, is: '-5px'},
  59   {at: 0, is: '0px'},
  60   {at: 0.25, is: '5px'},
  61   {at: 0.5, is: '10px'},
  62   {at: 0.75, is: '15px'},
  63   {at: 1, is: '20px'},
  64   {at: 1.25, is: '25px'},
  65 ]);
  66
  67 assertInterpolation({
  68   property: 'baseline-shift',
  69   from: 'inherit',
  70   to: '20px',
  71 }, [
  72   {at: -0.25, is: '32.5px'},
  73   {at: 0, is: '30px'},
  74   {at: 0.25, is: '27.5px'},
  75   {at: 0.5, is: '25px'},
  76   {at: 0.75, is: '22.5px'},
  77   {at: 1, is: '20px'},
  78   {at: 1.25, is: '17.5px'},
  79 ]);
  80
  81 assertInterpolation({
  82   property: 'baseline-shift',
  83   from: 'unset',
  84   to: '20px',
  85 }, [
  86   {at: -0.25, is: '-5px'},
  87   {at: 0, is: '0px'},
  88   {at: 0.25, is: '5px'},
  89   {at: 0.5, is: '10px'},
  90   {at: 0.75, is: '15px'},
  91   {at: 1, is: '20px'},
  92   {at: 1.25, is: '25px'},
  93 ]);
  94
  95 assertInterpolation({
  96   property: 'baseline-shift',
  97   from: '-10px',
  98   to: '10px'
  99 }, [
 100   {at: -0.25, is: '-15px'},
 101   {at: 0, is: '-10px'},
 102   {at: 0.25, is: '-5px'},
 103   {at: 0.5, is: '0px'},
 104   {at: 0.75, is: '5px'},
 105   {at: 1, is: '10px'},
 106   {at: 1.25, is: '15px'},
 107 ]);
 108
 109 assertInterpolation({
 110   property: 'baseline-shift',
 111   from: 'baseline',
 112   to: '100px',
 113 }, [
 114   {at: -0.25, is: '-25px'},
 115   {at: 0, is: '0px'},
 116   {at: 0.25, is: '25px'},
 117   {at: 0.5, is: '50px'},
 118   {at: 0.75, is: '75px'},
 119   {at: 1, is: '100px'},
 120   {at: 1.25, is: '125px'},
 121 ]);
 122 assertInterpolation({
 123   property: 'baseline-shift',
 124   from: '100px',
 125   to: 'baseline',
 126 }, [
 127   {at: -0.25, is: '125px'},
 128   {at: 0, is: '100px'},
 129   {at: 0.25, is: '75px'},
 130   {at: 0.5, is: '50px'},
 131   {at: 0.75, is: '25px'},
 132   {at: 1, is: '0px'},
 133   {at: 1.25, is: '-25px'},
 134 ]);
 135 assertNoInterpolation({
 136   property: 'baseline-shift',
 137   from: 'sub',
 138   to: '100px',
 139 });
 140 assertNoInterpolation({
 141   property: 'baseline-shift',
 142   from: '100px',
 143   to: 'super',
 144 });
 145 assertInterpolation({
 146   property: 'baseline-shift',
 147   from: '50mm',
 148   to: 'inherit',
 149 }, [
 150   {at: -0.25, is: '228.720474243164px'},
 151   {at: 0, is: '50mm'},
 152   {at: 0.25, is: '149.232284545898px'},
 153   {at: 0.75, is: '69.7440948486328px'},
 154   {at: 1, is: '30px'},
 155   {at: 1.25, is: '-9.74409484863281px'},
 156 ]);
 157 assertInterpolation({
 158   property: 'baseline-shift',
 159   from: '10px',
 160   to: '21em',
 161 }, [
 162   {at: -0.25, is: '-40px'},
 163   {at: 0, is: '10px'},
 164   {at: 0.25, is: '60px'},
 165   {at: 0.75, is: '160px'},
 166   {at: 1, is: '210px'},
 167   {at: 1.25, is: '260px'},
 168 ]);
 169 assertInterpolation({
 170   property: 'baseline-shift',
 171   from: 'inherit',
 172   to: '33em',
 173 }, [
 174   {at: -0.25, is: '-45px'},
 175   {at: 0, is: '30px'},
 176   {at: 0.25, is: '105px'},
 177   {at: 0.75, is: '255px'},
 178   {at: 1, is: '330px'},
 179   {at: 1.25, is: '405px'},
 180 ]);
 181
 182 </script>
 183 </body>