| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset="UTF-8"> |
| 3 <style> |
| 4 .target { |
| 5 stroke: black; |
| 6 } |
| 7 .replica { |
| 8 stroke: green; |
| 9 } |
| 10 </style> |
| 11 <body> |
| 12 <template id="target-template"> |
| 13 <svg width="400" height="20"> |
| 14 <rect width="400" height="20" fill="none" stroke="black"></rect> |
| 15 <path d="M0,10 l400,0" stroke-width="2" class="target"> |
| 16 </svg> |
| 17 </template> |
| 18 <script src="resources/interpolation-test.js"></script> |
| 19 <script> |
| 20 // Basic case |
| 21 assertInterpolation({ |
| 22 property: 'stroke-dasharray', |
| 23 from: '5 10', |
| 24 to: '15 20' |
| 25 }, [ |
| 26 {at: -0.6, is: ' 0 4'}, // Values must be non-negative. |
| 27 {at: -0.4, is: ' 1 6'}, |
| 28 {at: -0.2, is: ' 3 8'}, |
| 29 {at: 0, is: ' 5 10'}, |
| 30 {at: 0.2, is: ' 7 12'}, |
| 31 {at: 0.4, is: ' 9 14'}, |
| 32 {at: 0.6, is: '11 16'}, |
| 33 {at: 0.8, is: '13 18'}, |
| 34 {at: 1, is: '15 20'}, |
| 35 {at: 1.2, is: '17 22'}, |
| 36 ]); |
| 37 |
| 38 // Zero value |
| 39 assertInterpolation({ |
| 40 property: 'stroke-dasharray', |
| 41 from: '0 0', |
| 42 to: '5 10' |
| 43 }, [ |
| 44 {at: -0.2, is: ' 0 0'}, // Values must be non-negative. |
| 45 {at: 0, is: ' 0 0'}, |
| 46 {at: 0.2, is: ' 1 2'}, |
| 47 {at: 0.4, is: ' 2 4'}, |
| 48 {at: 0.6, is: ' 3 6'}, |
| 49 {at: 0.8, is: ' 4 8'}, |
| 50 {at: 1.0, is: ' 5 10'}, |
| 51 {at: 1.2, is: ' 6 12'}, |
| 52 ]); |
| 53 |
| 54 // From none |
| 55 assertInterpolation({ |
| 56 property: 'stroke-dasharray', |
| 57 from: 'none', |
| 58 to: '5 10' |
| 59 }, [ |
| 60 {at: -0.2, is: ' 0 0'}, // Values must be non-negative. |
| 61 {at: 0, is: 'none'}, |
| 62 {at: 0.2, is: ' 1 2'}, |
| 63 {at: 0.4, is: ' 2 4'}, |
| 64 {at: 0.6, is: ' 3 6'}, |
| 65 {at: 0.8, is: ' 4 8'}, |
| 66 {at: 1.0, is: ' 5 10'}, |
| 67 {at: 1.2, is: ' 6 12'}, |
| 68 ]); |
| 69 |
| 70 // To none |
| 71 assertInterpolation({ |
| 72 property: 'stroke-dasharray', |
| 73 from: '5 10', |
| 74 to: 'none' |
| 75 }, [ |
| 76 {at: -0.2, is: ' 6 12'}, |
| 77 {at: 0, is: ' 5 10'}, |
| 78 {at: 0.2, is: ' 4 8'}, |
| 79 {at: 0.4, is: ' 3 6'}, |
| 80 {at: 0.6, is: ' 2 4'}, |
| 81 {at: 0.8, is: ' 1 2'}, |
| 82 {at: 1.0, is: 'none'}, |
| 83 {at: 1.2, is: ' 0 0'}, // Values must be non-negative. |
| 84 ]); |
| 85 |
| 86 // Both none |
| 87 assertInterpolation({ |
| 88 property: 'stroke-dasharray', |
| 89 from: 'none', |
| 90 to: 'none' |
| 91 }, [ |
| 92 {at: -0.2, is: ' 0 0'}, |
| 93 {at: 0, is: 'none'}, |
| 94 {at: 0.2, is: ' 0 0'}, |
| 95 {at: 0.4, is: ' 0 0'}, |
| 96 {at: 0.6, is: ' 0 0'}, |
| 97 {at: 0.8, is: ' 0 0'}, |
| 98 {at: 1.0, is: 'none'}, |
| 99 {at: 1.2, is: ' 0 0'}, |
| 100 ]); |
| 101 |
| 102 // Differing list lengths |
| 103 // Lists are repeated until length is equal to lowest common multiple of lengths
. |
| 104 assertInterpolation({ |
| 105 property: 'stroke-dasharray', |
| 106 from: '5 10', |
| 107 to: '15 20 25' |
| 108 }, [ |
| 109 {at: -0.2, is: ' 3 8 1 9 2 7'}, |
| 110 {at: 0, is: ' 5 10'}, |
| 111 {at: 0.2, is: ' 7 12 9 11 8 13'}, |
| 112 {at: 0.4, is: ' 9 14 13 12 11 16'}, |
| 113 {at: 0.6, is: '11 16 17 13 14 19'}, |
| 114 {at: 0.8, is: '13 18 21 14 17 22'}, |
| 115 {at: 1, is: '15 20 25'}, |
| 116 {at: 1.2, is: '17 22 29 16 23 28'}, |
| 117 ]); |
| 118 |
| 119 // Lowest common multiple of list lengths not equal to multiple of list lengths |
| 120 assertInterpolation({ |
| 121 property: 'stroke-dasharray', |
| 122 from: '5 10 15 20', |
| 123 to: '25 30 35 40 45 50' |
| 124 }, [ |
| 125 {at: -0.2, is: ' 1 6 11 16 0 2 13 18 0 4 9 14'}, // Values must be non-
negative. |
| 126 {at: 0, is: ' 5 10 15 20'}, |
| 127 {at: 0.2, is: ' 9 14 19 24 13 18 17 22 11 16 21 26'}, |
| 128 {at: 0.4, is: '13 18 23 28 21 26 19 24 17 22 27 32'}, |
| 129 {at: 0.6, is: '17 22 27 32 29 34 21 26 23 28 33 38'}, |
| 130 {at: 0.8, is: '21 26 31 36 37 42 23 28 29 34 39 44'}, |
| 131 {at: 1, is: '25 30 35 40 45 50'}, |
| 132 {at: 1.2, is: '29 34 39 44 53 58 27 32 41 46 51 56'}, |
| 133 ]); |
| 134 |
| 135 // One list has odd length |
| 136 assertInterpolation({ |
| 137 property: 'stroke-dasharray', |
| 138 from: '5 10 15', |
| 139 to: '20 25 30 35' |
| 140 }, [ |
| 141 {at: -0.2, is: ' 2 7 12 0 8 13 0 5 14 1 6 11'}, // Values must be non-
negative. |
| 142 {at: 0, is: ' 5 10 15'}, |
| 143 {at: 0.2, is: ' 8 13 18 11 12 17 10 15 16 9 14 19'}, |
| 144 {at: 0.4, is: '11 16 21 17 14 19 15 20 17 13 18 23'}, |
| 145 {at: 0.6, is: '14 19 24 23 16 21 20 25 18 17 22 27'}, |
| 146 {at: 0.8, is: '17 22 27 29 18 23 25 30 19 21 26 31'}, |
| 147 {at: 1, is: '20 25 30 35'}, |
| 148 {at: 1.2, is: '23 28 33 41 22 27 35 40 21 29 34 39'}, |
| 149 ]); |
| 150 |
| 151 // Both lists have odd length |
| 152 assertInterpolation({ |
| 153 property: 'stroke-dasharray', |
| 154 from: '5 10 15', |
| 155 to: '20 25 30 35 40' |
| 156 }, [ |
| 157 {at: -0.2, is: ' 2 7 12 0 4 14 1 6 11 0 8 13 0 5 10'}, // Values mus
t be non-negative. |
| 158 {at: 0, is: ' 5 10 15'}, |
| 159 {at: 0.2, is: ' 8 13 18 11 16 16 9 14 19 12 12 17 10 15 20'}, |
| 160 {at: 0.4, is: '11 16 21 17 22 17 13 18 23 19 14 19 15 20 25'}, |
| 161 {at: 0.6, is: '14 19 24 23 28 18 17 22 27 26 16 21 20 25 30'}, |
| 162 {at: 0.8, is: '17 22 27 29 34 19 21 26 31 33 18 23 25 30 35'}, |
| 163 {at: 1, is: '20 25 30 35 40'}, |
| 164 {at: 1.2, is: '23 28 33 41 46 21 29 34 39 47 22 27 35 40 45'}, |
| 165 ]); |
| 166 |
| 167 </script> |
| 168 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 26292004:
Web Animations CSS: Support animation of stroke-dasharray property (Closed)
Base URL: svn://svn.chromium.org/blink/trunk