Skip to content

Commit 6c4a252

Browse files
mregomrego
committed
Add test to check scrollable overflow of abspos elements
1 parent fcb3495 commit 6c4a252

File tree

1 file changed

+73
-0
lines changed

1 file changed

+73
-0
lines changed

‎css/css-position/positon-absolute-scrollable-overflow-001.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<meta charset=utf-8>
3+
<title>CSS Positioned Layout Test: Absolute positioned elements are included in the scrollable overflow area</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-position/#valdef-position-absolute">
6+
<link rel="help" href="https://drafts.csswg.org/css-overflow/#scrollable">
7+
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-element-scrollheight">
8+
<meta name=assert content="Absolute positioned elements are included in the scrollable overflow area of its containing block.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<script src="/resources/check-layout-th.js"></script>
12+
<style>
13+
.containing-block {
14+
position: relative;
15+
width: 100px;
16+
height: 100px;
17+
margin: 100px;
18+
}
19+
20+
.abspos {
21+
position: absolute;
22+
background: rgba(0, 255, 0, 0.5);
23+
width: 10px;
24+
height: 10px;
25+
left: 0;
26+
top: 0;
27+
}
28+
</style>
29+
<body onload="checkLayout('.containing-block');">
30+
<div id="log"></div>
31+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="500">
32+
<div class="abspos" style="height: 500px; left: -50px;"></div>
33+
</div>
34+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="550">
35+
<div class="abspos" style="height: 500px; left: -50px; top: 50px;"></div>
36+
</div>
37+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="700">
38+
<div class="abspos" style="height: 500px; left: -50px; top: 200px;"></div>
39+
</div>
40+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="400">
41+
<div class="abspos" style="height: 500px; left: -50px; top: -100px;"></div>
42+
</div>
43+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100">
44+
<div class="abspos" style="height: 500px; left: -50px; top: -1000px;"></div>
45+
</div>
46+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100">
47+
<div class="abspos" style="height: 500px; left: 50px; top: -1000px;"></div>
48+
</div>
49+
<div class="containing-block" data-expected-scroll-width="210" data-expected-scroll-height="700">
50+
<div class="abspos" style="height: 500px; left: 200px; top: 200px;"></div>
51+
</div>
52+
<div class="containing-block" data-expected-scroll-width="500" data-expected-scroll-height="100">
53+
<div class="abspos" style="width: 500px; top: -50px;"></div>
54+
</div>
55+
<div class="containing-block" data-expected-scroll-width="550" data-expected-scroll-height="100">
56+
<div class="abspos" style="width: 500px; top: -50px; left: 50px;"></div>
57+
</div>
58+
<div class="containing-block" data-expected-scroll-width="700" data-expected-scroll-height="100">
59+
<div class="abspos" style="width: 500px; top: -50px; left: 200px;"></div>
60+
</div>
61+
<div class="containing-block" data-expected-scroll-width="400" data-expected-scroll-height="100">
62+
<div class="abspos" style="width: 500px; top: -50px; left: -100px;"></div>
63+
</div>
64+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100">
65+
<div class="abspos" style="width: 500px; top: -50px; left: -1000px;"></div>
66+
</div>
67+
<div class="containing-block" data-expected-scroll-width="100" data-expected-scroll-height="100">
68+
<div class="abspos" style="width: 500px; top: 50px; left: -1000px;"></div>
69+
</div>
70+
<div class="containing-block" data-expected-scroll-width="700" data-expected-scroll-height="210">
71+
<div class="abspos" style="width: 500px; top: 200px; left: 200px;"></div>
72+
</div>
73+
</body>

0 commit comments

Comments
 (0)