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
|
<!DOCTYPE html>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body { margin: 0; }
#scroller { overflow: scroll; width: 500px; height: 400px; }
#space { height: 1000px; }
#abs {
position: absolute; background-color: red;
width: 100px; height: 100px;
left: 25px; top: 25px;
}
#rel {
position: relative; background-color: green;
left: 50px; top: 100px; width: 100px; height: 75px;
}
</style>
<div id="scroller">
<div id="space">
<div id="abs"></div>
<div id="before"></div>
<div id="rel"></div>
</div>
</div>
<script>
// Tests that anchor node selection skips an absolute-positioned descendant of
// the scroller if and only if its containing block is outside the scroller.
test(() => {
var scroller = document.querySelector("#scroller");
var abs = document.querySelector("#abs");
var before = document.querySelector("#before");
var rel = document.querySelector("#rel");
// We should not anchor to #abs, because it does not move with the scroller.
scroller.scrollTop = 25;
before.style.height = "25px";
assert_equals(scroller.scrollTop, 50);
// Reset, make #scroller a containing block.
before.style.height = "0";
scroller.scrollTop = 0;
scroller.style.position = "relative";
// This time we should anchor to #abs.
scroller.scrollTop = 25;
before.style.height = "25px";
assert_equals(scroller.scrollTop, 25);
}, "Abs-pos descendant with containing block outside the scroller.");
</script>
|
