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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 38573003: Use 4 value syntax for getComputedStyle of background-position and -webkit-mask-position (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebased Created 7 years, 1 month 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/animations/resources/animation-test-helpers.js ('k') | 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="../js/resources/js-test-pre.js"></script> 4 <script src="../js/resources/js-test-pre.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", "'left 0% top 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% 50%'");
29 shouldBe("computedStyle.backgroundPosition", "'70% 50%'"); 29 shouldBe("computedStyle.backgroundPosition", "'left 70% top 50%'");
30 30
31 style.backgroundPosition = "84px"; 31 style.backgroundPosition = "84px";
32 shouldBe("style.backgroundPosition", "'84px 50%'"); 32 shouldBe("style.backgroundPosition", "'84px 50%'");
33 shouldBe("computedStyle.backgroundPosition", "'84px 50%'"); 33 shouldBe("computedStyle.backgroundPosition", "'left 84px top 50%'");
34 34
35 style.backgroundPosition = "left"; 35 style.backgroundPosition = "left";
36 shouldBe("style.backgroundPosition", "'0% 50%'"); 36 shouldBe("style.backgroundPosition", "'0% 50%'");
37 shouldBe("computedStyle.backgroundPosition", "'0% 50%'"); 37 shouldBe("computedStyle.backgroundPosition", "'left 0% top 50%'");
38 38
39 style.backgroundPosition = "right"; 39 style.backgroundPosition = "right";
40 shouldBe("style.backgroundPosition", "'100% 50%'"); 40 shouldBe("style.backgroundPosition", "'100% 50%'");
41 shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); 41 shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%'");
42 42
43 style.backgroundPosition = "bottom"; 43 style.backgroundPosition = "bottom";
44 shouldBe("style.backgroundPosition", "'50% 100%'"); 44 shouldBe("style.backgroundPosition", "'50% 100%'");
45 shouldBe("computedStyle.backgroundPosition", "'50% 100%'"); 45 shouldBe("computedStyle.backgroundPosition", "'left 50% top 100%'");
46 46
47 style.backgroundPosition = "top"; 47 style.backgroundPosition = "top";
48 shouldBe("style.backgroundPosition", "'50% 0%'"); 48 shouldBe("style.backgroundPosition", "'50% 0%'");
49 shouldBe("computedStyle.backgroundPosition", "'50% 0%'"); 49 shouldBe("computedStyle.backgroundPosition", "'left 50% top 0%'");
50 50
51 style.backgroundPosition = "center"; 51 style.backgroundPosition = "center";
52 shouldBe("style.backgroundPosition", "'50% 50%'"); 52 shouldBe("style.backgroundPosition", "'50% 50%'");
53 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 53 shouldBe("computedStyle.backgroundPosition", "'left 50% top 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", "'0% 100%'");
58 shouldBe("computedStyle.backgroundPosition", "'0% 100%'"); 58 shouldBe("computedStyle.backgroundPosition", "'left 0% top 100%'");
59 59
60 style.backgroundPosition = "bottom left"; 60 style.backgroundPosition = "bottom left";
61 shouldBe("style.backgroundPosition", "'0% 100%'"); 61 shouldBe("style.backgroundPosition", "'0% 100%'");
62 shouldBe("computedStyle.backgroundPosition", "'0% 100%'"); 62 shouldBe("computedStyle.backgroundPosition", "'left 0% top 100%'");
63 63
64 style.backgroundPosition = "100% bottom"; 64 style.backgroundPosition = "100% bottom";
65 shouldBe("style.backgroundPosition", "'100% 100%'"); 65 shouldBe("style.backgroundPosition", "'100% 100%'");
66 shouldBe("computedStyle.backgroundPosition", "'100% 100%'"); 66 shouldBe("computedStyle.backgroundPosition", "'left 100% top 100%'");
67 67
68 style.backgroundPosition = "100% top"; 68 style.backgroundPosition = "100% top";
69 shouldBe("style.backgroundPosition", "'100% 0%'"); 69 shouldBe("style.backgroundPosition", "'100% 0%'");
70 shouldBe("computedStyle.backgroundPosition", "'100% 0%'"); 70 shouldBe("computedStyle.backgroundPosition", "'left 100% top 0%'");
71 71
72 style.backgroundPosition = "54px bottom"; 72 style.backgroundPosition = "54px bottom";
73 shouldBe("style.backgroundPosition", "'54px 100%'"); 73 shouldBe("style.backgroundPosition", "'54px 100%'");
74 shouldBe("computedStyle.backgroundPosition", "'54px 100%'"); 74 shouldBe("computedStyle.backgroundPosition", "'left 54px top 100%'");
75 75
76 style.backgroundPosition = "center center"; 76 style.backgroundPosition = "center center";
77 shouldBe("style.backgroundPosition", "'50% 50%'"); 77 shouldBe("style.backgroundPosition", "'50% 50%'");
78 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 78 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
79 79
80 style.backgroundPosition = "5% bottom"; 80 style.backgroundPosition = "5% bottom";
81 shouldBe("style.backgroundPosition", "'5% 100%'"); 81 shouldBe("style.backgroundPosition", "'5% 100%'");
82 shouldBe("computedStyle.backgroundPosition", "'5% 100%'"); 82 shouldBe("computedStyle.backgroundPosition", "'left 5% top 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", "'left 40px top -20px'");
87 87
88 style.backgroundPosition = "right center"; 88 style.backgroundPosition = "right center";
89 shouldBe("style.backgroundPosition", "'100% 50%'"); 89 shouldBe("style.backgroundPosition", "'100% 50%'");
90 shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); 90 shouldBe("computedStyle.backgroundPosition", "'left 100% top 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", "'left 100% top 0px'");
95 95
96 style.backgroundPosition = "center right"; 96 style.backgroundPosition = "center right";
97 shouldBe("style.backgroundPosition", "'100% 50%'"); 97 shouldBe("style.backgroundPosition", "'100% 50%'");
98 shouldBe("computedStyle.backgroundPosition", "'100% 50%'"); 98 shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%'");
99 99
100 style.backgroundPosition = "center 50%"; 100 style.backgroundPosition = "center 50%";
101 shouldBe("style.backgroundPosition", "'50% 50%'"); 101 shouldBe("style.backgroundPosition", "'50% 50%'");
102 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 102 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
103 103
104 style.backgroundPosition = "center left"; 104 style.backgroundPosition = "center left";
105 shouldBe("style.backgroundPosition", "'0% 50%'"); 105 shouldBe("style.backgroundPosition", "'0% 50%'");
106 shouldBe("computedStyle.backgroundPosition", "'0% 50%'"); 106 shouldBe("computedStyle.backgroundPosition", "'left 0% top 50%'");
107 107
108 style.backgroundPosition = "-20% center"; 108 style.backgroundPosition = "-20% center";
109 shouldBe("style.backgroundPosition", "'-20% 50%'"); 109 shouldBe("style.backgroundPosition", "'-20% 50%'");
110 shouldBe("computedStyle.backgroundPosition", "'-20% 50%'"); 110 shouldBe("computedStyle.backgroundPosition", "'left -20% top 50%'");
111 111
112 style.backgroundPosition = "top right"; 112 style.backgroundPosition = "top right";
113 shouldBe("style.backgroundPosition", "'100% 0%'"); 113 shouldBe("style.backgroundPosition", "'100% 0%'");
114 shouldBe("computedStyle.backgroundPosition", "'100% 0%'"); 114 shouldBe("computedStyle.backgroundPosition", "'left 100% top 0%'");
115 115
116 style.backgroundPosition = "50% center"; 116 style.backgroundPosition = "50% center";
117 shouldBe("style.backgroundPosition", "'50% 50%'"); 117 shouldBe("style.backgroundPosition", "'50% 50%'");
118 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 118 shouldBe("computedStyle.backgroundPosition", "'left 50% top 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% 50%'");
123 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 123 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
124 124
125 style.backgroundPosition = "0 right"; 125 style.backgroundPosition = "0 right";
126 shouldBe("style.backgroundPosition", "'50% 50%'"); 126 shouldBe("style.backgroundPosition", "'50% 50%'");
127 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 127 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
128 128
129 style.backgroundPosition = "0px right"; 129 style.backgroundPosition = "0px right";
130 shouldBe("style.backgroundPosition", "'50% 50%'"); 130 shouldBe("style.backgroundPosition", "'50% 50%'");
131 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 131 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
132 132
133 style.backgroundPosition = "top 108px"; 133 style.backgroundPosition = "top 108px";
134 shouldBe("style.backgroundPosition", "'50% 50%'"); 134 shouldBe("style.backgroundPosition", "'50% 50%'");
135 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 135 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
136 136
137 style.backgroundPosition = "top 100%"; 137 style.backgroundPosition = "top 100%";
138 shouldBe("style.backgroundPosition", "'50% 50%'"); 138 shouldBe("style.backgroundPosition", "'50% 50%'");
139 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 139 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
140 140
141 style.backgroundPosition = "60 50%"; 141 style.backgroundPosition = "60 50%";
142 shouldBe("style.backgroundPosition", "'50% 50%'"); 142 shouldBe("style.backgroundPosition", "'50% 50%'");
143 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 143 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
144 144
145 style.backgroundPosition = "hidden"; 145 style.backgroundPosition = "hidden";
146 shouldBe("style.backgroundPosition", "'50% 50%'"); 146 shouldBe("style.backgroundPosition", "'50% 50%'");
147 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 147 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
148 148
149 style.backgroundPosition = "hidden solid"; 149 style.backgroundPosition = "hidden solid";
150 shouldBe("style.backgroundPosition", "'50% 50%'"); 150 shouldBe("style.backgroundPosition", "'50% 50%'");
151 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 151 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
152 152
153 style.backgroundPosition = "bottombottom"; 153 style.backgroundPosition = "bottombottom";
154 shouldBe("style.backgroundPosition", "'50% 50%'"); 154 shouldBe("style.backgroundPosition", "'50% 50%'");
155 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 155 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
156 156
157 style.backgroundPosition = "left left"; 157 style.backgroundPosition = "left left";
158 shouldBe("style.backgroundPosition", "'50% 50%'"); 158 shouldBe("style.backgroundPosition", "'50% 50%'");
159 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 159 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
160 160
161 style.backgroundPosition = "left right"; 161 style.backgroundPosition = "left right";
162 shouldBe("style.backgroundPosition", "'50% 50%'"); 162 shouldBe("style.backgroundPosition", "'50% 50%'");
163 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 163 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
164 164
165 style.backgroundPosition = "top top"; 165 style.backgroundPosition = "top top";
166 shouldBe("style.backgroundPosition", "'50% 50%'"); 166 shouldBe("style.backgroundPosition", "'50% 50%'");
167 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 167 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
168 168
169 style.backgroundPosition = "50% left"; 169 style.backgroundPosition = "50% left";
170 shouldBe("style.backgroundPosition", "'50% 50%'"); 170 shouldBe("style.backgroundPosition", "'50% 50%'");
171 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 171 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%'");
172 172
173 style.backgroundPosition = "50"; 173 style.backgroundPosition = "50";
174 shouldBe("style.backgroundPosition", "'50% 50%'"); 174 shouldBe("style.backgroundPosition", "'50% 50%'");
175 shouldBe("computedStyle.backgroundPosition", "'50% 50%'"); 175 shouldBe("computedStyle.backgroundPosition", "'left 50% top 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", "'left 1px top 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% 50%, 100% 50%'");
187 shouldBe("computedStyle.backgroundPosition", "'50% 50%, 100% 50%'"); 187 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%, left 100% top 5 0%'");
188 188
189 style.backgroundPosition = "top, bottom"; 189 style.backgroundPosition = "top, bottom";
190 shouldBe("style.backgroundPosition", "'50% 0%, 50% 100%'"); 190 shouldBe("style.backgroundPosition", "'50% 0%, 50% 100%'");
191 shouldBe("computedStyle.backgroundPosition", "'50% 0%, 50% 100%'"); 191 shouldBe("computedStyle.backgroundPosition", "'left 50% top 0%, left 50% top 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", "'100% 50%, 5px 100%'");
195 shouldBe("computedStyle.backgroundPosition", "'100% 50%, 5px 100%'"); 195 shouldBe("computedStyle.backgroundPosition", "'left 100% top 50%, left 5px top 1 00%'");
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", "'0% 0%, 100% 100%'");
199 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 199 shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 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", "'0% 0%, 100% 100%'");
204 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 204 shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 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", "'0% 0%, 100% 100%'");
208 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 208 shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 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", "'0% 0%, 100% 100%'");
212 shouldBe("computedStyle.backgroundPosition", "'0% 0%, 100% 100%'"); 212 shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%, left 100% top 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%'");
(...skipping 17 matching lines...) Expand all
240 style.backgroundPosition = "top 20px center"; 240 style.backgroundPosition = "top 20px center";
241 shouldBe("style.backgroundPosition", "'left 50% top 20px'"); 241 shouldBe("style.backgroundPosition", "'left 50% top 20px'");
242 shouldBe("computedStyle.backgroundPosition", "'left 50% top 20px'"); 242 shouldBe("computedStyle.backgroundPosition", "'left 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 top 50%'");
246 shouldBe("computedStyle.backgroundPosition", "'left 30px top 50%'"); 246 shouldBe("computedStyle.backgroundPosition", "'left 30px top 50%'");
247 247
248 style.backgroundPosition = ""; 248 style.backgroundPosition = "";
249 shouldBe("style.backgroundPosition", "''"); 249 shouldBe("style.backgroundPosition", "''");
250 shouldBe("computedStyle.backgroundPosition", "'0% 0%'"); 250 shouldBe("computedStyle.backgroundPosition", "'left 0% top 0%'");
251 251
252 style.backgroundPosition = "left 20% top"; 252 style.backgroundPosition = "left 20% top";
253 shouldBe("style.backgroundPosition", "'left 20% top 0%'"); 253 shouldBe("style.backgroundPosition", "'left 20% top 0%'");
254 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 254 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
255 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", "'left 20% top 0%'");
259 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 259 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'");
260 260
(...skipping 107 matching lines...) Expand 10 before | Expand all | Expand 10 after
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", "'left 20% top 0%'");
371 shouldBe("computedStyle.backgroundPosition", "'left 20% top 0%'"); 371 shouldBe("computedStyle.backgroundPosition", "'left 20% top 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", "'50% 50%, left 0% bottom 20px'");
378 shouldBe("computedStyle.backgroundPosition", "'50% 50%, left 0% bottom 20px'"); 378 shouldBe("computedStyle.backgroundPosition", "'left 50% top 50%, left 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, 0% 50%'");
382 shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, 0% 50%'") ; 382 shouldBe("computedStyle.backgroundPosition", "'right 20px bottom 20px, left 0% t op 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 0%, right 0% top 0px'");
390 shouldBe("computedStyle.backgroundPosition", "'left 10% top 0%, right 0% top 0px '"); 390 shouldBe("computedStyle.backgroundPosition", "'left 10% top 0%, right 0% top 0px '");
391 391
392 style.backgroundPosition = "right top 15px, bottom right 20px"; 392 style.backgroundPosition = "right top 15px, bottom right 20px";
(...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after
426 style.background = "center top 20px round fixed border-box"; 426 style.background = "center top 20px round fixed border-box";
427 shouldBe("style.background", "'left 50% top 20px round fixed border-box border-b ox'"); 427 shouldBe("style.background", "'left 50% top 20px round fixed border-box border-b ox'");
428 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 % top 20px / auto border-box border-box'"); 428 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 % top 20px / auto border-box border-box'");
429 429
430 style.background = "top 20px center round fixed border-box"; 430 style.background = "top 20px center round fixed border-box";
431 shouldBe("style.background", "'left 50% top 20px round fixed border-box border-b ox'"); 431 shouldBe("style.background", "'left 50% top 20px round fixed border-box border-b ox'");
432 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 % top 20px / auto border-box border-box'"); 432 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 % top 20px / auto border-box border-box'");
433 433
434 style.background = "top center round fixed border-box"; 434 style.background = "top center round fixed border-box";
435 shouldBe("style.background", "'50% 0% round fixed border-box border-box'"); 435 shouldBe("style.background", "'50% 0% round fixed border-box border-box'");
436 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50% 0% / auto border-box border-box'"); 436 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 % top 0% / auto border-box border-box'");
437 437
438 style.background = "50px 60px / 50px round fixed border-box"; 438 style.background = "50px 60px / 50px round fixed border-box";
439 shouldBe("style.background", "'50px 60px / 50px round fixed border-box border-bo x'"); 439 shouldBe("style.background", "'50px 60px / 50px round fixed border-box border-bo x'");
440 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 60 px / 50px border-box border-box'"); 440 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 px top 60px / 50px border-box border-box'");
441 441
442 style.background = "50px / 50px round fixed border-box"; 442 style.background = "50px / 50px round fixed border-box";
443 shouldBe("style.background", "'50px 50% / 50px round fixed border-box border-box '"); 443 shouldBe("style.background", "'50px 50% / 50px round fixed border-box border-box '");
444 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed 50px 50 % / 50px border-box border-box'"); 444 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 50 px top 50% / 50px border-box border-box'");
445 445
446 style.background = "left top 60px / 50px round fixed border-box"; 446 style.background = "left top 60px / 50px round fixed border-box";
447 shouldBe("style.background", "'left 0% top 60px / 50px round fixed border-box bo rder-box'"); 447 shouldBe("style.background", "'left 0% top 60px / 50px round fixed border-box bo rder-box'");
448 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 0% top 60px / 50px border-box border-box'"); 448 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left 0% top 60px / 50px border-box border-box'");
449 449
450 style.background = "left -20px top 60px / 50px round fixed border-box"; 450 style.background = "left -20px top 60px / 50px round fixed border-box";
451 shouldBe("style.background", "'left -20px top 60px / 50px round fixed border-box border-box'"); 451 shouldBe("style.background", "'left -20px top 60px / 50px round fixed border-box border-box'");
452 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left -2 0px top 60px / 50px border-box border-box'"); 452 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none round fixed left -2 0px top 60px / 50px border-box border-box'");
453 453
454 style.background = "border-box left 20px top / 50px round fixed"; 454 style.background = "border-box left 20px top / 50px round fixed";
(...skipping 14 matching lines...) Expand all
469 469
470 style.background = "top 10% left 30% gray round fixed border-box"; 470 style.background = "top 10% left 30% gray round fixed border-box";
471 shouldBe("style.background", "'left 30% top 10% round fixed border-box border-bo x gray'"); 471 shouldBe("style.background", "'left 30% top 10% round fixed border-box border-bo x gray'");
472 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / auto border-box border-box'"); 472 shouldBe("computedStyle.background", "'rgb(128, 128, 128) none round fixed left 30% top 10% / auto border-box border-box'");
473 473
474 debug("background-position inside the background shorthand, some invalid cases, no changes expected"); 474 debug("background-position inside the background shorthand, some invalid cases, no changes expected");
475 style.background = ""; 475 style.background = "";
476 style.background = "top 10% left 30% 50% gray round fixed border-box"; 476 style.background = "top 10% left 30% 50% gray round fixed border-box";
477 shouldBe("style.background", "''"); 477 shouldBe("style.background", "''");
478 // This is the default computed style. 478 // This is the default computed style.
479 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 479 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
480 480
481 style.background = "top 10% solid 30% gray round fixed border-box"; 481 style.background = "top 10% solid 30% gray round fixed border-box";
482 shouldBe("style.background", "''"); 482 shouldBe("style.background", "''");
483 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 483 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
484 484
485 style.background = "top 10% left round gray round fixed border-box"; 485 style.background = "top 10% left round gray round fixed border-box";
486 shouldBe("style.background", "''"); 486 shouldBe("style.background", "''");
487 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 487 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
488 488
489 style.background = "top 10% top 30% gray round fixed border-box"; 489 style.background = "top 10% top 30% gray round fixed border-box";
490 shouldBe("style.background", "''"); 490 shouldBe("style.background", "''");
491 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 491 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
492 492
493 style.background = "center center center / 10em gray round fixed border-box"; 493 style.background = "center center center / 10em gray round fixed border-box";
494 shouldBe("style.background", "''"); 494 shouldBe("style.background", "''");
495 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 495 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
496 496
497 style.background = "center center 30px / 10em gray round fixed border-box"; 497 style.background = "center center 30px / 10em gray round fixed border-box";
498 shouldBe("style.background", "''"); 498 shouldBe("style.background", "''");
499 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 499 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
500 500
501 style.background = "top center left / 10em gray round fixed border-box"; 501 style.background = "top center left / 10em gray round fixed border-box";
502 shouldBe("style.background", "''"); 502 shouldBe("style.background", "''");
503 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 503 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
504 504
505 style.background = "50% left / 10em gray round fixed border-box"; 505 style.background = "50% left / 10em gray round fixed border-box";
506 shouldBe("style.background", "''"); 506 shouldBe("style.background", "''");
507 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 507 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
508 508
509 style.background = "solid / 10em gray round fixed border-box"; 509 style.background = "solid / 10em gray round fixed border-box";
510 shouldBe("style.background", "''"); 510 shouldBe("style.background", "''");
511 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 511 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
512 512
513 style.background = "top 10% left 20px 50% 50px gray round fixed border-box"; 513 style.background = "top 10% left 20px 50% 50px gray round fixed border-box";
514 shouldBe("style.background", "''"); 514 shouldBe("style.background", "''");
515 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 515 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
516 516
517 style.background = "20px 20px 30px / 40px gray round fixed border-box"; 517 style.background = "20px 20px 30px / 40px gray round fixed border-box";
518 shouldBe("style.background", "''"); 518 shouldBe("style.background", "''");
519 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 519 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
520 520
521 style.background = "20px 20px 30px 60px / 40px gray round fixed border-box"; 521 style.background = "20px 20px 30px 60px / 40px gray round fixed border-box";
522 shouldBe("style.background", "''"); 522 shouldBe("style.background", "''");
523 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box'"); 523 shouldBe("computedStyle.background", "'rgba(0, 0, 0, 0) none repeat scroll left 0% top 0% / auto padding-box border-box'");
524 524
525 style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box" ; 525 style.background = "20px 20px 30px 60px 70px / 40px gray round fixed border-box" ;
526 shouldBe("style.background", "''"); 526 shouldBe("style.background", "''");
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 left 0% top 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 left 0% top 0% / auto padding-box border-box'");
532 532
533 document.body.removeChild(testContainer); 533 document.body.removeChild(testContainer);
534 </script> 534 </script>
535 <script src="../js/resources/js-test-post.js"></script> 535 <script src="../js/resources/js-test-post.js"></script>
536 </body> 536 </body>
537 </html> 537 </html>
OLDNEW
« no previous file with comments | « LayoutTests/animations/resources/animation-test-helpers.js ('k') | LayoutTests/fast/backgrounds/background-position-parsing-2-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698