Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1932)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/backgrounds/background-position-parsing-2.html

Issue 1715513002: Move background related shorthands into CSSPropertyParser (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Rebase test Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/backgrounds/background-position-parsing-2-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <script src="../../resources/js-test.js"></script> 4 <script src="../../resources/js-test.js"></script>
5 </head> 5 </head>
6 <body> 6 <body>
7 <script> 7 <script>
8 description("Test to make sure background-position is parsed correctly.") 8 description("Test to make sure background-position is parsed correctly.")
9 9
10 var testContainer = document.createElement("div"); 10 var testContainer = document.createElement("div");
11 document.body.appendChild(testContainer); 11 document.body.appendChild(testContainer);
12 12
13 testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test"> hello</div></div>'; 13 testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test"> hello</div></div>';
14 14
15 e = document.getElementById('test'); 15 e = document.getElementById('test');
16 style = e.style; 16 style = e.style;
17 computedStyle = window.getComputedStyle(e, null); 17 computedStyle = window.getComputedStyle(e, null);
18 18
19 style.backgroundImage = "url(resources/diamond.png)"; 19 style.backgroundImage = "url(resources/diamond.png)";
20 style.backgroundRepeat = "no-repeat"; 20 style.backgroundRepeat = "no-repeat";
21 21
22 debug("background-position with one value"); 22 debug("background-position with one value");
23 // Initial test. 23 // Initial test.
24 shouldBe("computedStyle.backgroundPosition", "'0% 0%'"); 24 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
25 25
26 style.backgroundPosition = "70%"; 26 style.backgroundPosition = "70%";
27 // Second value is assuming to be 'center' 27 // Second value is assuming to be 'center'
28 shouldBe("style.backgroundPosition", "'70% 50%'"); 28 shouldBe("style.backgroundPosition", "'70% center'");
29 shouldBe("computedStyle.backgroundPosition", "'70% 50%'"); 29 shouldBe("computedStyle.backgroundPosition", "'70% 50%'");
30 30
31 style.backgroundPosition = "84px"; 31 style.backgroundPosition = "84px";
32 shouldBe("style.backgroundPosition", "'84px 50%'"); 32 shouldBe("style.backgroundPosition", "'84px center'");
33 shouldBe("computedStyle.backgroundPosition", "'84px 50%'"); 33 shouldBe("computedStyle.backgroundPosition", "'84px 50%'");
34 34
35 style.backgroundPosition = "left"; 35 style.backgroundPosition = "left";
36 shouldBe("style.backgroundPosition", "'0% 50%'"); 36 shouldBe("style.backgroundPosition", "'left center'");
37 shouldBe("computedStyle.backgroundPosition", "'0% 50%'"); 37 shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
38 38
39 style.backgroundPosition = "right"; 39 style.backgroundPosition = "right";
40 shouldBe("style.backgroundPosition", "'100% 50%'"); 40 shouldBe("style.backgroundPosition", "'right center'");
41 shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); 41 shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
42 42
43 style.backgroundPosition = "bottom"; 43 style.backgroundPosition = "bottom";
44 shouldBe("style.backgroundPosition", "'50% 100%'"); 44 shouldBe("style.backgroundPosition", "'center bottom'");
45 shouldBe("computedStyle.backgroundPosition", "'50% 100%'"); 45 shouldBe("computedStyle.backgroundPosition", "'50% 100%'");
46 46
47 style.backgroundPosition = "top"; 47 style.backgroundPosition = "top";
48 shouldBe("style.backgroundPosition", "'50% 0%'"); 48 shouldBe("style.backgroundPosition", "'center top'");
49 shouldBe("computedStyle.backgroundPosition", "'50% 0%'"); 49 shouldBe("computedStyle.backgroundPosition", "'50% 0%'");
50 50
51 style.backgroundPosition = "center"; 51 style.backgroundPosition = "center";
52 shouldBe("style.backgroundPosition", "'50% 50%'"); 52 shouldBe("style.backgroundPosition", "'center center'");
53 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 53 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
54 54
55 debug("background-position with two values"); 55 debug("background-position with two values");
56 style.backgroundPosition = "left bottom"; 56 style.backgroundPosition = "left bottom";
57 shouldBe("style.backgroundPosition", "'0% 100%'"); 57 shouldBe("style.backgroundPosition", "'left bottom'");
58 shouldBe("computedStyle.backgroundPosition", "'0% 100%'"); 58 shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
59 59
60 style.backgroundPosition = "bottom left"; 60 style.backgroundPosition = "bottom left";
61 shouldBe("style.backgroundPosition", "'0% 100%'"); 61 shouldBe("style.backgroundPosition", "'left bottom'");
62 shouldBe("computedStyle.backgroundPosition", "'0% 100%'"); 62 shouldBe("computedStyle.backgroundPosition", "'0% 100%'");
63 63
64 style.backgroundPosition = "100% bottom"; 64 style.backgroundPosition = "100% bottom";
65 shouldBe("style.backgroundPosition", "'100% 100%'"); 65 shouldBe("style.backgroundPosition", "'100% bottom'");
66 shouldBe("computedStyle.backgroundPosition", "'100% 100%'"); 66 shouldBe("computedStyle.backgroundPosition", "'100% 100%'");
67 67
68 style.backgroundPosition = "100% top"; 68 style.backgroundPosition = "100% top";
69 shouldBe("style.backgroundPosition", "'100% 0%'"); 69 shouldBe("style.backgroundPosition", "'100% top'");
70 shouldBe("computedStyle.backgroundPosition", "'100% 0%'"); 70 shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
71 71
72 style.backgroundPosition = "54px bottom"; 72 style.backgroundPosition = "54px bottom";
73 shouldBe("style.backgroundPosition", "'54px 100%'"); 73 shouldBe("style.backgroundPosition", "'54px bottom'");
74 shouldBe("computedStyle.backgroundPosition", "'54px 100%'"); 74 shouldBe("computedStyle.backgroundPosition", "'54px 100%'");
75 75
76 style.backgroundPosition = "center center"; 76 style.backgroundPosition = "center center";
77 shouldBe("style.backgroundPosition", "'50% 50%'"); 77 shouldBe("style.backgroundPosition", "'center center'");
78 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 78 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
79 79
80 style.backgroundPosition = "5% bottom"; 80 style.backgroundPosition = "5% bottom";
81 shouldBe("style.backgroundPosition", "'5% 100%'"); 81 shouldBe("style.backgroundPosition", "'5% bottom'");
82 shouldBe("computedStyle.backgroundPosition", "'5% 100%'"); 82 shouldBe("computedStyle.backgroundPosition", "'5% 100%'");
83 83
84 style.backgroundPosition = "30pt -20px"; 84 style.backgroundPosition = "30pt -20px";
85 shouldBe("style.backgroundPosition", "'30pt -20px'"); 85 shouldBe("style.backgroundPosition", "'30pt -20px'");
86 shouldBe("computedStyle.backgroundPosition", "'40px -20px'"); 86 shouldBe("computedStyle.backgroundPosition", "'40px -20px'");
87 87
88 style.backgroundPosition = "right center"; 88 style.backgroundPosition = "right center";
89 shouldBe("style.backgroundPosition", "'100% 50%'"); 89 shouldBe("style.backgroundPosition", "'right center'");
90 shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); 90 shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
91 91
92 style.backgroundPosition = "100% 0"; 92 style.backgroundPosition = "100% 0";
93 shouldBe("style.backgroundPosition", "'100% 0px'"); 93 shouldBe("style.backgroundPosition", "'100% 0px'");
94 shouldBe("computedStyle.backgroundPosition", "'100% 0px'"); 94 shouldBe("computedStyle.backgroundPosition", "'100% 0px'");
95 95
96 style.backgroundPosition = "center right"; 96 style.backgroundPosition = "center right";
97 shouldBe("style.backgroundPosition", "'100% 50%'"); 97 shouldBe("style.backgroundPosition", "'right center'");
98 shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); 98 shouldBe("computedStyle.backgroundPosition", "'100% 50%'");
99 99
100 style.backgroundPosition = "center 50%"; 100 style.backgroundPosition = "center 50%";
101 shouldBe("style.backgroundPosition", "'50% 50%'"); 101 shouldBe("style.backgroundPosition", "'center 50%'");
102 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 102 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
103 103
104 style.backgroundPosition = "center left"; 104 style.backgroundPosition = "center left";
105 shouldBe("style.backgroundPosition", "'0% 50%'"); 105 shouldBe("style.backgroundPosition", "'left center'");
106 shouldBe("computedStyle.backgroundPosition", "'0% 50%'"); 106 shouldBe("computedStyle.backgroundPosition", "'0% 50%'");
107 107
108 style.backgroundPosition = "-20% center"; 108 style.backgroundPosition = "-20% center";
109 shouldBe("style.backgroundPosition", "'-20% 50%'"); 109 shouldBe("style.backgroundPosition", "'-20% center'");
110 shouldBe("computedStyle.backgroundPosition", "'-20% 50%'"); 110 shouldBe("computedStyle.backgroundPosition", "'-20% 50%'");
111 111
112 style.backgroundPosition = "top right"; 112 style.backgroundPosition = "top right";
113 shouldBe("style.backgroundPosition", "'100% 0%'"); 113 shouldBe("style.backgroundPosition", "'right top'");
114 shouldBe("computedStyle.backgroundPosition", "'100% 0%'"); 114 shouldBe("computedStyle.backgroundPosition", "'100% 0%'");
115 115
116 style.backgroundPosition = "50% center"; 116 style.backgroundPosition = "50% center";
117 shouldBe("style.backgroundPosition", "'50% 50%'"); 117 shouldBe("style.backgroundPosition", "'50% center'");
118 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 118 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
119 119
120 debug("background-position invalid with one or two values, no change expected"); 120 debug("background-position invalid with one or two values, no change expected");
121 style.backgroundPosition = "5 right"; 121 style.backgroundPosition = "5 right";
122 shouldBe("style.backgroundPosition", "'50% 50%'"); 122 shouldBe("style.backgroundPosition", "'50% center'");
123 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 123 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
124 124
125 style.backgroundPosition = "0 right"; 125 style.backgroundPosition = "0 right";
126 shouldBe("style.backgroundPosition", "'50% 50%'"); 126 shouldBe("style.backgroundPosition", "'50% center'");
127 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 127 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
128 128
129 style.backgroundPosition = "0px right"; 129 style.backgroundPosition = "0px right";
130 shouldBe("style.backgroundPosition", "'50% 50%'"); 130 shouldBe("style.backgroundPosition", "'50% center'");
131 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 131 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
132 132
133 style.backgroundPosition = "top 108px"; 133 style.backgroundPosition = "top 108px";
134 shouldBe("style.backgroundPosition", "'50% 50%'"); 134 shouldBe("style.backgroundPosition", "'50% center'");
135 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 135 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
136 136
137 style.backgroundPosition = "top 100%"; 137 style.backgroundPosition = "top 100%";
138 shouldBe("style.backgroundPosition", "'50% 50%'"); 138 shouldBe("style.backgroundPosition", "'50% center'");
139 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 139 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
140 140
141 style.backgroundPosition = "60 50%"; 141 style.backgroundPosition = "60 50%";
142 shouldBe("style.backgroundPosition", "'50% 50%'"); 142 shouldBe("style.backgroundPosition", "'50% center'");
143 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 143 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
144 144
145 style.backgroundPosition = "hidden"; 145 style.backgroundPosition = "hidden";
146 shouldBe("style.backgroundPosition", "'50% 50%'"); 146 shouldBe("style.backgroundPosition", "'50% center'");
147 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 147 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
148 148
149 style.backgroundPosition = "hidden solid"; 149 style.backgroundPosition = "hidden solid";
150 shouldBe("style.backgroundPosition", "'50% 50%'"); 150 shouldBe("style.backgroundPosition", "'50% center'");
151 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 151 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
152 152
153 style.backgroundPosition = "bottombottom"; 153 style.backgroundPosition = "bottombottom";
154 shouldBe("style.backgroundPosition", "'50% 50%'"); 154 shouldBe("style.backgroundPosition", "'50% center'");
155 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 155 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
156 156
157 style.backgroundPosition = "left left"; 157 style.backgroundPosition = "left left";
158 shouldBe("style.backgroundPosition", "'50% 50%'"); 158 shouldBe("style.backgroundPosition", "'50% center'");
159 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 159 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
160 160
161 style.backgroundPosition = "left right"; 161 style.backgroundPosition = "left right";
162 shouldBe("style.backgroundPosition", "'50% 50%'"); 162 shouldBe("style.backgroundPosition", "'50% center'");
163 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 163 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
164 164
165 style.backgroundPosition = "top top"; 165 style.backgroundPosition = "top top";
166 shouldBe("style.backgroundPosition", "'50% 50%'"); 166 shouldBe("style.backgroundPosition", "'50% center'");
167 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 167 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
168 168
169 style.backgroundPosition = "50% left"; 169 style.backgroundPosition = "50% left";
170 shouldBe("style.backgroundPosition", "'50% 50%'"); 170 shouldBe("style.backgroundPosition", "'50% center'");
171 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 171 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
172 172
173 style.backgroundPosition = "50"; 173 style.backgroundPosition = "50";
174 shouldBe("style.backgroundPosition", "'50% 50%'"); 174 shouldBe("style.backgroundPosition", "'50% center'");
175 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 175 shouldBe("computedStyle.backgroundPosition", "'50% 50%'");
176 176
177 style.backgroundPosition = "1px+1px"; 177 style.backgroundPosition = "1px+1px";
178 shouldBe("style.backgroundPosition", "'1px 1px'"); 178 shouldBe("style.backgroundPosition", "'1px 1px'");
179 shouldBe("computedStyle.backgroundPosition", "'1px 1px'"); 179 shouldBe("computedStyle.backgroundPosition", "'1px 1px'");
180 180
181 debug("background-position with CSS3 comma separator, one or two values"); 181 debug("background-position with CSS3 comma separator, one or two values");
182 style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)"; 182 style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
183 style.backgroundRepeat = "no-repeat"; 183 style.backgroundRepeat = "no-repeat";
184 184
185 style.backgroundPosition = "50%, 100%"; 185 style.backgroundPosition = "50%, 100%";
186 shouldBe("style.backgroundPosition", "'50% 50%, 100% 50%'"); 186 shouldBe("style.backgroundPosition", "'50% center, 100% center'");
187 shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'"); 187 shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'");
188 188
189 style.backgroundPosition = "top, bottom"; 189 style.backgroundPosition = "top, bottom";
190 shouldBe("style.backgroundPosition", "'50% 0%, 50% 100%'"); 190 shouldBe("style.backgroundPosition", "'center top, center bottom'");
191 shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'"); 191 shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'");
192 192
193 style.backgroundPosition = "right center, 5px bottom"; 193 style.backgroundPosition = "right center, 5px bottom";
194 shouldBe("style.backgroundPosition", "'100% 50%, 5px 100%'"); 194 shouldBe("style.backgroundPosition", "'right center, 5px bottom'");
195 shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'"); 195 shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'");
196 196
197 style.backgroundPosition = "top left, bottom right"; 197 style.backgroundPosition = "top left, bottom right";
198 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'"); 198 shouldBe("style.backgroundPosition", "'left top, right bottom'");
199 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 199 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
200 200
201 debug("background-position with CSS3 comma separator, with invalid one or two va lues, no change expected"); 201 debug("background-position with CSS3 comma separator, with invalid one or two va lues, no change expected");
202 style.backgroundPosition = "0 center, right right"; 202 style.backgroundPosition = "0 center, right right";
203 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'"); 203 shouldBe("style.backgroundPosition", "'left top, right bottom'");
204 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 204 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
205 205
206 style.backgroundPosition = "center right, right right"; 206 style.backgroundPosition = "center right, right right";
207 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'"); 207 shouldBe("style.backgroundPosition", "'left top, right bottom'");
208 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 208 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
209 209
210 style.backgroundPosition = "center 20px, solid 20px"; 210 style.backgroundPosition = "center 20px, solid 20px";
211 shouldBe("style.backgroundPosition", "'0% 0%, 100% 100%'"); 211 shouldBe("style.backgroundPosition", "'left top, right bottom'");
212 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 212 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'");
213 213
214 debug("background-position with CSS3 four values"); 214 debug("background-position with CSS3 four values");
215 style.backgroundImage = "url(resources/diamond.png)"; 215 style.backgroundImage = "url(resources/diamond.png)";
216 style.backgroundPosition = "left 10px top 15px"; 216 style.backgroundPosition = "left 10px top 15px";
217 shouldBe("style.backgroundPosition", "'left 10px top 15px'"); 217 shouldBe("style.backgroundPosition", "'left 10px top 15px'");
218 shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px'"); 218 shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px'");
219 219
220 style.backgroundPosition = "left 10% top 30%"; 220 style.backgroundPosition = "left 10% top 30%";
221 shouldBe("style.backgroundPosition", "'left 10% top 30%'"); 221 shouldBe("style.backgroundPosition", "'left 10% top 30%'");
222 shouldBe("computedStyle.backgroundPosition", "'left 10% top 30%'"); 222 shouldBe("computedStyle.backgroundPosition", "'left 10% top 30%'");
223 223
224 style.backgroundPosition = "top 10% left 30%"; 224 style.backgroundPosition = "top 10% left 30%";
225 shouldBe("style.backgroundPosition", "'left 30% top 10%'"); 225 shouldBe("style.backgroundPosition", "'left 30% top 10%'");
226 shouldBe("computedStyle.backgroundPosition", "'left 30% top 10%'"); 226 shouldBe("computedStyle.backgroundPosition", "'left 30% top 10%'");
227 227
228 style.backgroundPosition = "right top 15px"; 228 style.backgroundPosition = "right top 15px";
229 shouldBe("style.backgroundPosition", "'right 0% top 15px'"); 229 shouldBe("style.backgroundPosition", "'right top 15px'");
230 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px'"); 230 shouldBe("computedStyle.backgroundPosition", "'100% top 15px'");
231 231
232 style.backgroundPosition = "left 10px center"; 232 style.backgroundPosition = "left 10px center";
233 shouldBe("style.backgroundPosition", "'left 10px top 50%'"); 233 shouldBe("style.backgroundPosition", "'left 10px center'");
234 shouldBe("computedStyle.backgroundPosition", "'left 10px top 50%'"); 234 shouldBe("computedStyle.backgroundPosition", "'left 10px 50%'");
235 235
236 style.backgroundPosition = "center top 20px"; 236 style.backgroundPosition = "center top 20px";
237 shouldBe("style.backgroundPosition", "'left 50% top 20px'"); 237 shouldBe("style.backgroundPosition", "'center top 20px'");
238 shouldBe("computedStyle.backgroundPosition", "'left 50% top 20px'"); 238 shouldBe("computedStyle.backgroundPosition", "'50% top 20px'");
239 239
240 style.backgroundPosition = "top 20px center"; 240 style.backgroundPosition = "top 20px center";
241 shouldBe("style.backgroundPosition", "'left 50% top 20px'"); 241 shouldBe("style.backgroundPosition", "'center top 20px'");
242 shouldBe("computedStyle.backgroundPosition", "'left 50% top 20px'"); 242 shouldBe("computedStyle.backgroundPosition", "'50% top 20px'");
243 243
244 style.backgroundPosition = "center left 30px"; 244 style.backgroundPosition = "center left 30px";
245 shouldBe("style.backgroundPosition", "'left 30px top 50%'"); 245 shouldBe("style.backgroundPosition", "'left 30px center'");
246 shouldBe("computedStyle.backgroundPosition", "'left 30px top 50%'"); 246 shouldBe("computedStyle.backgroundPosition", "'left 30px 50%'");
247
248 style.backgroundPosition = "left 20% top";
249 shouldBe("style.backgroundPosition", "'left 20% top'");
250 shouldBe("computedStyle.backgroundPosition", "'left 20% 0%'");
247 251
248 style.backgroundPosition = ""; 252 style.backgroundPosition = "";
249 shouldBe("style.backgroundPosition", "''"); 253 shouldBe("style.backgroundPosition", "''");
250 shouldBe("computedStyle.backgroundPosition", "'0% 0%'"); 254 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
251 255
252 style.backgroundPosition = "left 20% top";
253 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
254 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
255
256 debug("background-position with CSS3 invalid four values, no change expected"); 256 debug("background-position with CSS3 invalid four values, no change expected");
257 style.backgroundPosition = "left center top"; 257 style.backgroundPosition = "left center top";
258 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 258 shouldBe("style.backgroundPosition", "''");
259 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 259 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
260 260
261 style.backgroundPosition = "0px right top"; 261 style.backgroundPosition = "0px right top";
262 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 262 shouldBe("style.backgroundPosition", "''");
263 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 263 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
264 264
265 style.backgroundPosition = "left center top center"; 265 style.backgroundPosition = "left center top center";
266 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 266 shouldBe("style.backgroundPosition", "''");
267 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 267 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
268 268
269 style.backgroundPosition = "left center top 20%"; 269 style.backgroundPosition = "left center top 20%";
270 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 270 shouldBe("style.backgroundPosition", "''");
271 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 271 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
272 272
273 style.backgroundPosition = "center bottom top 20%"; 273 style.backgroundPosition = "center bottom top 20%";
274 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 274 shouldBe("style.backgroundPosition", "''");
275 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 275 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
276 276
277 style.backgroundPosition = "right bottom top"; 277 style.backgroundPosition = "right bottom top";
278 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 278 shouldBe("style.backgroundPosition", "''");
279 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 279 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
280 280
281 style.backgroundPosition = "right bottom solid"; 281 style.backgroundPosition = "right bottom solid";
282 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 282 shouldBe("style.backgroundPosition", "''");
283 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 283 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
284 284
285 style.backgroundPosition = "20px bottom top"; 285 style.backgroundPosition = "20px bottom top";
286 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 286 shouldBe("style.backgroundPosition", "''");
287 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 287 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
288 288
289 style.backgroundPosition = "20px bottom hidden"; 289 style.backgroundPosition = "20px bottom hidden";
290 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 290 shouldBe("style.backgroundPosition", "''");
291 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 291 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
292 292
293 style.backgroundPosition = "solid dotted bottom top"; 293 style.backgroundPosition = "solid dotted bottom top";
294 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 294 shouldBe("style.backgroundPosition", "''");
295 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 295 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
296 296
297 style.backgroundPosition = "top top top top"; 297 style.backgroundPosition = "top top top top";
298 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 298 shouldBe("style.backgroundPosition", "''");
299 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 299 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
300 300
301 style.backgroundPosition = "left 0px right 20%"; 301 style.backgroundPosition = "left 0px right 20%";
302 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 302 shouldBe("style.backgroundPosition", "''");
303 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 303 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
304 304
305 style.backgroundPosition = "left 30% top 20% center"; 305 style.backgroundPosition = "left 30% top 20% center";
306 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 306 shouldBe("style.backgroundPosition", "''");
307 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 307 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
308 308
309 style.backgroundPosition = "20px 30% bottom"; 309 style.backgroundPosition = "20px 30% bottom";
310 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 310 shouldBe("style.backgroundPosition", "''");
311 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 311 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
312 312
313 style.backgroundPosition = "top 0px bottom"; 313 style.backgroundPosition = "top 0px bottom";
314 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 314 shouldBe("style.backgroundPosition", "''");
315 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 315 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
316 316
317 style.backgroundPosition = "left 0px right"; 317 style.backgroundPosition = "left 0px right";
318 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 318 shouldBe("style.backgroundPosition", "''");
319 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 319 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
320 320
321 style.backgroundPosition = "top 0px bottom 30px top"; 321 style.backgroundPosition = "top 0px bottom 30px top";
322 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 322 shouldBe("style.backgroundPosition", "''");
323 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 323 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
324 324
325 style.backgroundPosition = "left 10px center 15px"; 325 style.backgroundPosition = "left 10px center 15px";
326 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 326 shouldBe("style.backgroundPosition", "''");
327 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 327 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
328 328
329 style.backgroundPosition = "left 10px top center"; 329 style.backgroundPosition = "left 10px top center";
330 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 330 shouldBe("style.backgroundPosition", "''");
331 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 331 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
332 332
333 style.backgroundPosition = "center right top 20px"; 333 style.backgroundPosition = "center right top 20px";
334 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 334 shouldBe("style.backgroundPosition", "''");
335 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 335 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
336 336
337 style.backgroundPosition = "center 10px center 10px"; 337 style.backgroundPosition = "center 10px center 10px";
338 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 338 shouldBe("style.backgroundPosition", "''");
339 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 339 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
340 340
341 style.backgroundPosition = "top center center"; 341 style.backgroundPosition = "top center center";
342 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 342 shouldBe("style.backgroundPosition", "''");
343 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 343 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
344 344
345 style.backgroundPosition = "center 10px center"; 345 style.backgroundPosition = "center 10px center";
346 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 346 shouldBe("style.backgroundPosition", "''");
347 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 347 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
348 348
349 style.backgroundPosition = "center center 10px"; 349 style.backgroundPosition = "center center 10px";
350 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 350 shouldBe("style.backgroundPosition", "''");
351 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 351 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
352 352
353 style.backgroundPosition = "center 0px left 20%"; 353 style.backgroundPosition = "center 0px left 20%";
354 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 354 shouldBe("style.backgroundPosition", "''");
355 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 355 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
356 356
357 style.backgroundPosition = "left center top"; 357 style.backgroundPosition = "left center top";
358 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 358 shouldBe("style.backgroundPosition", "''");
359 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 359 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
360 360
361 style.backgroundPosition = "center center center"; 361 style.backgroundPosition = "center center center";
362 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 362 shouldBe("style.backgroundPosition", "''");
363 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 363 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
364 364
365 style.backgroundPosition = "top left 50% 50%"; 365 style.backgroundPosition = "top left 50% 50%";
366 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 366 shouldBe("style.backgroundPosition", "''");
367 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 367 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
368 368
369 style.backgroundPosition = "center center center center"; 369 style.backgroundPosition = "center center center center";
370 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 370 shouldBe("style.backgroundPosition", "''");
371 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 371 shouldBe("computedStyle.backgroundPosition", "'0% 0%'");
372 372
373 debug("background-position with CSS3 four values and comma"); 373 debug("background-position with CSS3 four values and comma");
374 style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)"; 374 style.backgroundImage = "url(resources/diamond.png), url(resources/ring.png)";
375 375
376 style.backgroundPosition = "center, left bottom 20px"; 376 style.backgroundPosition = "center, left bottom 20px";
377 shouldBe("style.backgroundPosition", "'50% 50%, left 0% bottom 20px'"); 377 shouldBe("style.backgroundPosition", "'center center, left bottom 20px'");
378 shouldBe("computedStyle.backgroundPosition", "'50% 50%, left 0% bottom 20px'"); 378 shouldBe("computedStyle.backgroundPosition", "'50% 50%, 0% bottom 20px'");
379 379
380 style.backgroundPosition = "right 20px bottom 20px, center left"; 380 style.backgroundPosition = "right 20px bottom 20px, center left";
381 shouldBe("style.backgroundPosition", "'right 20px bottom 20px, 0% 50%'"); 381 shouldBe("style.backgroundPosition", "'right 20px bottom 20px, left center'");
382 shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'") ; 382 shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'") ;
383 383
384 style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px"; 384 style.backgroundPosition = "left 10px top 15px, right 20% bottom 20px";
385 shouldBe("style.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px '"); 385 shouldBe("style.backgroundPosition", "'left 10px top 15px, right 20% bottom 20px '");
386 shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px, right 20% bot tom 20px'"); 386 shouldBe("computedStyle.backgroundPosition", "'left 10px top 15px, right 20% bot tom 20px'");
387 387
388 style.backgroundPosition = "left 10% top, top 0px right"; 388 style.backgroundPosition = "left 10% top, top 0px right";
389 shouldBe("style.backgroundPosition", "'left 10% top 0%, right 0% top 0px'"); 389 shouldBe("style.backgroundPosition", "'left 10% top, right top 0px'");
390 shouldBe("computedStyle.backgroundPosition", "'left 10% top 0%, right 0% top 0px '"); 390 shouldBe("computedStyle.backgroundPosition", "'left 10% 0%, 100% top 0px'");
391 391
392 style.backgroundPosition = "right top 15px, bottom right 20px"; 392 style.backgroundPosition = "right top 15px, bottom right 20px";
393 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'" ); 393 shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
394 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bot tom 0%'"); 394 shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'") ;
395 395
396 debug("background-position with invalid CSS3 four values and comma, no change ex pected"); 396 debug("background-position with invalid CSS3 four values and comma, no change ex pected");
397 style.backgroundPosition = "right top 15px, left right 20px"; 397 style.backgroundPosition = "right top 15px, left right 20px";
398 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'" ); 398 shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
399 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bot tom 0%'"); 399 shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'") ;
400 400
401 style.backgroundPosition = "right left 15px, left bottom 20px"; 401 style.backgroundPosition = "right left 15px, left bottom 20px";
402 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'" ); 402 shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
403 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bot tom 0%'"); 403 shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'") ;
404 404
405 style.backgroundPosition = "solid, left bottom 20px"; 405 style.backgroundPosition = "solid, left bottom 20px";
406 shouldBe("style.backgroundPosition", "'right 0% top 15px, right 20px bottom 0%'" ); 406 shouldBe("style.backgroundPosition", "'right top 15px, right 20px bottom'");
407 shouldBe("computedStyle.backgroundPosition", "'right 0% top 15px, right 20px bot tom 0%'"); 407 shouldBe("computedStyle.backgroundPosition", "'100% top 15px, right 20px 100%'") ;
408 408
409 debug("background-position inside the background shorthand"); 409 debug("background-position inside the background shorthand");
410 style.background = "top 10% left 30% / 10em gray round fixed border-box"; 410 style.background = "top 10% left 30% / 10em gray round fixed border-box";
411 shouldBe("style.background", "'left 30% top 10% / 10em round fixed border-box bo rder-box gray'"); 411 shouldBe("style.background", "'left 30% top 10% / 10em round fixed border-box bo rder-box gray'");
412 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / 160px border-box border-box'"); 412 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / 160px border-box border-box'");
413 413
414 style.background = "right top 15px / 10em gray round fixed border-box"; 414 style.background = "right top 15px / 10em gray round fixed border-box";
415 shouldBe("style.background", "'right 0% top 15px / 10em round fixed border-box b order-box gray'"); 415 shouldBe("style.background", "'right 0% top 15px / 10em round fixed border-box b order-box gray'");
416 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed right 0% top 15px / 160px border-box border-box'"); 416 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed right 0% top 15px / 160px border-box border-box'");
417 417
(...skipping 109 matching lines...) Expand 10 before | Expand all | Expand 10 after
527 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 527 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
528 528
529 style.background = "20px 20px 30px / 40px gray top left round fixed border-box"; 529 style.background = "20px 20px 30px / 40px gray top left round fixed border-box";
530 shouldBe("style.background", "''"); 530 shouldBe("style.background", "''");
531 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 531 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'");
532 532
533 document.body.removeChild(testContainer); 533 document.body.removeChild(testContainer);
534 </script> 534 </script>
535 </body> 535 </body>
536 </html> 536 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/interpolation/background-position-origin-interpolation-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/backgrounds/background-position-parsing-2-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698