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
|
<!doctype html>
<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003373">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.container {
--size: 100px;
--padding-size: 30px;
--too-big-size: calc(var(--size) - var(--padding-size) + 1px);
--just-right-size: calc(var(--size) - var(--padding-size));
overflow:auto;
width: var(--size);
height: var(--size);
padding-right: var(--padding-size);
padding-bottom: var(--padding-size);
background: #DDD;
box-sizing: border-box;
display: inline-block;
}
.big {
width: var(--too-big-size);
height: var(--too-big-size);
background: green;
}
.small {
width: var(--just-right-size);
height: var(--just-right-size);
background: yellow;
}
.bigfont {
font-size: var(--too-big-size);
font-family: Ahem;
line-height: 1;
color:green;
}
.smallfont {
font-size: var(--just-right-size);
font-family: Ahem;
line-height: 1;
color:yellow;
}
.red {
background:red;
}
</style>
<body onload="runTest()">
<p><span style="background:green">green</span> blocks get scrollbars, <span style="background:yellow">yellow</span> do not.</p>
<p>Block child gets block and inline padding.</p>
<div class="container" data-scrollbar="hv">
<div class="big"></div>
</div>
<div class="container" data-scrollbar="">
<div class="small"></div>
</div>
<p>Inline child gets block and inline padding.</p>
<div class="container bigfont" data-scrollbar="hv">
<span>X</span>
</div>
<div class="container" style="font:36px/1 Ahem;color:green" data-scrollbar="hv">
<span>XX</span><br>XX
</div>
<div class="container smallfont" data-scrollbar="">
<span>X</span>
</div>
<p>Inline block child gets block and inline padding.</p>
<div class="container" data-scrollbar="hv">
<div class="big" style="display:inline-block;vertical-align:bottom;"></div>
</div>
<div class="container" data-scrollbar="">
<div class="small" style="display:inline-block;vertical-align:bottom;"></div>
</div>
<p>Padding applies to linebox, not linebox overflow.</p>
<div class="container" data-scrollbar="">
<div class="small" style="display:inline-block;vertical-align:bottom">
<div style="height:90px;width:80px;background: rgba(0,0,255,0.3)"></div>
</div>
</div>
<script>
function hasHorizontalScrollbar(el) {
return (el.scrollWidth - el.offsetWidth) > 0;
}
function hasVerticalScrollbar(el) {
return (el.scrollHeight - el.offsetHeight) > 0;
}
// Tests needs to be run after load.
function runTest() {
test(()=> {
let i=0;
for (el of Array.from(document.querySelectorAll(".container"))) {
i++;
el.classList.toggle("red");
let expected = el.getAttribute("data-scrollbar");
if (expected.match(/h/))
assert_true(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`);
else
assert_false(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`);
if (expected.match(/v/))
assert_true(hasVerticalScrollbar(el), `vertical scrollbar ${i}`);
else
assert_false(hasVerticalScrollbar(el), `vertical scrollbar ${i}`);
el.classList.toggle("red");
}
}, "Container padding is applied approriately to block/inline children.");
}
</script>
</body>
|
