third_party/WebKit/LayoutTests/animations/svg-attribute-interpolation/svg-d-interpolation.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   5 </head>
   6 <body>
   7 <template id="target-template">
   8 <svg width="90" height="90">
   9 <path class="target" />
  10 </svg>
  11 </template>
  12 <script src="resources/interpolation-test.js"></script>
  13 <script>
  14 'use strict';
  15
  16 // Distinct number of path segments
  17 assertAttributeInterpolation({
  18   property: 'd',
  19   from: 'm 0 0 h 1 h 2',
  20   to: 'm 0 0 h 3'
  21 }, [
  22   {at: -0.4, is: 'm 0 0 h 1 h 2'},
  23   {at: 0, is: 'm 0 0 h 1 h 2'},
  24   {at: 0.2, is: 'm 0 0 h 1 h 2'},
  25   {at: 0.6, is: 'm 0 0 h 3'},
  26   {at: 1, is: 'm 0 0 h 3'},
  27   {at: 1.4, is: 'm 0 0 h 3'}
  28 ]);
  29
  30 // Distinct segment types
  31 assertAttributeInterpolation({
  32   property: 'd',
  33   from: 'm 10 0 h 1',
  34   to: 'm 20 0 v 2'
  35 }, [
  36   {at: -0.4, is: 'm 10 0 h 1'},
  37   {at: 0, is: 'm 10 0 h 1'},
  38   {at: 0.2, is: 'm 10 0 h 1'},
  39   {at: 0.6, is: 'm 20 0 v 2'},
  40   {at: 1, is: 'm 20 0 v 2'},
  41   {at: 1.4, is: 'm 20 0 v 2'}
  42 ]);
  43
  44 assertAttributeInterpolation({
  45   property: 'd',
  46   from: 'm 1 2 l 3 4 z',
  47   to: 'm 1 2 l 3 4'
  48 }, [
  49   {at: -0.4, is: 'm 1 2 l 3 4 z'},
  50   {at: 0, is: 'm 1 2 l 3 4 z'},
  51   {at: 0.2, is: 'm 1 2 l 3 4 z'},
  52   {at: 0.6, is: 'm 1 2 l 3 4'},
  53   {at: 1, is: 'm 1 2 l 3 4'},
  54   {at: 1.4, is: 'm 1 2 l 3 4'}
  55 ]);
  56
  57 // Exercise each segment type
  58 assertAttributeInterpolation({
  59   property: 'd',
  60   from: 'm 0 0 z',
  61   to: 'm 0 0 z'
  62 }, [
  63   {at: -0.4, is: 'm 0 0 z'},
  64   {at: 0, is: 'm 0 0 z'},
  65   {at: 0.2, is: 'm 0 0 z'},
  66   {at: 0.6, is: 'm 0 0 z'},
  67   {at: 1, is: 'm 0 0 z'},
  68   {at: 1.4, is: 'm 0 0 z'}
  69 ]);
  70
  71 assertAttributeInterpolation({
  72   property: 'd',
  73   from: 'M 20 50',
  74   to: 'M 30 70'
  75 }, [
  76   {at: -0.4, is: 'M 16 42'},
  77   {at: 0, is: 'M 20 50'},
  78   {at: 0.2, is: 'M 22 54'},
  79   {at: 0.6, is: 'M 26 62'},
  80   {at: 1, is: 'M 30 70'},
  81   {at: 1.4, is: 'M 34 78'}
  82 ]);
  83
  84 assertAttributeInterpolation({
  85   property: 'd',
  86   from: 'm 20 50',
  87   to: 'm 30 70'
  88 }, [
  89   {at: -0.4, is: 'm 16 42'},
  90   {at: 0, is: 'm 20 50'},
  91   {at: 0.2, is: 'm 22 54'},
  92   {at: 0.6, is: 'm 26 62'},
  93   {at: 1, is: 'm 30 70'},
  94   {at: 1.4, is: 'm 34 78'}
  95 ]);
  96
  97 assertAttributeInterpolation({
  98   property: 'd',
  99   from: 'm 0 0 L 20 50',
 100   to: 'm 0 0 L 30 70'
 101 }, [
 102   {at: -0.4, is: 'm 0 0 L 16 42'},
 103   {at: 0, is: 'm 0 0 L 20 50'},
 104   {at: 0.2, is: 'm 0 0 L 22 54'},
 105   {at: 0.6, is: 'm 0 0 L 26 62'},
 106   {at: 1, is: 'm 0 0 L 30 70'},
 107   {at: 1.4, is: 'm 0 0 L 34 78'}
 108 ]);
 109
 110 assertAttributeInterpolation({
 111   property: 'd',
 112   from: 'm 0 0 l 20 50',
 113   to: 'm 0 0 l 30 70'
 114 }, [
 115   {at: -0.4, is: 'm 0 0 l 16 42'},
 116   {at: 0, is: 'm 0 0 l 20 50'},
 117   {at: 0.2, is: 'm 0 0 l 22 54'},
 118   {at: 0.6, is: 'm 0 0 l 26 62'},
 119   {at: 1, is: 'm 0 0 l 30 70'},
 120   {at: 1.4, is: 'm 0 0 l 34 78'}
 121 ]);
 122
 123 assertAttributeInterpolation({
 124   property: 'd',
 125   from: 'm 0 0 C 32 42 52 62 12 22',
 126   to: 'm 0 0 C 37 47 57 67 17 27'
 127 }, [
 128   {at: -0.4, is: 'm 0 0 C 30 40 50 60 10 20'},
 129   {at: 0, is: 'm 0 0 C 32 42 52 62 12 22'},
 130   {at: 0.2, is: 'm 0 0 C 33 43 53 63 13 23'},
 131   {at: 0.6, is: 'm 0 0 C 35 45 55 65 15 25'},
 132   {at: 1, is: 'm 0 0 C 37 47 57 67 17 27'},
 133   {at: 1.4, is: 'm 0 0 C 39 49 59 69 19 29'}
 134 ]);
 135
 136 assertAttributeInterpolation({
 137   property: 'd',
 138   from: 'm 0 0 c 32 42 52 62 12 22',
 139   to: 'm 0 0 c 37 47 57 67 17 27'
 140 }, [
 141   {at: -0.4, is: 'm 0 0 c 30 40 50 60 10 20'},
 142   {at: 0, is: 'm 0 0 c 32 42 52 62 12 22'},
 143   {at: 0.2, is: 'm 0 0 c 33 43 53 63 13 23'},
 144   {at: 0.6, is: 'm 0 0 c 35 45 55 65 15 25'},
 145   {at: 1, is: 'm 0 0 c 37 47 57 67 17 27'},
 146   {at: 1.4, is: 'm 0 0 c 39 49 59 69 19 29'}
 147 ]);
 148
 149 assertAttributeInterpolation({
 150   property: 'd',
 151   from: 'm 0 0 Q 32 42 52 62',
 152   to: 'm 0 0 Q 37 47 57 67'
 153 }, [
 154   {at: -0.4, is: 'm 0 0 Q 30 40 50 60'},
 155   {at: 0, is: 'm 0 0 Q 32 42 52 62'},
 156   {at: 0.2, is: 'm 0 0 Q 33 43 53 63'},
 157   {at: 0.6, is: 'm 0 0 Q 35 45 55 65'},
 158   {at: 1, is: 'm 0 0 Q 37 47 57 67'},
 159   {at: 1.4, is: 'm 0 0 Q 39 49 59 69'}
 160 ]);
 161
 162 assertAttributeInterpolation({
 163   property: 'd',
 164   from: 'm 0 0 q 32 42 52 62',
 165   to: 'm 0 0 q 37 47 57 67'
 166 }, [
 167   {at: -0.4, is: 'm 0 0 q 30 40 50 60'},
 168   {at: 0, is: 'm 0 0 q 32 42 52 62'},
 169   {at: 0.2, is: 'm 0 0 q 33 43 53 63'},
 170   {at: 0.6, is: 'm 0 0 q 35 45 55 65'},
 171   {at: 1, is: 'm 0 0 q 37 47 57 67'},
 172   {at: 1.4, is: 'm 0 0 q 39 49 59 69'}
 173 ]);
 174
 175 assertAttributeInterpolation({
 176   property: 'd',
 177   from: 'm 0 0 A 10 20 30 1 0 40 50',
 178   to: 'm 0 0 A 60 70 80 0 1 90 100'
 179 }, [
 180   {at: -0.4, is: 'm 0 0 A -10 0 10 1 0 20 30'},
 181   {at: 0, is: 'm 0 0 A 10 20 30 1 0 40 50'},
 182   {at: 0.2, is: 'm 0 0 A 20 30 40 1 0 50 60'},
 183   {at: 0.6, is: 'm 0 0 A 40 50 60 0 1 70 80'},
 184   {at: 1, is: 'm 0 0 A 60 70 80 0 1 90 100'},
 185   {at: 1.4, is: 'm 0 0 A 80 90 100 0 1 110 120'},
 186 ]);
 187
 188 assertAttributeInterpolation({
 189   property: 'd',
 190   from: 'm 0 0 a 10 20 30 1 0 40 50',
 191   to: 'm 0 0 a 60 70 80 0 1 90 100'
 192 }, [
 193   {at: -0.4, is: 'm 0 0 a -10 0 10 1 0 20 30'},
 194   {at: 0, is: 'm 0 0 a 10 20 30 1 0 40 50'},
 195   {at: 0.2, is: 'm 0 0 a 20 30 40 1 0 50 60'},
 196   {at: 0.6, is: 'm 0 0 a 40 50 60 0 1 70 80'},
 197   {at: 1, is: 'm 0 0 a 60 70 80 0 1 90 100'},
 198   {at: 1.4, is: 'm 0 0 a 80 90 100 0 1 110 120'}
 199 ]);
 200
 201 assertAttributeInterpolation({
 202   property: 'd',
 203   from: 'm 0 0 H 10',
 204   to: 'm 0 0 H 60'
 205 }, [
 206   {at: -0.4, is: 'm 0 0 H -10'},
 207   {at: 0, is: 'm 0 0 H 10'},
 208   {at: 0.2, is: 'm 0 0 H 20'},
 209   {at: 0.6, is: 'm 0 0 H 40'},
 210   {at: 1, is: 'm 0 0 H 60'},
 211   {at: 1.4, is: 'm 0 0 H 80'}
 212 ]);
 213
 214 assertAttributeInterpolation({
 215   property: 'd',
 216   from: 'm 0 0 h 10',
 217   to: 'm 0 0 h 60'
 218 }, [
 219   {at: -0.4, is: 'm 0 0 h -10'},
 220   {at: 0, is: 'm 0 0 h 10'},
 221   {at: 0.2, is: 'm 0 0 h 20'},
 222   {at: 0.6, is: 'm 0 0 h 40'},
 223   {at: 1, is: 'm 0 0 h 60'},
 224   {at: 1.4, is: 'm 0 0 h 80'}
 225 ]);
 226
 227 assertAttributeInterpolation({
 228   property: 'd',
 229   from: 'm 0 0 V 10',
 230   to: 'm 0 0 V 60'
 231 }, [
 232   {at: -0.4, is: 'm 0 0 V -10'},
 233   {at: 0, is: 'm 0 0 V 10'},
 234   {at: 0.2, is: 'm 0 0 V 20'},
 235   {at: 0.6, is: 'm 0 0 V 40'},
 236   {at: 1, is: 'm 0 0 V 60'},
 237   {at: 1.4, is: 'm 0 0 V 80'}
 238 ]);
 239
 240 assertAttributeInterpolation({
 241   property: 'd',
 242   from: 'm 0 0 v 10',
 243   to: 'm 0 0 v 60'
 244 }, [
 245   {at: -0.4, is: 'm 0 0 v -10'},
 246   {at: 0, is: 'm 0 0 v 10'},
 247   {at: 0.2, is: 'm 0 0 v 20'},
 248   {at: 0.6, is: 'm 0 0 v 40'},
 249   {at: 1, is: 'm 0 0 v 60'},
 250   {at: 1.4, is: 'm 0 0 v 80'}
 251 ]);
 252
 253 assertAttributeInterpolation({
 254   property: 'd',
 255   from: 'm 0 0 S 32 42 52 62',
 256   to: 'm 0 0 S 37 47 57 67'
 257 }, [
 258   {at: -0.4, is: 'm 0 0 S 30 40 50 60'},
 259   {at: 0, is: 'm 0 0 S 32 42 52 62'},
 260   {at: 0.2, is: 'm 0 0 S 33 43 53 63'},
 261   {at: 0.6, is: 'm 0 0 S 35 45 55 65'},
 262   {at: 1, is: 'm 0 0 S 37 47 57 67'},
 263   {at: 1.4, is: 'm 0 0 S 39 49 59 69'},
 264 ]);
 265
 266 assertAttributeInterpolation({
 267   property: 'd',
 268   from: 'm 0 0 s 32 42 52 62',
 269   to: 'm 0 0 s 37 47 57 67'
 270 }, [
 271   {at: -0.4, is: 'm 0 0 s 30 40 50 60'},
 272   {at: 0, is: 'm 0 0 s 32 42 52 62'},
 273   {at: 0.2, is: 'm 0 0 s 33 43 53 63'},
 274   {at: 0.6, is: 'm 0 0 s 35 45 55 65'},
 275   {at: 1, is: 'm 0 0 s 37 47 57 67'},
 276   {at: 1.4, is: 'm 0 0 s 39 49 59 69'},
 277 ]);
 278
 279 assertAttributeInterpolation({
 280   property: 'd',
 281   from: 'm 0 0 T 20 50',
 282   to: 'm 0 0 T 30 70'
 283 }, [
 284   {at: -0.4, is: 'm 0 0 T 16 42'},
 285   {at: 0, is: 'm 0 0 T 20 50'},
 286   {at: 0.2, is: 'm 0 0 T 22 54'},
 287   {at: 0.6, is: 'm 0 0 T 26 62'},
 288   {at: 1, is: 'm 0 0 T 30 70'},
 289   {at: 1.4, is: 'm 0 0 T 34 78'},
 290 ]);
 291
 292 assertAttributeInterpolation({
 293   property: 'd',
 294   from: 'm 0 0 t 20 50',
 295   to: 'm 0 0 t 30 70'
 296 }, [
 297   {at: -0.4, is: 'm 0 0 t 16 42'},
 298   {at: 0, is: 'm 0 0 t 20 50'},
 299   {at: 0.2, is: 'm 0 0 t 22 54'},
 300   {at: 0.6, is: 'm 0 0 t 26 62'},
 301   {at: 1, is: 'm 0 0 t 30 70'},
 302   {at: 1.4, is: 'm 0 0 t 34 78'},
 303 ]);
 304
 305 // Mix relative and non-relative
 306 assertAttributeInterpolation({
 307   property: 'd',
 308   from: 'M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z',
 309   to: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z'
 310 }, [
 311   {at: -0.4, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 60 -180 z'},
 312   {at: 0, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 313   {at: 0.2, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 120 -60 z'},
 314   {at: 0.6, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 160 20 z'},
 315   {at: 1, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 200 100 z'},
 316   {at: 1.4, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 240 180 z'},
 317 ]);
 318
 319 assertAttributeInterpolation({
 320   property: 'd',
 321   from: 'M 0 0 L 100 100 M 100 200 L 200 200 Z L 200 100 Z',
 322   to: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'
 323 }, [
 324   {at: -0.4, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 325   {at: 0, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 326   {at: 0.2, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 327   {at: 0.6, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 328   {at: 1, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 329   {at: 1.4, is: 'M 0 0 L 100 100 m 0 100 l 100 0 z l 100 -100 z'},
 330 ]);
 331
 332 assertAttributeInterpolation({
 333   property: 'd',
 334   from: 'm 10 20 l 20 30 z l 50 60 z m 70 80 l 90 60 z t 70 120',
 335   to: 'M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220'
 336 }, [
 337   {at: -0.4, is: 'M -30 -20 L -10 10 z L 52 68 z M 72 84 L 162 144 z T 126 220'},
 338   {at: 0, is: 'M 10 20 L 30 50 z L 60 80 z M 80 100 L 170 160 z T 150 220'},
 339   {at: 0.2, is: 'M 30 40 L 50 70 z L 64 86 z M 84 108 L 174 168 z T 162 220'},
 340   {at: 0.6, is: 'M 70 80 L 90 110 Z L 72 98 Z M 92 124 L 182 184 Z T 186 220'},
 341   {at: 1, is: 'M 110 120 L 130 150 Z L 80 110 Z M 100 140 L 190 200 Z T 210 220'},
 342   {at: 1.4, is: 'M 150 160 L 170 190 z L 88 122 z M 108 156 L 198 216 z T 234 220'}
 343 ]);
 344
 345 assertAttributeInterpolation({
 346   property: 'd',
 347   from: 'm 10 20 c 40 50 30 60 80 70 c 90 100 140 110 120 130',
 348   to: 'M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330'
 349 }, [
 350   {at: -0.4, is: 'M -30 -20 C 14 38 4 48 54 58 C 136 146 186 156 166 176'},
 351   {at: 0, is: 'M 10 20 C 50 70 40 80 90 90 C 180 190 230 200 210 220'},
 352   {at: 0.2, is: 'M 30 40 C 68 86 58 96 108 106 C 202 212 252 222 232 242'},
 353   {at: 0.6, is: 'M 70 80 C 104 118 94 128 144 138 C 246 256 296 266 276 286'},
 354   {at: 1, is: 'M 110 120 C 140 150 130 160 180 170 C 290 300 340 310 320 330'},
 355   {at: 1.4, is: 'M 150 160 C 176 182 166 192 216 202 C 334 344 384 354 364 374'}
 356 ]);
 357
 358 assertAttributeInterpolation({
 359   property: 'd',
 360   from: 'm 10 20 q 30 60 40 50 q 100 70 90 80',
 361   to: 'M 110 120 Q 130 160 140 150 Q 200 170 190 180'
 362 }, [
 363   {at: -0.4, is: 'M -30 -20 Q 4 48 14 38 Q 130 128 120 138'},
 364   {at: 0, is: 'M 10 20 Q 40 80 50 70 Q 150 140 140 150'},
 365   {at: 0.2, is: 'M 30 40 Q 58 96 68 86 Q 160 146 150 156'},
 366   {at: 0.6, is: 'M 70 80 Q 94 128 104 118 Q 180 158 170 168'},
 367   {at: 1, is: 'M 110 120 Q 130 160 140 150 Q 200 170 190 180'},
 368   {at: 1.4, is: 'M 150 160 Q 166 192 176 182 Q 220 182 210 192'}
 369 ]);
 370
 371 assertAttributeInterpolation({
 372   property: 'd',
 373   from: 'm 10 20 s 30 60 40 50 s 100 70 90 80',
 374   to: 'M 110 120 S 130 160 140 150 S 200 170 190 180'
 375 }, [
 376   {at: -0.4, is: 'M -30 -20 S 4 48 14 38 S 130 128 120 138'},
 377   {at: 0, is: 'M 10 20 S 40 80 50 70 S 150 140 140 150'},
 378   {at: 0.2, is: 'M 30 40 S 58 96 68 86 S 160 146 150 156'},
 379   {at: 0.6, is: 'M 70 80 S 94 128 104 118 S 180 158 170 168'},
 380   {at: 1, is: 'M 110 120 S 130 160 140 150 S 200 170 190 180'},
 381   {at: 1.4, is: 'M 150 160 S 166 192 176 182 S 220 182 210 192'}
 382 ]);
 383
 384 assertAttributeInterpolation({
 385   property: 'd',
 386   from: 'm 10 20 h 30 v 40 h 50 v 60 l 70 80',
 387   to: 'M 110 120 H 130 V 140 H 250 V 260 L 270 280'
 388 }, [
 389   {at: -0.4, is: 'M -30 -20 H 4 V 28 H 26 V 64 L 116 168'},
 390   {at: 0, is: 'M 10 20 H 40 V 60 H 90 V 120 L 160 200'},
 391   {at: 0.2, is: 'M 30 40 H 58 V 76 H 122 V 148 L 182 216'},
 392   {at: 0.6, is: 'M 70 80 H 94 V 108 H 186 V 204 L 226 248'},
 393   {at: 1, is: 'M 110 120 H 130 V 140 H 250 V 260 L 270 280'},
 394   {at: 1.4, is: 'M 150 160 H 166 V 172 H 314 V 316 L 314 312'}
 395 ]);
 396
 397 assertAttributeInterpolation({
 398   property: 'd',
 399   from: 'm 10 20 a 10 20 30 1 0 40 50 a 110 120 30 1 1 140 50',
 400   to: 'M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100'
 401 }, [
 402   {at: -0.4, is: 'M 6 16 A -10 0 10 1 0 34 58 A 90 100 10 1 1 230 128'},
 403   {at: 0, is: 'M 10 20 A 10 20 30 1 0 50 70 A 110 120 30 1 1 190 120'},
 404   {at: 0.2, is: 'M 12 22 A 20 30 40 1 0 58 76 A 120 130 40 1 1 170 116'},
 405   {at: 0.6, is: 'M 16 26 A 40 50 60 0 1 74 88 A 140 150 60 0 1 130 108'},
 406   {at: 1, is: 'M 20 30 A 60 70 80 0 1 90 100 A 160 170 80 0 1 90 100'},
 407   {at: 1.4, is: 'M 24 34 A 80 90 100 0 1 106 112 A 180 190 100 0 1 50 92'}
 408 ]);
 409
 410 </script>
 411 </body>
 412 </html>