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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: CSSOM View scrollWidth and scrollHeight</title>
<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" />
<link rel="help" href="http://www.w3.org/TR/cssom-view/#dom-element-scrollwidth" />
<meta name="flags" content="dom" />
<script src="/resources/testharness.js" type="text/javascript" />
<script src="/resources/testharnessreport.js" type="text/javascript" />
<style type="text/css"><![CDATA[
#elemSimple, #elemOverflow, #elemNestedOverflow {
border:1px solid black;
overflow:hidden;
width:200px;
height:40px;
padding-bottom:50px;
padding-right:40px;
}
#elemSimple > div {
background:yellow;
width:60px;
height:30px;
}
#elemOverflow > div {
background:yellow;
width:250px;
height:150px;
}
#elemNestedOverflow > div {
background:yellow;
width:60px;
height:30px;
}
#elemNestedOverflow > div > div {
background:blue;
width:250px;
height:150px;
}
]]></style>
</head>
<body>
<noscript>Test not run - javascript required.</noscript>
<div id="log" />
<div id="elemSimple">
<div />
</div>
<div id="elemOverflow">
<div />
</div>
<div id="elemNestedOverflow">
<div>
<div />
</div>
</div>
<script type="text/javascript"><![CDATA[
var elemSimple = document.getElementById("elemSimple");
var elemOverflow = document.getElementById("elemOverflow");
var elemNestedOverflow = document.getElementById("elemNestedOverflow");
test(function(){
assert_equals(elemSimple.clientHeight, 90);
}, "elemSimple.clientHeight is the height of the padding edge");
test(function(){
assert_equals(elemSimple.scrollHeight, 90);
}, "elemSimple.scrollHeight is its clientHeight");
test(function(){
assert_equals(elemSimple.clientWidth, 240);
}, "elemSimple.clientWidth is the width of the padding edge");
test(function(){
assert_equals(elemSimple.scrollWidth, 240);
}, "elemSimple.scrollWidth is its clientWidth");
test(function(){
assert_equals(elemOverflow.clientHeight, 90);
}, "elemOverflow.clientHeight is the height of the padding edge");
/* This test differs from the spec. Opera and Webkit meet the spec, IE9 and Firefox
give the result here. It seems that in this case Opera and Webkit place
the padding-bottom below elemOverflow's child (i.e. below elemOverflow's bottom border);
you can scroll to it. IE9 and Firefox do not. I believe this is a Webkit/Opera bug
(If you remove overflow:hidden then the padding-bottom moves back to be above the bottom
border, as expected.)
The underlying issue seems to be whether bottom padding on a scrollable element is
always placed at the element's bottom border and not scrolled, or else deemed to
belong to the scrolled content and placed below the scrolled element's children.
Commenting out for now, because this is not really a CSSOM issue, but an issue
over the layout of elements with 'overflow'.
test(function(){
assert_equals(elemOverflow.scrollHeight, 150);
}, "elemOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)");
*/
test(function(){
assert_equals(elemOverflow.clientWidth, 240);
}, "elemOverflow.clientWidth is the width of the padding edge");
/* This test differs from the spec. All major browsers give the result here, ignoring
the right padding.
*/
test(function(){
assert_equals(elemOverflow.scrollWidth, 250);
}, "elemOverflow.scrollHeight is the width of its scrolled contents (ignoring padding, since we overflowed)");
test(function(){
assert_equals(elemNestedOverflow.clientHeight, 90);
}, "elemNestedOverflow.clientHeight is the height of the padding edge");
/* This test differs from the spec. All major browsers give the result here.
*/
test(function(){
assert_equals(elemNestedOverflow.scrollHeight, 150);
}, "elemNestedOverflow.scrollHeight is the height of its scrolled contents (ignoring padding, since we overflowed)");
test(function(){
assert_equals(elemNestedOverflow.clientWidth, 240);
}, "elemNestedOverflow.clientWidth is the height of the padding edge");
/* This test differs from the spec. All major browsers give the result here, ignoring
the right padding.
*/
test(function(){
assert_equals(elemNestedOverflow.scrollWidth, 250);
}, "elemNestedOverflow.scrollWidth is the width of its scrolled contents (ignoring padding, since we overflowed)");
]]></script>
</body>
</html>
|
