| OLD | NEW | 
|    1 <!DOCTYPE html> |    1 <!DOCTYPE html> | 
|    2 <meta charset="UTF-8"> |    2 <meta charset="UTF-8"> | 
|    3 <style> |    3 <style> | 
|    4 .target { |    4 .target { | 
 |    5   font-size: 16px; | 
|    5   stroke-width: 10px; |    6   stroke-width: 10px; | 
|    6   stroke: black; |    7   stroke: black; | 
|    7 } |    8 } | 
|    8 .replica { |    9 .replica { | 
|    9   stroke: green; |   10   stroke: green; | 
|   10 } |   11 } | 
|   11 </style> |   12 </style> | 
|   12 <body> |   13 <body> | 
|   13 <template id="target-template"> |   14 <template id="target-template"> | 
|   14   <svg height="200" width="10"> |   15   <svg height="200" width="10"> | 
| (...skipping 179 matching lines...) Expand 10 before | Expand all | Expand 10 after  Loading... | 
|  194   {at:  1,   is: '40px 0px 60px'}, |  195   {at:  1,   is: '40px 0px 60px'}, | 
|  195   {at:  1.2, is: '48px 0px 66px'}, |  196   {at:  1.2, is: '48px 0px 66px'}, | 
|  196 ]); |  197 ]); | 
|  197  |  198  | 
|  198 // Inconsistent units |  199 // Inconsistent units | 
|  199 assertInterpolation({ |  200 assertInterpolation({ | 
|  200   property: 'stroke-dasharray', |  201   property: 'stroke-dasharray', | 
|  201   from: '0em 20px 30px', |  202   from: '0em 20px 30px', | 
|  202   to: '40em 0em 60em' |  203   to: '40em 0em 60em' | 
|  203 }, [ |  204 }, [ | 
|  204   {at: -0.2, is: '0em 20px 30px'}, |  205   {at: -0.2, is: '0em 24px 0px'}, | 
|  205   {at:  0,   is: '0em 20px 30px'}, |  206   {at:  0,   is: '0em 20px 30px'}, | 
|  206   {at:  0.2, is: '0em 20px 30px'}, |  207   {at:  0.2, is: '8em 16px 216px'}, | 
|  207   {at:  0.4, is: '0em 20px 30px'}, |  208   {at:  0.4, is: '16em 12px 402px'}, | 
|  208   {at:  0.6, is: '40em 0em 60em'}, |  209   {at:  0.6, is: '24em 8px 588px'}, | 
|  209   {at:  0.8, is: '40em 0em 60em'}, |  210   {at:  0.8, is: '32em 4px 774px'}, | 
|  210   {at:  1,   is: '40em 0em 60em'}, |  211   {at:  1,   is: '40em 0em 60em'}, | 
|  211   {at:  1.2, is: '40em 0em 60em'}, |  212   {at:  1.2, is: '48em 0px 1146px'}, | 
|  212 ]); |  213 ]); | 
|  213  |  214  | 
|  214 assertInterpolation({ |  215 assertInterpolation({ | 
|  215   property: 'stroke-dasharray', |  216   property: 'stroke-dasharray', | 
|  216   from: '0px 20px', |  217   from: '0px 20px', | 
|  217   to: '40px 0px 60em' |  218   to: '40px 0px 60em' | 
|  218 }, [ |  219 }, [ | 
|  219   {at: -0.2, is: '0px 20px'}, |  220   {at: -0.2, is: '0px 24px 0px 16px 0px 0px'}, | 
|  220   {at:  0,   is: '0px 20px'}, |  221   {at:  0,   is: '0px 20px 0px 20px 0px 20px'}, | 
|  221   {at:  0.2, is: '0px 20px'}, |  222   {at:  0.2, is: '8px 16px 192px 24px 0px 208px'}, | 
|  222   {at:  0.4, is: '0px 20px'}, |  223   {at:  0.4, is: '16px 12px 384px 28px 0px 396px'}, | 
|  223   {at:  0.6, is: '40px 0px 60em'}, |  224   {at:  0.6, is: '24px 8px 576px 32px 0px 584px'}, | 
|  224   {at:  0.8, is: '40px 0px 60em'}, |  225   {at:  0.8, is: '32px 4px 768px 36px 0px 772px'}, | 
|  225   {at:  1,   is: '40px 0px 60em'}, |  226   {at:  1,   is: '40px 0px 60em 40px 0px 60em'}, | 
|  226   {at:  1.2, is: '40px 0px 60em'}, |  227   {at:  1.2, is: '48px 0px 1152px 44px 0px 1148px'}, | 
|  227 ]); |  228 ]); | 
|  228  |  229  | 
|  229 // Mixed units |  230 // Mixed units | 
|  230 assertInterpolation({ |  231 assertInterpolation({ | 
|  231   property: 'stroke-dasharray', |  232   property: 'stroke-dasharray', | 
|  232   from: '10em 30px', |  233   from: '10em 30px', | 
|  233   to: '20em 40px' |  234   to: '20em 40px' | 
|  234 }, [ |  235 }, [ | 
|  235   {at: -0.2, is: '8em 28px'}, |  236   {at: -0.2, is: '8em 28px'}, | 
|  236   {at:  0,   is: '10em 30px'}, |  237   {at:  0,   is: '10em 30px'}, | 
| (...skipping 14 matching lines...) Expand all  Loading... | 
|  251   {at:  0,   is: '10em 20px 30em 40px 50em 60px 10em 20px 30em 40px 50em 60px'}, |  252   {at:  0,   is: '10em 20px 30em 40px 50em 60px 10em 20px 30em 40px 50em 60px'}, | 
|  252   {at:  0.2, is: '28em 56px 84em 112px 60em 88px 68em 96px 44em 72px 100em 128px
     '}, |  253   {at:  0.2, is: '28em 56px 84em 112px 60em 88px 68em 96px 44em 72px 100em 128px
     '}, | 
|  253   {at:  0.4, is: '46em 92px 138em 184px 70em 116px 126em 172px 58em 104px 150em 
     196px'}, |  254   {at:  0.4, is: '46em 92px 138em 184px 70em 116px 126em 172px 58em 104px 150em 
     196px'}, | 
|  254   {at:  0.6, is: '64em 128px 192em 256px 80em 144px 184em 248px 72em 136px 200em
      264px'}, |  255   {at:  0.6, is: '64em 128px 192em 256px 80em 144px 184em 248px 72em 136px 200em
      264px'}, | 
|  255   {at:  0.8, is: '82em 164px 246em 328px 90em 172px 242em 324px 86em 168px 250em
      332px'}, |  256   {at:  0.8, is: '82em 164px 246em 328px 90em 172px 242em 324px 86em 168px 250em
      332px'}, | 
|  256   {at:  1,   is: '100em 200px 300em 400px 100em 200px 300em 400px 100em 200px 30
     0em 400px'}, |  257   {at:  1,   is: '100em 200px 300em 400px 100em 200px 300em 400px 100em 200px 30
     0em 400px'}, | 
|  257   {at:  1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 35
     0em 468px'}, |  258   {at:  1.2, is: '118em 236px 354em 472px 110em 228px 358em 476px 114em 232px 35
     0em 468px'}, | 
|  258 ]); |  259 ]); | 
|  259 </script> |  260 </script> | 
|  260 </body> |  261 </body> | 
| OLD | NEW |