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