OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <meta charset="UTF-8"> | 2 <meta charset="UTF-8"> |
3 <style> | 3 <style> |
4 svg { | 4 svg { |
5 stroke-dashoffset: 100px; | 5 stroke-dashoffset: 100px; |
6 } | 6 } |
7 .target { | 7 .target { |
8 stroke: black; | 8 stroke: black; |
9 stroke-width: 10px; | 9 stroke-width: 10px; |
| 10 font-size: 16px; |
10 } | 11 } |
11 .replica { | 12 .replica { |
12 stroke: green; | 13 stroke: green; |
13 } | 14 } |
14 </style> | 15 </style> |
15 <body> | 16 <body> |
16 <template id="target-template"> | 17 <template id="target-template"> |
17 <svg height="200" width="10"> | 18 <svg height="200" width="10"> |
18 <path d="M5,0 l0,200" stroke-dasharray="15,15" class="target"> | 19 <path d="M5,0 l0,200" stroke-dasharray="15,15" class="target"> |
19 </svg> | 20 </svg> |
(...skipping 11 matching lines...) Expand all Loading... |
31 {at: 0.5, is: '0px'}, | 32 {at: 0.5, is: '0px'}, |
32 {at: 0.75, is: '5px'}, | 33 {at: 0.75, is: '5px'}, |
33 {at: 1, is: '10px'}, | 34 {at: 1, is: '10px'}, |
34 {at: 1.25, is: '15px'}, | 35 {at: 1.25, is: '15px'}, |
35 ]); | 36 ]); |
36 assertInterpolation({ | 37 assertInterpolation({ |
37 property: 'stroke-dashoffset', | 38 property: 'stroke-dashoffset', |
38 from: '-20px', | 39 from: '-20px', |
39 to: '30em' | 40 to: '30em' |
40 }, [ | 41 }, [ |
41 {at: -0.25, is: '-20px'}, | 42 {at: -0.25, is: '-145px'}, |
42 {at: 0, is: '-20px'}, | 43 {at: 0, is: '-20px'}, |
43 {at: 0.25, is: '-20px'}, | 44 {at: 0.25, is: '105px'}, |
44 {at: 0.5, is: '30em'}, | 45 {at: 0.5, is: '230px'}, |
45 {at: 0.75, is: '30em'}, | 46 {at: 0.75, is: '355px'}, |
46 {at: 1, is: '30em'}, | 47 {at: 1, is: '30em'}, |
47 {at: 1.25, is: '30em'}, | 48 {at: 1.25, is: '605px'}, |
48 ]); | 49 ]); |
49 assertInterpolation({ | 50 assertInterpolation({ |
50 property: 'stroke-dashoffset', | 51 property: 'stroke-dashoffset', |
51 from: 'inherit', | 52 from: 'inherit', |
52 to: '140px' | 53 to: '140px' |
53 }, [ | 54 }, [ |
54 {at: -0.25, is: '90px'}, | 55 {at: -0.25, is: '90px'}, |
55 {at: 0, is: '100px'}, | 56 {at: 0, is: '100px'}, |
56 {at: 0.25, is: '110px'}, | 57 {at: 0.25, is: '110px'}, |
57 {at: 0.5, is: '120px'}, | 58 {at: 0.5, is: '120px'}, |
58 {at: 0.75, is: '130px'}, | 59 {at: 0.75, is: '130px'}, |
59 {at: 1, is: '140px'}, | 60 {at: 1, is: '140px'}, |
60 {at: 1.25, is: '150px'}, | 61 {at: 1.25, is: '150px'}, |
61 ]); | 62 ]); |
62 </script> | 63 </script> |
63 </body> | 64 </body> |
OLD | NEW |