/
offsetPropertiesInline.html
80 lines (74 loc) · 2.67 KB
/
offsetPropertiesInline.html
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
<!DOCTYPE html>
<meta charset=utf-8>
<title>cssom-view - offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight on inline elements</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#real-offset-parent {
font: 10px/1 Ahem;
margin: 0;
border: none;
padding: 0;
}
#real-offset-parent, #decoy-offset-parent {
position: relative;
}
</style>
<body>
<div id="real-offset-parent">
<span id="inline-1">ABC</span>
<span id="inline-2">ABC<br />ABC</span>
<span id="inline-3">ABC</span>
</div>
<div id="decoy-offset-parent"></div>
<script>
setup({ explicit_done: true });
window.onload = function() {
var realOffsetParent = document.getElementById('real-offset-parent');
var inline1 = document.getElementById('inline-1');
var inline2 = document.getElementById('inline-2');
var inline3 = document.getElementById('inline-3');
test(function() {
assert_equals(inline1.offsetParent, realOffsetParent,
"offsetParent of #inline-1 should be #real-offset-parent.");
assert_equals(inline2.offsetParent, realOffsetParent,
"offsetParent of #inline-2 should be #real-offset-parent.");
assert_equals(inline3.offsetParent, realOffsetParent,
"offsetParent of #inline-3 should be #real-offset-parent.");
}, "offsetParent");
test(function() {
assert_equals(inline1.offsetTop, 0,
"offsetTop of #inline-1 should be 0.");
assert_equals(inline2.offsetTop, 0,
"offsetTop of #inline-2 should be 0.");
assert_equals(inline3.offsetTop, 10,
"offsetTop of #inline-3 should be 10.");
}, "offsetTop");
test(function() {
assert_equals(inline1.offsetLeft, 0,
"offsetLeft of #inline-1 should be 0.");
assert_equals(inline2.offsetLeft, 40,
"offsetLeft of #inline-2 should be 40.");
assert_equals(inline3.offsetLeft, 40,
"offsetLeft of #inline-3 should be 40.");
}, "offsetLeft");
test(function() {
assert_equals(inline1.offsetWidth, 30,
"offsetWidth of #inline-1 should be 30.");
assert_equals(inline2.offsetWidth, 70,
"offsetWidth of #inline-2 should be 70.");
assert_equals(inline3.offsetWidth, 30,
"offsetWidth of #inline-3 should be 30.");
}, "offsetWidth");
test(function() {
assert_equals(inline1.offsetHeight, 10,
"offsetHeight of #inline-1 should be 10.");
assert_equals(inline2.offsetHeight, 20,
"offsetHeight of #inline-2 should be 20.");
assert_equals(inline3.offsetHeight, 10,
"offsetHeight of #inline-3 should be 10.");
}, "offsetHeight");
done();
};
</script>
</body>