blob: c6bda8df8ba043bbf72b12b3c76d3cbfa1915fe6 (
plain)
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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Test (Overflow): body with overflow:hidden</title>
<link rel="author" title="Chris Rebert" href="http://chrisrebert.com">
<link rel="help" href="https://www.w3.org/TR/CSS2/visufx.html#overflow">
<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#overflow">
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#propdef-overflow">
<meta name="flags" content="interact">
<meta name="assert" content="position:fixed layer should not be able to cause scrolling of body styled as overflow:hidden">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
/* what we're testing */
overflow: hidden;
}
h1 {
/* bottom of #overlay-inner */
position: absolute;
bottom: 0;
left: 0;
}
.margin-0 {
/* remove extra space */
margin: 0;
}
.tall {
height: 100vh;
width: 100%;
}
#bad {
background-color: red;
}
#overlay {
overflow: auto;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#overlay-inner {
position: relative;/* needed for the h1 */
width: 60%;/* leave room for #bad to be visible */
height: 150vh;/* force scroll */
/* make this visually distinct */
background-color: blue;
color: white;
}
</style>
</head>
<body class="margin-0">
<div id="overlay">
<div id="overlay-inner">
<ol class="margin-0">
<li>Scroll the blue square downward until you see the word "BOTTOM".</li>
<li>End your scrolling action/gesture. (e.g. Remove your finger from the touchscreen.)</li>
<li>Attempt to scroll the blue square further downward.</li>
<li>If you see any red, then the test result is FAILED. Otherwise, it is PASSED.</li>
</ol>
<h1 class="margin-0">BOTTOM</h1>
</div>
</div>
<div class="tall"></div>
<div id="bad" class="tall"></div>
</body>
</html>
|
