third_party/WebKit/LayoutTests/animations/interpolation/svg-stroke-dasharray-interpolation.html

   1 <!DOCTYPE html>
   2 <meta charset="UTF-8">
   3 <style>
   4 .container {
   5   display: inline-block;
   6 }
   7 .parent {
   8   stroke-dasharray: 30 10;
   9 }
  10 .target {
  11   font-size: 16px;
  12   stroke: black;
  13   stroke-width: 10px;
  14   stroke-dasharray: 10 30;
  15 }
  16 .expected {
  17   stroke: green;
  18 }
  19 </style>
  20 <body>
  21 <template id="target-template">
  22   <svg height="400" width="5">
  23     <path d="M0,0 l0,400" class="target">
  24   </svg>
  25 </template>
  26 <script src="resources/interpolation-test.js"></script>
  27 <script>
  28 assertInterpolation({
  29   property: 'stroke-dasharray',
  30   from: '',
  31   to: '20 20',
  32 }, [
  33   {at: -0.6, is: '4px, 36px'},
  34   {at: -0.4, is: '6px, 34px'},
  35   {at: -0.2, is: '8px, 32px'},
  36   {at: 0, is: '10px, 30px'},
  37   {at: 0.2, is: '12px, 28px'},
  38   {at: 0.4, is: '14px, 26px'},
  39   {at: 0.6, is: '16px, 24px'},
  40   {at: 0.8, is: '18px, 22px'},
  41   {at: 1, is: '20px, 20px'},
  42   {at: 1.2, is: '22px, 18px'},
  43 ]);
  44
  45 assertInterpolation({
  46   property: 'stroke-dasharray',
  47   from: 'initial',
  48   to: '20 20',
  49 }, [
  50   {at: -0.6, is: '0px, 0px'},
  51   {at: -0.4, is: '0px, 0px'},
  52   {at: -0.2, is: '0px, 0px'},
  53   {at: 0, is: 'none'},
  54   {at: 0.2, is: '4px, 4px'},
  55   {at: 0.4, is: '8px, 8px'},
  56   {at: 0.6, is: '12px, 12px'},
  57   {at: 0.8, is: '16px, 16px'},
  58   {at: 1, is: '20px, 20px'},
  59   {at: 1.2, is: '24px, 24px'},
  60 ]);
  61
  62 assertInterpolation({
  63   property: 'stroke-dasharray',
  64   from: 'inherit',
  65   to: '20 20',
  66 }, [
  67   {at: -0.6, is: '36px, 4px'},
  68   {at: -0.4, is: '34px, 6px'},
  69   {at: -0.2, is: '32px, 8px'},
  70   {at: 0, is: '30px, 10px'},
  71   {at: 0.2, is: '28px, 12px'},
  72   {at: 0.4, is: '26px, 14px'},
  73   {at: 0.6, is: '24px, 16px'},
  74   {at: 0.8, is: '22px, 18px'},
  75   {at: 1, is: '20px, 20px'},
  76   {at: 1.2, is: '18px, 22px'},
  77 ]);
  78
  79 assertInterpolation({
  80   property: 'stroke-dasharray',
  81   from: 'unset',
  82   to: '20 20',
  83 }, [
  84   {at: -0.6, is: '36px, 4px'},
  85   {at: -0.4, is: '34px, 6px'},
  86   {at: -0.2, is: '32px, 8px'},
  87   {at: 0, is: '30px, 10px'},
  88   {at: 0.2, is: '28px, 12px'},
  89   {at: 0.4, is: '26px, 14px'},
  90   {at: 0.6, is: '24px, 16px'},
  91   {at: 0.8, is: '22px, 18px'},
  92   {at: 1, is: '20px, 20px'},
  93   {at: 1.2, is: '18px, 22px'},
  94 ]);
  95
  96 // Basic case
  97 assertInterpolation({
  98   property: 'stroke-dasharray',
  99   from: '5 10',
 100   to: '15 20'
 101 }, [
 102   {at: -0.6, is: ' 0  4'}, // Values must be non-negative.
 103   {at: -0.4, is: ' 1  6'},
 104   {at: -0.2, is: ' 3  8'},
 105   {at:  0,   is: ' 5 10'},
 106   {at:  0.2, is: ' 7 12'},
 107   {at:  0.4, is: ' 9 14'},
 108   {at:  0.6, is: '11 16'},
 109   {at:  0.8, is: '13 18'},
 110   {at:  1,   is: '15 20'},
 111   {at:  1.2, is: '17 22'},
 112 ]);
 113
 114 // Zero value
 115 assertInterpolation({
 116   property: 'stroke-dasharray',
 117   from: '0 0',
 118   to: '5 10'
 119 }, [
 120   {at: -0.2, is: ' 0  0'}, // Values must be non-negative.
 121   {at:  0,   is: ' 0  0'},
 122   {at:  0.2, is: ' 1  2'},
 123   {at:  0.4, is: ' 2  4'},
 124   {at:  0.6, is: ' 3  6'},
 125   {at:  0.8, is: ' 4  8'},
 126   {at:  1.0, is: ' 5 10'},
 127   {at:  1.2, is: ' 6 12'},
 128 ]);
 129
 130 // From none
 131 assertInterpolation({
 132   property: 'stroke-dasharray',
 133   from: 'none',
 134   to: '5 10'
 135 }, [
 136   {at: -0.2, is: ' 0  0'}, // Values must be non-negative.
 137   {at:  0,   is: '0px, 0px'},
 138   {at:  0.2, is: ' 1  2'},
 139   {at:  0.4, is: ' 2  4'},
 140   {at:  0.6, is: ' 3  6'},
 141   {at:  0.8, is: ' 4  8'},
 142   {at:  1.0, is: ' 5 10'},
 143   {at:  1.2, is: ' 6 12'},
 144 ]);
 145
 146 assertInterpolation({
 147   property: 'stroke-dasharray',
 148   from: 'none',
 149   to: '5em 10em'
 150 }, [
 151   {at: -0.2, is: ' 0em  0em'}, // Values must be non-negative.
 152   {at:  0,   is: '0em, 0em'},
 153   {at:  0.2, is: ' 1em  2em'},
 154   {at:  0.4, is: ' 2em  4em'},
 155   {at:  0.6, is: ' 3em  6em'},
 156   {at:  0.8, is: ' 4em  8em'},
 157   {at:  1.0, is: ' 5em 10em'},
 158   {at:  1.2, is: ' 6em 12em'},
 159 ]);
 160
 161 // To none
 162 assertInterpolation({
 163   property: 'stroke-dasharray',
 164   from: '5 10',
 165   to: 'none'
 166 }, [
 167   {at: -0.2, is: ' 6 12'},
 168   {at:  0,   is: ' 5 10'},
 169   {at:  0.2, is: ' 4  8'},
 170   {at:  0.4, is: ' 3  6'},
 171   {at:  0.6, is: ' 2  4'},
 172   {at:  0.8, is: ' 1  2'},
 173   {at:  1.0, is: '0px, 0px'},
 174   {at:  1.2, is: ' 0  0'}, // Values must be non-negative.
 175 ]);
 176
 177 // Both none
 178 assertInterpolation({
 179   property: 'stroke-dasharray',
 180   from: 'none',
 181   to: 'none'
 182 }, [
 183   {at: -0.2, is: '0px'},
 184   {at:  0,   is: '0px'},
 185   {at:  2.2, is: '0px'},
 186   {at:  4.2, is: '0px'},
 187   {at:  6.2, is: '0px'},
 188   {at:  8.2, is: '0px'},
 189   {at:  0.2, is: '0px'},
 190   {at:  1.2, is: '0px'},
 191 ]);
 192
 193 // Differing list lengths
 194 // Lists are repeated until length is equal to lowest common multiple of lengths.
 195 assertInterpolation({
 196   property: 'stroke-dasharray',
 197   from: '5 10',
 198   to: '15 20 25'
 199 }, [
 200   {at: -0.2, is: ' 3  8  1  9  2  7'},
 201   {at:  0,   is: ' 5 10  5 10  5 10'},
 202   {at:  0.2, is: ' 7 12  9 11  8 13'},
 203   {at:  0.4, is: ' 9 14 13 12 11 16'},
 204   {at:  0.6, is: '11 16 17 13 14 19'},
 205   {at:  0.8, is: '13 18 21 14 17 22'},
 206   {at:  1,   is: '15 20 25 15 20 25'},
 207   {at:  1.2, is: '17 22 29 16 23 28'},
 208 ]);
 209
 210 // Lowest common multiple of list lengths not equal to multiple of list lengths
 211 assertInterpolation({
 212   property: 'stroke-dasharray',
 213   from: '5 10 15 20',
 214   to: '25 30 35 40 45 50'
 215 }, [
 216   {at: -0.2, is: ' 1  6 11 16  0  2 13 18  0  4  9 14'},  // Values must be non-negative.
 217   {at:  0,   is: ' 5 10 15 20  5 10 15 20  5 10 15 20'},
 218   {at:  0.2, is: ' 9 14 19 24 13 18 17 22 11 16 21 26'},
 219   {at:  0.4, is: '13 18 23 28 21 26 19 24 17 22 27 32'},
 220   {at:  0.6, is: '17 22 27 32 29 34 21 26 23 28 33 38'},
 221   {at:  0.8, is: '21 26 31 36 37 42 23 28 29 34 39 44'},
 222   {at:  1,   is: '25 30 35 40 45 50 25 30 35 40 45 50'},
 223   {at:  1.2, is: '29 34 39 44 53 58 27 32 41 46 51 56'},
 224 ]);
 225
 226 // One list has odd length
 227 assertInterpolation({
 228   property: 'stroke-dasharray',
 229   from: '5 10 15',
 230   to: '20 25 30 35'
 231 }, [
 232   {at: -0.2, is: ' 2  7 12  0  8 13  0  5 14  1  6 11'},  // Values must be non-negative.
 233   {at:  0,   is: ' 5 10 15  5 10 15  5 10 15  5 10 15'},
 234   {at:  0.2, is: ' 8 13 18 11 12 17 10 15 16  9 14 19'},
 235   {at:  0.4, is: '11 16 21 17 14 19 15 20 17 13 18 23'},
 236   {at:  0.6, is: '14 19 24 23 16 21 20 25 18 17 22 27'},
 237   {at:  0.8, is: '17 22 27 29 18 23 25 30 19 21 26 31'},
 238   {at:  1,   is: '20 25 30 35 20 25 30 35 20 25 30 35'},
 239   {at:  1.2, is: '23 28 33 41 22 27 35 40 21 29 34 39'},
 240 ]);
 241
 242 // Both lists have odd length
 243 assertInterpolation({
 244   property: 'stroke-dasharray',
 245   from: '5 10 15',
 246   to: '20 25 30 35 40'
 247 }, [
 248   {at: -0.2, is: ' 2  7 12  0  4 14  1  6 11  0  8 13  0  5 10'},  // Values must be non-negative.
 249   {at:  0,   is: ' 5 10 15  5 10 15  5 10 15  5 10 15  5 10 15'},
 250   {at:  0.2, is: ' 8 13 18 11 16 16  9 14 19 12 12 17 10 15 20'},
 251   {at:  0.4, is: '11 16 21 17 22 17 13 18 23 19 14 19 15 20 25'},
 252   {at:  0.6, is: '14 19 24 23 28 18 17 22 27 26 16 21 20 25 30'},
 253   {at:  0.8, is: '17 22 27 29 34 19 21 26 31 33 18 23 25 30 35'},
 254   {at:  1,   is: '20 25 30 35 40 20 25 30 35 40 20 25 30 35 40'},
 255   {at:  1.2, is: '23 28 33 41 46 21 29 34 39 47 22 27 35 40 45'},
 256 ]);
 257
 258 // Common units
 259 assertInterpolation({
 260   property: 'stroke-dasharray',
 261   from: '0em 20px 30px',
 262   to: '40px 0em 60px'
 263 }, [
 264   {at: -0.2, is: '0px 24px 24px'},
 265   {at:  0,   is: '0px 20px 30px'},
 266   {at:  0.2, is: '8px 16px 36px'},
 267   {at:  0.4, is: '16px 12px 42px'},
 268   {at:  0.6, is: '24px 8px 48px'},
 269   {at:  0.8, is: '32px 4px 54px'},
 270   {at:  1,   is: '40px 0px 60px'},
 271   {at:  1.2, is: '48px 0px 66px'},
 272 ]);
 273
 274 // Inconsistent units
 275 assertInterpolation({
 276   property: 'stroke-dasharray',
 277   from: '0em 20px 30px',
 278   to: '40em 0em 60em'
 279 }, [
 280   {at: -0.2, is: '0em 24px 0px'},
 281   {at:  0,   is: '0em 20px 30px'},
 282   {at:  0.2, is: '8em 16px 216px'},
 283   {at:  0.4, is: '16em 12px 402px'},
 284   {at:  0.6, is: '24em 8px 588px'},
 285   {at:  0.8, is: '32em 4px 774px'},
 286   {at:  1,   is: '40em 0em 60em'},
 287   {at:  1.2, is: '48em 0px 1146px'},
 288 ]);
 289
 290 assertInterpolation({
 291   property: 'stroke-dasharray',
 292   from: '0px 20px',
 293   to: '40px 0px 60em'
 294 }, [
 295   {at: -0.2, is: '0px 24px 0px 16px 0px 0px'},
 296   {at:  0,   is: '0px 20px 0px 20px 0px 20px'},
 297   {at:  0.2, is: '8px 16px 192px 24px 0px 208px'},
 298   {at:  0.4, is: '16px 12px 384px 28px 0px 396px'},
 299   {at:  0.6, is: '24px 8px 576px 32px 0px 584px'},
 300   {at:  0.8, is: '32px 4px 768px 36px 0px 772px'},
 301   {at:  1,   is: '40px 0px 60em 40px 0px 60em'},
 302   {at:  1.2, is: '48px 0px 1152px 44px 0px 1148px'},
 303 ]);
 304
 305 // Mixed units
 306 assertInterpolation({
 307   property: 'stroke-dasharray',
 308   from: '10em 30px',
 309   to: '20em 40px'
 310 }, [
 311   {at: -0.2, is: '8em 28px'},
 312   {at:  0,   is: '10em 30px'},
 313   {at:  0.2, is: '12em 32px'},
 314   {at:  0.4, is: '14em 34px'},
 315   {at:  0.6, is: '16em 36px'},
 316   {at:  0.8, is: '18em 38px'},
 317   {at:  1,   is: '20em 40px'},
 318   {at:  1.2, is: '22em 42px'},
 319 ]);
 320
 321 assertInterpolation({
 322   property: 'stroke-dasharray',
 323   from: '10em 20px 30em 40px 50em 60px',
 324   to: '100em 200px 300em 400px'
 325 }, [
 326   {at: -0.2, is: '0em 0px 0em 0px 40em 32px 0em 0px 16em 8px 0em 0px'},
 327   {at:  0,   is: '10em 20px 30em 40px 50em 60px 10em 20px 30em 40px 50em 60px'},
 328   {at:  0.2, is: '28em 56px 84em 112px 60em 88px 68em 96px 44em 72px 100em 128px'},
 329   {at:  0.4, is: '46em 92px 138em 184px 70em 116px 126em 172px 58em 104px 150em 196px'},
 330   {at:  0.6, is: '64em 128px 192em 256px 80em 144px 184em 248px 72em 136px 200em 264px'},
 331   {at:  0.8, is: '82em 164px 246em 328px 90em 172px 242em 324px 86em 168px 250em 332px'},
 332   {at:  1,   is: '100em 200px 300em 400px 100em 200px 300em 400px 100em 200px 300em 400px'},
 333   {at:  1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 350em 468px'},
 334 ]);
 335 </script>
 336 </body>