OLD | NEW |
1 <!doctype html> | 1 <!doctype html> |
2 <meta charset="utf-8"> | 2 <meta charset="utf-8"> |
3 <style> | 3 <style> |
4 .parent { | 4 .parent { |
5 background-position: 80px 80px; | 5 background-position: 80px 80px; |
6 } | 6 } |
7 .target { | 7 .target { |
8 border: 3px solid skyblue; | 8 border: 3px solid skyblue; |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
(...skipping 78 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
89 {at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, | 89 {at: 0.75, is: 'calc(15px + 12.5%) calc(15px + 12.5%)'}, |
90 {at: 1, is: '20px 20px'}, | 90 {at: 1, is: '20px 20px'}, |
91 ]); | 91 ]); |
92 | 92 |
93 // center-top | 93 // center-top |
94 assertInterpolation({ | 94 assertInterpolation({ |
95 property: 'background-position', | 95 property: 'background-position', |
96 from: 'center center', | 96 from: 'center center', |
97 to: 'center top 20px', | 97 to: 'center top 20px', |
98 }, [ | 98 }, [ |
99 {at: 0, is: '50% 50%'}, | 99 {at: 0, is: 'left 50% top 50%'}, |
100 {at: 0.25, is: '50% calc(5px + 37.5%)'}, | 100 {at: 0.25, is: 'left 50% top calc(5px + 37.5%)'}, |
101 {at: 0.5, is: '50% calc(10px + 25%)'}, | 101 {at: 0.5, is: 'left 50% top calc(10px + 25%)'}, |
102 {at: 0.75, is: '50% calc(15px + 12.5%)'}, | 102 {at: 0.75, is: 'left 50% top calc(15px + 12.5%)'}, |
103 {at: 1, is: '50% 20px'}, | 103 {at: 1, is: 'left 50% top 20px'}, |
104 ]); | 104 ]); |
105 | 105 |
106 // right-top | 106 // right-top |
107 assertInterpolation({ | 107 assertInterpolation({ |
108 property: 'background-position', | 108 property: 'background-position', |
109 from: 'center center', | 109 from: 'center center', |
110 to: 'right 20px top 20px', | 110 to: 'right 20px top 20px', |
111 }, [ | 111 }, [ |
112 {at: 0, is: '50% 50%'}, | 112 {at: 0, is: '50% 50%'}, |
113 {at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, | 113 {at: 0.25, is: 'calc(-5px + 62.5%) calc(5px + 37.5%)'}, |
114 {at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'}, | 114 {at: 0.5, is: 'calc(-10px + 75%) calc(10px + 25%)'}, |
115 {at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, | 115 {at: 0.75, is: 'calc(-15px + 87.5%) calc(15px + 12.5%)'}, |
116 {at: 1, is: 'calc(-20px + 100%) 20px'}, | 116 {at: 1, is: 'calc(-20px + 100%) 20px'}, |
117 ]); | 117 ]); |
118 | 118 |
119 // left-center | 119 // left-center |
120 assertInterpolation({ | 120 assertInterpolation({ |
121 property: 'background-position', | 121 property: 'background-position', |
122 from: 'center center', | 122 from: 'center center', |
123 to: 'left 20px center', | 123 to: 'left 20px center', |
124 }, [ | 124 }, [ |
125 {at: 0, is: '50% 50%'}, | 125 {at: 0, is: 'left 50% top 50%'}, |
126 {at: 0.25, is: 'calc(5px + 37.5%) 50%'}, | 126 {at: 0.25, is: 'left calc(5px + 37.5%) top 50%'}, |
127 {at: 0.5, is: 'calc(10px + 25%) 50%'}, | 127 {at: 0.5, is: 'left calc(10px + 25%) top 50%'}, |
128 {at: 0.75, is: 'calc(15px + 12.5%) 50%'}, | 128 {at: 0.75, is: 'left calc(15px + 12.5%) top 50%'}, |
129 {at: 1, is: '20px 50%'}, | 129 {at: 1, is: 'left 20px top 50%'}, |
130 ]); | 130 ]); |
131 | 131 |
132 // center-center | 132 // center-center |
133 assertInterpolation({ | 133 assertInterpolation({ |
134 property: 'background-position', | 134 property: 'background-position', |
135 from: 'center center', | 135 from: 'center center', |
136 to: 'center center', | 136 to: 'center center', |
137 }, [ | 137 }, [ |
138 {at: 0, is: '50% 50%'}, | 138 {at: 0, is: '50% 50%'}, |
139 {at: 0.25, is: '50% 50%'}, | 139 {at: 0.25, is: '50% 50%'}, |
140 {at: 0.5, is: '50% 50%'}, | 140 {at: 0.5, is: '50% 50%'}, |
141 {at: 0.75, is: '50% 50%'}, | 141 {at: 0.75, is: '50% 50%'}, |
142 {at: 1, is: '50% 50%'}, | 142 {at: 1, is: '50% 50%'}, |
143 ]); | 143 ]); |
144 | 144 |
145 // right-center | 145 // right-center |
146 assertInterpolation({ | 146 assertInterpolation({ |
147 property: 'background-position', | 147 property: 'background-position', |
148 from: 'center center', | 148 from: 'center center', |
149 to: 'right 20px center', | 149 to: 'right 20px center', |
150 }, [ | 150 }, [ |
151 {at: 0, is: '50% 50%'}, | 151 {at: 0, is: 'left 50% top 50%'}, |
152 {at: 0.25, is: 'calc(-5px + 62.5%) 50%'}, | 152 {at: 0.25, is: 'left calc(-5px + 62.5%) top 50%'}, |
153 {at: 0.5, is: 'calc(-10px + 75%) 50%'}, | 153 {at: 0.5, is: 'left calc(-10px + 75%) top 50%'}, |
154 {at: 0.75, is: 'calc(-15px + 87.5%) 50%'}, | 154 {at: 0.75, is: 'left calc(-15px + 87.5%) top 50%'}, |
155 {at: 1, is: 'calc(-20px + 100%) 50%'}, | 155 {at: 1, is: 'left calc(-20px + 100%) top 50%'}, |
156 ]); | 156 ]); |
157 | 157 |
158 // left-bottom | 158 // left-bottom |
159 assertInterpolation({ | 159 assertInterpolation({ |
160 property: 'background-position', | 160 property: 'background-position', |
161 from: 'center center', | 161 from: 'center center', |
162 to: 'left 20px bottom 20px', | 162 to: 'left 20px bottom 20px', |
163 }, [ | 163 }, [ |
164 {at: 0, is: '50% 50%'}, | 164 {at: 0, is: '50% 50%'}, |
165 {at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, | 165 {at: 0.25, is: 'calc(5px + 37.5%) calc(-5px + 62.5%)'}, |
166 {at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'}, | 166 {at: 0.5, is: 'calc(10px + 25%) calc(-10px + 75%)'}, |
167 {at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, | 167 {at: 0.75, is: 'calc(15px + 12.5%) calc(-15px + 87.5%)'}, |
168 {at: 1, is: '20px calc(-20px + 100%)'}, | 168 {at: 1, is: '20px calc(-20px + 100%)'}, |
169 ]); | 169 ]); |
170 | 170 |
171 // center-bottom | 171 // center-bottom |
172 assertInterpolation({ | 172 assertInterpolation({ |
173 property: 'background-position', | 173 property: 'background-position', |
174 from: 'center center', | 174 from: 'center center', |
175 to: 'center bottom 20px', | 175 to: 'center bottom 20px', |
176 }, [ | 176 }, [ |
177 {at: 0, is: '50% 50%'}, | 177 {at: 0, is: 'left 50% top 50%'}, |
178 {at: 0.25, is: '50% calc(-5px + 62.5%)'}, | 178 {at: 0.25, is: 'left 50% top calc(-5px + 62.5%)'}, |
179 {at: 0.5, is: '50% calc(-10px + 75%)'}, | 179 {at: 0.5, is: 'left 50% top calc(-10px + 75%)'}, |
180 {at: 0.75, is: '50% calc(-15px + 87.5%)'}, | 180 {at: 0.75, is: 'left 50% top calc(-15px + 87.5%)'}, |
181 {at: 1, is: '50% calc(-20px + 100%)'}, | 181 {at: 1, is: 'left 50% top calc(-20px + 100%)'}, |
182 ]); | 182 ]); |
183 | 183 |
184 // right-bottom | 184 // right-bottom |
185 assertInterpolation({ | 185 assertInterpolation({ |
186 property: 'background-position', | 186 property: 'background-position', |
187 from: 'center center', | 187 from: 'center center', |
188 to: 'right 20px bottom 20px', | 188 to: 'right 20px bottom 20px', |
189 }, [ | 189 }, [ |
190 {at: 0, is: '50% 50%'}, | 190 {at: 0, is: '50% 50%'}, |
191 {at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, | 191 {at: 0.25, is: 'calc(-5px + 62.5%) calc(-5px + 62.5%)'}, |
192 {at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'}, | 192 {at: 0.5, is: 'calc(-10px + 75%) calc(-10px + 75%)'}, |
193 {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, | 193 {at: 0.75, is: 'calc(-15px + 87.5%) calc(-15px + 87.5%)'}, |
194 {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'}, | 194 {at: 1, is: 'calc(-20px + 100%) calc(-20px + 100%)'}, |
195 ]); | 195 ]); |
196 | |
197 // Single values | |
198 assertInterpolation({ | |
199 property: 'background-position', | |
200 from: 'center', | |
201 to: 'bottom', | |
202 }, [ | |
203 {at: 0, is: '50% 50%'}, | |
204 {at: 0.25, is: '50% 62.5%'}, | |
205 {at: 0.5, is: '50% 75%'}, | |
206 {at: 0.75, is: '50% 87.5%'}, | |
207 {at: 1, is: '50% 100%'}, | |
208 ]); | |
209 </script> | 196 </script> |
210 </body> | 197 </body> |
OLD | NEW |