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 |