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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets.html

Issue 13871003: Fixing getComputedStyle to return pixel values for left / right / top / bottom (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixing a const issue. Created 7 years, 8 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 | « LayoutTests/fast/css/getComputedStyle/computed-style-negative-top-expected.txt ('k') | LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets-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
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <script src="../../js/resources/js-test-pre.js"></script>
6 </head>
7 <body>
8 <style>
9
10 .relative200x400 {
11 position: relative;
12 width: 200px;
13 height: 400px;
14 font-size: 10px;
15 }
16
17 #test {
18 position: absolute;
19 }
20
21 </style>
22 <div id="tests">
23 <div class="relative200x400"><div id="test"></div></div>
24 </div>
25 <script>
26
27 description("Test to make sure top/bottom/left/right properly returns pixel valu es for any input.")
28
29 var test = document.getElementById('test');
30
31
32 //-----------------------------------------------------------------------------
33 debug('');
34 debug('No offsets (zero width/height)');
35 debug('');
36 shouldBe("getComputedStyle(test).top", "'0px'");
37 shouldBe("getComputedStyle(test).left", "'0px'");
38 shouldBe("getComputedStyle(test).right", "'200px'");
39 shouldBe("getComputedStyle(test).bottom", "'400px'");
40 shouldBe("getComputedStyle(test).width", "'0px'");
41 shouldBe("getComputedStyle(test).height", "'0px'");
42
43 // On padding/border/margin on actual node
44 debug('');
45 evalAndLog("test.setAttribute('style', 'padding: 5px;')");
46 shouldBe("getComputedStyle(test).top", "'0px'");
47 shouldBe("getComputedStyle(test).left", "'0px'");
48 shouldBe("getComputedStyle(test).right", "'190px'");
49 shouldBe("getComputedStyle(test).bottom", "'390px'");
50 shouldBe("getComputedStyle(test).width", "'0px'");
51 shouldBe("getComputedStyle(test).height", "'0px'");
52
53 debug('');
54 evalAndLog("test.setAttribute('style', 'border: solid 5px;')");
55 shouldBe("getComputedStyle(test).top", "'0px'");
56 shouldBe("getComputedStyle(test).left", "'0px'");
57 shouldBe("getComputedStyle(test).right", "'190px'");
58 shouldBe("getComputedStyle(test).bottom", "'390px'");
59 shouldBe("getComputedStyle(test).width", "'0px'");
60 shouldBe("getComputedStyle(test).height", "'0px'");
61
62 debug('');
63 evalAndLog("test.setAttribute('style', 'margin: 5px;')");
64 shouldBe("getComputedStyle(test).top", "'0px'");
65 shouldBe("getComputedStyle(test).left", "'0px'");
66 shouldBe("getComputedStyle(test).right", "'190px'");
67 shouldBe("getComputedStyle(test).bottom", "'390px'");
68 shouldBe("getComputedStyle(test).width", "'0px'");
69 shouldBe("getComputedStyle(test).height", "'0px'");
70
71 evalAndLog("test.setAttribute('style', '')");
72
73 // On padding/border/margin on parent node
74 debug('');
75 evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
76 shouldBe("getComputedStyle(test).top", "'5px'");
77 shouldBe("getComputedStyle(test).left", "'5px'");
78 shouldBe("getComputedStyle(test).right", "'205px'");
79 shouldBe("getComputedStyle(test).bottom", "'405px'");
80 shouldBe("getComputedStyle(test).width", "'0px'");
81 shouldBe("getComputedStyle(test).height", "'0px'");
82
83 debug('');
84 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
85 shouldBe("getComputedStyle(test).top", "'0px'");
86 shouldBe("getComputedStyle(test).left", "'0px'");
87 shouldBe("getComputedStyle(test).right", "'200px'");
88 shouldBe("getComputedStyle(test).bottom", "'400px'");
89 shouldBe("getComputedStyle(test).width", "'0px'");
90 shouldBe("getComputedStyle(test).height", "'0px'");
91
92 debug('');
93 evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
94 shouldBe("getComputedStyle(test).top", "'0px'");
95 shouldBe("getComputedStyle(test).left", "'0px'");
96 shouldBe("getComputedStyle(test).right", "'200px'");
97 shouldBe("getComputedStyle(test).bottom", "'400px'");
98 shouldBe("getComputedStyle(test).width", "'0px'");
99 shouldBe("getComputedStyle(test).height", "'0px'");
100
101 //-----------------------------------------------------------------------------
102 debug('');
103 debug('No offsets (50px width/height)');
104 debug('');
105 var commonStyle = "width: 50px; height: 50px;";
106 evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
107 shouldBe("getComputedStyle(test).top", "'0px'");
108 shouldBe("getComputedStyle(test).left", "'0px'");
109 shouldBe("getComputedStyle(test).right", "'150px'");
110 shouldBe("getComputedStyle(test).bottom", "'350px'");
111 shouldBe("getComputedStyle(test).width", "'50px'");
112 shouldBe("getComputedStyle(test).height", "'50px'");
113
114 // On padding/border/margin on actual node
115 debug('');
116 evalAndLog("test.setAttribute('style', '"+commonStyle+" padding: 5px;')");
117 shouldBe("getComputedStyle(test).top", "'0px'");
118 shouldBe("getComputedStyle(test).left", "'0px'");
119 shouldBe("getComputedStyle(test).right", "'140px'");
120 shouldBe("getComputedStyle(test).bottom", "'340px'");
121 shouldBe("getComputedStyle(test).width", "'50px'");
122 shouldBe("getComputedStyle(test).height", "'50px'");
123
124 debug('');
125 evalAndLog("test.setAttribute('style', '"+commonStyle+" border: solid 5px;')");
126 shouldBe("getComputedStyle(test).top", "'0px'");
127 shouldBe("getComputedStyle(test).left", "'0px'");
128 shouldBe("getComputedStyle(test).right", "'140px'");
129 shouldBe("getComputedStyle(test).bottom", "'340px'");
130 shouldBe("getComputedStyle(test).width", "'50px'");
131 shouldBe("getComputedStyle(test).height", "'50px'");
132
133 debug('');
134 evalAndLog("test.setAttribute('style', '"+commonStyle+" margin: 5px;')");
135 shouldBe("getComputedStyle(test).top", "'0px'");
136 shouldBe("getComputedStyle(test).left", "'0px'");
137 shouldBe("getComputedStyle(test).right", "'140px'");
138 shouldBe("getComputedStyle(test).bottom", "'340px'");
139 shouldBe("getComputedStyle(test).width", "'50px'");
140 shouldBe("getComputedStyle(test).height", "'50px'");
141 evalAndLog("test.removeAttribute('style', 'margin')");
142
143 // On padding/border/margin on parent node
144 debug('');
145 evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
146 debug('');
147 evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
148 shouldBe("getComputedStyle(test).top", "'5px'");
149 shouldBe("getComputedStyle(test).left", "'5px'");
150 shouldBe("getComputedStyle(test).right", "'155px'");
151 shouldBe("getComputedStyle(test).bottom", "'355px'");
152 shouldBe("getComputedStyle(test).width", "'50px'");
153 shouldBe("getComputedStyle(test).height", "'50px'");
154
155 debug('');
156 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
157 shouldBe("getComputedStyle(test).top", "'0px'");
158 shouldBe("getComputedStyle(test).left", "'0px'");
159 shouldBe("getComputedStyle(test).right", "'150px'");
160 shouldBe("getComputedStyle(test).bottom", "'350px'");
161 shouldBe("getComputedStyle(test).width", "'50px'");
162 shouldBe("getComputedStyle(test).height", "'50px'");
163
164 debug('');
165 evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
166 shouldBe("getComputedStyle(test).top", "'0px'");
167 shouldBe("getComputedStyle(test).left", "'0px'");
168 shouldBe("getComputedStyle(test).right", "'150px'");
169 shouldBe("getComputedStyle(test).bottom", "'350px'");
170 shouldBe("getComputedStyle(test).width", "'50px'");
171 shouldBe("getComputedStyle(test).height", "'50px'");
172
173
174 //-----------------------------------------------------------------------------
175 debug('');
176 debug('No offsets (100% width/height)');
177 debug('');
178 var commonStyle = "width: 100%; height: 100%;";
179 evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
180 shouldBe("getComputedStyle(test).top", "'0px'");
181 shouldBe("getComputedStyle(test).left", "'0px'");
182 shouldBe("getComputedStyle(test).right", "'0px'");
183 shouldBe("getComputedStyle(test).bottom", "'0px'");
184 shouldBe("getComputedStyle(test).width", "'200px'");
185 shouldBe("getComputedStyle(test).height", "'400px'");
186
187 // On padding/border/margin on actual node
188 debug('');
189 evalAndLog("test.setAttribute('style', '"+commonStyle+" padding: 5px;')");
190 shouldBe("getComputedStyle(test).top", "'0px'");
191 shouldBe("getComputedStyle(test).left", "'0px'");
192 shouldBe("getComputedStyle(test).right", "'-10px'");
193 shouldBe("getComputedStyle(test).bottom", "'-10px'");
194 shouldBe("getComputedStyle(test).width", "'200px'");
195 shouldBe("getComputedStyle(test).height", "'400px'");
196 evalAndLog("test.removeAttribute('style', 'padding')");
197
198 debug('');
199 evalAndLog("test.setAttribute('style', '"+commonStyle+" border: solid 5px;')");
200 shouldBe("getComputedStyle(test).top", "'0px'");
201 shouldBe("getComputedStyle(test).left", "'0px'");
202 shouldBe("getComputedStyle(test).right", "'-10px'");
203 shouldBe("getComputedStyle(test).bottom", "'-10px'");
204 shouldBe("getComputedStyle(test).width", "'200px'");
205 shouldBe("getComputedStyle(test).height", "'400px'");
206 evalAndLog("test.removeAttribute('style', 'border')");
207
208 debug('');
209 evalAndLog("test.setAttribute('style', '"+commonStyle+" margin: 5px;')");
210 shouldBe("getComputedStyle(test).top", "'0px'");
211 shouldBe("getComputedStyle(test).left", "'0px'");
212 shouldBe("getComputedStyle(test).right", "'-10px'");
213 shouldBe("getComputedStyle(test).bottom", "'-10px'");
214 shouldBe("getComputedStyle(test).width", "'200px'");
215 shouldBe("getComputedStyle(test).height", "'400px'");
216 evalAndLog("test.removeAttribute('style', 'margin')");
217
218 // On padding/border/margin on parent node
219 debug('');
220 evalAndLog("test.setAttribute('style', '"+commonStyle+"')");
221 debug('');
222 evalAndLog("test.parentNode.setAttribute('style', 'padding: 5px;')");
223 shouldBe("getComputedStyle(test).top", "'5px'");
224 shouldBe("getComputedStyle(test).left", "'5px'");
225 shouldBe("getComputedStyle(test).right", "'-5px'");
226 shouldBe("getComputedStyle(test).bottom", "'-5px'");
227 shouldBe("getComputedStyle(test).width", "'210px'");
228 shouldBe("getComputedStyle(test).height", "'410px'");
229
230 debug('');
231 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 5px;')");
232 shouldBe("getComputedStyle(test).top", "'0px'");
233 shouldBe("getComputedStyle(test).left", "'0px'");
234 shouldBe("getComputedStyle(test).right", "'0px'");
235 shouldBe("getComputedStyle(test).bottom", "'0px'");
236 shouldBe("getComputedStyle(test).width", "'200px'");
237 shouldBe("getComputedStyle(test).height", "'400px'");
238
239 debug('');
240 evalAndLog("test.parentNode.setAttribute('style', 'margin: 5px;')");
241 shouldBe("getComputedStyle(test).top", "'0px'");
242 shouldBe("getComputedStyle(test).left", "'0px'");
243 shouldBe("getComputedStyle(test).right", "'0px'");
244 shouldBe("getComputedStyle(test).bottom", "'0px'");
245 shouldBe("getComputedStyle(test).width", "'200px'");
246 shouldBe("getComputedStyle(test).height", "'400px'");
247
248 //-----------------------------------------------------------------------------
249 debug('');
250 debug('% offsets (top/left)');
251 debug('');
252 evalAndLog("test.setAttribute('style', 'top: 10%; left: 10%; width: 50%; height: 60%;')");
253 shouldBe("getComputedStyle(test).top", "'40px'");
254 shouldBe("getComputedStyle(test).left", "'20px'");
255 shouldBe("getComputedStyle(test).right", "'80px'");
256 shouldBe("getComputedStyle(test).bottom", "'120px'");
257 shouldBe("getComputedStyle(test).width", "'100px'");
258 shouldBe("getComputedStyle(test).height", "'240px'");
259
260 debug('');
261 evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
262 shouldBe("getComputedStyle(test).top", "'45px'");
263 shouldBe("getComputedStyle(test).left", "'25px'");
264 shouldBe("getComputedStyle(test).right", "'100px'");
265 shouldBe("getComputedStyle(test).bottom", "'135px'");
266 shouldBe("getComputedStyle(test).width", "'125px'");
267 shouldBe("getComputedStyle(test).height", "'270px'");
268 evalAndLog("test.parentNode.removeAttribute('style', 'padding')");
269
270 debug('');
271 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
272 shouldBe("getComputedStyle(test).top", "'40px'");
273 shouldBe("getComputedStyle(test).left", "'20px'");
274 shouldBe("getComputedStyle(test).right", "'80px'");
275 shouldBe("getComputedStyle(test).bottom", "'120px'");
276 shouldBe("getComputedStyle(test).width", "'100px'");
277 shouldBe("getComputedStyle(test).height", "'240px'");
278 evalAndLog("test.parentNode.removeAttribute('style', 'border')");
279
280 debug('');
281 evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
282 shouldBe("getComputedStyle(test).top", "'40px'");
283 shouldBe("getComputedStyle(test).left", "'20px'");
284 shouldBe("getComputedStyle(test).right", "'80px'");
285 shouldBe("getComputedStyle(test).bottom", "'120px'");
286 shouldBe("getComputedStyle(test).width", "'100px'");
287 shouldBe("getComputedStyle(test).height", "'240px'");
288 evalAndLog("test.parentNode.removeAttribute('style', 'margin')");
289
290
291 //-----------------------------------------------------------------------------
292 debug('');
293 debug('% offsets (right/bottom)');
294 debug('');
295 evalAndLog("test.setAttribute('style', 'right: 10%; bottom: 10%; width: 90%; hei ght: 80%;')");
296 shouldBe("getComputedStyle(test).top", "'40px'");
297 shouldBe("getComputedStyle(test).left", "'0px'");
298 shouldBe("getComputedStyle(test).right", "'20px'");
299 shouldBe("getComputedStyle(test).bottom", "'40px'");
300 shouldBe("getComputedStyle(test).width", "'180px'");
301 shouldBe("getComputedStyle(test).height", "'320px'");
302
303
304 // On padding/border/margin on parent node
305 debug('');
306 evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
307 shouldBe("getComputedStyle(test).top", "'45px'");
308 shouldBe("getComputedStyle(test).left", "'0px'");
309 shouldBe("getComputedStyle(test).right", "'25px'");
310 shouldBe("getComputedStyle(test).bottom", "'45px'");
311 shouldBe("getComputedStyle(test).width", "'225px'");
312 shouldBe("getComputedStyle(test).height", "'360px'");
313 evalAndLog("test.parentNode.removeAttribute('style', 'padding')");
314
315 debug('');
316 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
317 shouldBe("getComputedStyle(test).top", "'40px'");
318 shouldBe("getComputedStyle(test).left", "'0px'");
319 shouldBe("getComputedStyle(test).right", "'20px'");
320 shouldBe("getComputedStyle(test).bottom", "'40px'");
321 shouldBe("getComputedStyle(test).width", "'180px'");
322 shouldBe("getComputedStyle(test).height", "'320px'");
323 evalAndLog("test.parentNode.removeAttribute('style', 'border')");
324
325 debug('');
326 evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
327 shouldBe("getComputedStyle(test).top", "'40px'");
328 shouldBe("getComputedStyle(test).left", "'0px'");
329 shouldBe("getComputedStyle(test).right", "'20px'");
330 shouldBe("getComputedStyle(test).bottom", "'40px'");
331 shouldBe("getComputedStyle(test).width", "'180px'");
332 shouldBe("getComputedStyle(test).height", "'320px'");
333 evalAndLog("test.parentNode.removeAttribute('style', 'margin')");
334
335
336
337 //-----------------------------------------------------------------------------
338 debug('');
339 debug('em offsets');
340 debug('');
341 evalAndLog("test.setAttribute('style', 'top: 1em; left: 2em; width: 3em; height: 4em;')");
342 shouldBe("getComputedStyle(test).top", "'10px'");
343 shouldBe("getComputedStyle(test).left", "'20px'");
344 shouldBe("getComputedStyle(test).right", "'150px'");
345 shouldBe("getComputedStyle(test).bottom", "'350px'");
346 shouldBe("getComputedStyle(test).width", "'30px'");
347 shouldBe("getComputedStyle(test).height", "'40px'");
348
349 // On padding/border/margin on parent node
350 debug('');
351 evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
352 shouldBe("getComputedStyle(test).top", "'10px'");
353 shouldBe("getComputedStyle(test).left", "'20px'");
354 shouldBe("getComputedStyle(test).right", "'200px'");
355 shouldBe("getComputedStyle(test).bottom", "'400px'");
356 shouldBe("getComputedStyle(test).width", "'30px'");
357 shouldBe("getComputedStyle(test).height", "'40px'");
358
359 debug('');
360 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
361 shouldBe("getComputedStyle(test).top", "'10px'");
362 shouldBe("getComputedStyle(test).left", "'20px'");
363 shouldBe("getComputedStyle(test).right", "'150px'");
364 shouldBe("getComputedStyle(test).bottom", "'350px'");
365 shouldBe("getComputedStyle(test).width", "'30px'");
366 shouldBe("getComputedStyle(test).height", "'40px'");
367
368 debug('');
369 evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
370 shouldBe("getComputedStyle(test).top", "'10px'");
371 shouldBe("getComputedStyle(test).left", "'20px'");
372 shouldBe("getComputedStyle(test).right", "'150px'");
373 shouldBe("getComputedStyle(test).bottom", "'350px'");
374 shouldBe("getComputedStyle(test).width", "'30px'");
375 shouldBe("getComputedStyle(test).height", "'40px'");
376
377 //-----------------------------------------------------------------------------
378 debug('');
379 debug('Absolute Offsets');
380 debug('');
381 evalAndLog("test.setAttribute('style', 'position: absolute; top: 30px; height: 3 00px;')");
382 shouldBe("getComputedStyle(test).top", "'30px'");
383 shouldBe("getComputedStyle(test).left", "'0px'");
384 shouldBe("getComputedStyle(test).right", "'200px'");
385 shouldBe("getComputedStyle(test).bottom", "'70px'");
386 shouldBe("getComputedStyle(test).width", "'0px'");
387 shouldBe("getComputedStyle(test).height", "'300px'");
388
389 debug('');
390 evalAndLog("test.parentNode.setAttribute('style', 'padding: 25px;')");
391 shouldBe("getComputedStyle(test).top", "'30px'");
392 shouldBe("getComputedStyle(test).left", "'25px'");
393 shouldBe("getComputedStyle(test).right", "'225px'");
394 shouldBe("getComputedStyle(test).bottom", "'120px'");
395 shouldBe("getComputedStyle(test).width", "'0px'");
396 shouldBe("getComputedStyle(test).height", "'300px'");
397
398 debug('');
399 evalAndLog("test.parentNode.setAttribute('style', 'border: solid 25px;')");
400 shouldBe("getComputedStyle(test).top", "'30px'");
401 shouldBe("getComputedStyle(test).left", "'0px'");
402 shouldBe("getComputedStyle(test).right", "'200px'");
403 shouldBe("getComputedStyle(test).bottom", "'70px'");
404 shouldBe("getComputedStyle(test).width", "'0px'");
405 shouldBe("getComputedStyle(test).height", "'300px'");
406
407 debug('');
408 evalAndLog("test.parentNode.setAttribute('style', 'margin: 25px;')");
409 shouldBe("getComputedStyle(test).top", "'30px'");
410 shouldBe("getComputedStyle(test).left", "'0px'");
411 shouldBe("getComputedStyle(test).right", "'200px'");
412 shouldBe("getComputedStyle(test).bottom", "'70px'");
413 shouldBe("getComputedStyle(test).width", "'0px'");
414 shouldBe("getComputedStyle(test).height", "'300px'");
415
416 </script>
417 <script src="../../js/resources/js-test-post.js"></script>
418 </body>
419 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css/getComputedStyle/computed-style-negative-top-expected.txt ('k') | LayoutTests/fast/css/getComputedStyle/getComputedStyle-offsets-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698