1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
|
<!doctype html>
<meta charset=utf-8>
<title></title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div id=log></div>
<div id="parent" style="overflow:scroll; height: 100px; position: relative">
<div id="spacer" style="height: 200px"></div>
<div id="child"></div>
<div id="absolute-child" style="position: absolute; top: 41px; left: 43px"></div>
</div>
<script>
test(function() {
var child = document.getElementById("child");
assert_equals(child.offsetTop, 200, "Child is after spacer");
assert_equals(child.offsetLeft, 0, "Child is flush left");
var absChild = document.getElementById("absolute-child");
assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned");
assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned");
}, "Basic functionality");
test(function() {
var parent = document.getElementById("parent");
parent.scrollTop = 100;
var child = document.getElementById("child");
assert_equals(child.offsetTop, 200, "Child is after spacer");
assert_equals(child.offsetLeft, 0, "Child is flush left");
var absChild = document.getElementById("absolute-child");
assert_equals(absChild.offsetTop, 41, "Abspos child is y-positioned");
assert_equals(absChild.offsetLeft, 43, "Abspos child is x-positioned");
}, "Basic functionality in scrolled parent");
test(function() {
var child = document.getElementById("child");
child.style.marginTop = "20px"
child.style.marginLeft = "100px";
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
var absChild = document.getElementById("absolute-child");
absChild.style.marginTop = "20px"
absChild.style.marginLeft = "100px";
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
}, "Margins on child");
test(function() {
var parent = document.getElementById("parent");
parent.style.marginTop = "66px"
parent.style.marginLeft = "33px";
var child = document.getElementById("child");
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
var absChild = document.getElementById("absolute-child");
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
}, "Margins on child and parent");
test(function() {
var child = document.getElementById("child");
child.style.borderTop = "13px solid green";
child.style.borderLeft = "7px solid green";
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
var absChild = document.getElementById("absolute-child");
absChild.style.borderTop = "13px solid green";
absChild.style.borderLeft = "7px solid green";
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
}, "Margins on child and parent, border on child");
test(function() {
var parent = document.getElementById("parent");
parent.style.borderTop = "23px solid yellow";
parent.style.borderLeft = "19px solid yellow";
var child = document.getElementById("child");
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
var absChild = document.getElementById("absolute-child");
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
}, "Margins on child and parent, border on child and parent");
test(function() {
var child = document.getElementById("child");
child.style.paddingTop = "31px";
child.style.paddingLeft = "37px";
assert_equals(child.offsetTop, 220, "Child is after spacer and margin");
assert_equals(child.offsetLeft, 100, "Child is 100px from left");
var absChild = document.getElementById("absolute-child");
absChild.style.paddingTop = "31px";
absChild.style.paddingLeft = "37px";
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
}, "Margins on child and parent, border on child and parent, padding on child");
test(function() {
var parent = document.getElementById("parent");
parent.style.paddingTop = "31px";
parent.style.paddingLeft = "37px";
var child = document.getElementById("child");
assert_equals(child.offsetTop, 251, "Child is after spacer and margin and parent padding");
assert_equals(child.offsetLeft, 137, "Child is 100px + parent padding from left");
var absChild = document.getElementById("absolute-child");
// Padding on the parent does not affect the position of the absolute containing block.
assert_equals(absChild.offsetTop, 61, "Abspos child is y-positioned and has margin");
assert_equals(absChild.offsetLeft, 143, "Abspos child is x-positioned and has margin");
}, "Margins on child and parent, border on child and parent, padding on child and parent");
</script>
|
