Chromium Code Reviews Chromium Code Reviews
Issue 26292004:
Web Animations CSS: Support animation of stroke-dasharray property (Closed)
Base URL: svn://svn.chromium.org/blink/trunk| OLD | NEW |
|---|---|
| (Empty) | |
| 1 <!DOCTYPE html> | |
| 2 <meta charset="UTF-8"> | |
| 3 <style> | |
| 4 .target { | |
| 5 stroke-width: 10px; | |
| 6 stroke: black; | |
| 7 } | |
| 8 .replica { | |
| 9 stroke: green; | |
| 10 } | |
| 11 </style> | |
| 12 <body> | |
| 13 <template id="target-template"> | |
| 14 <svg height="200" width="10"> | |
| 15 <path d="M5,0 l0,400" 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'}, | |
|
dstockwell
2013/10/13 23:35:52
We should probably special case this so that it al
Steve Block
2013/10/14 01:01:00
Done.
| |
| 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 |
