| 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 |