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
|
<!DOCTYPE html>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/intersection-observer-test-utils.js"></script>
<style>
pre, #log {
position: absolute;
top: 120px;
left: 0;
}
#scroller {
width: 250px;
overflow: auto;
}
#overflow {
width: 1000px;
}
.content {
width: 100px;
height: 20px;
padding: 40px 0;
text-align: center;
background-color: grey;
display: inline-block;
}
</style>
<div id="scroller">
<div id="overflow">
<span><div class="content">1</div></span>
<span><div class="content">2</div></span>
<span><div class="content">3</div></span>
<span id="target"><div class="content">4</div></span>
<span><div class="content">5</div></span>
</div>
</div>
<script>
var vw = document.documentElement.clientWidth;
var vh = document.documentElement.clientHeight;
var entries = [];
var scroller, target, spaceWidth, targetOffsetLeft, targetOffsetTop;
runTestCycle(function() {
scroller = document.getElementById("scroller");
assert_true(!!scroller, "scroller exists");
target = document.getElementById("target");
assert_true(!!target, "target exists");
var observer = new IntersectionObserver(function(changes) {
entries = entries.concat(changes)
});
observer.observe(target);
entries = entries.concat(observer.takeRecords());
assert_equals(entries.length, 0, "No initial notifications.");
runTestCycle(step0, "First rAF");
}, "Inline target");
function step0() {
// Measure space width between two adjacent inlines.
let nextEl = target.nextElementSibling;
spaceWidth = nextEl.offsetLeft - target.offsetLeft - target.offsetWidth;
// 8px body margin + 3 preceding siblings @ (100px width + spaceWidth) each
targetOffsetLeft = 8 + 300 + (spaceWidth * 3);
// 8px body margin + 40px top padding
targetOffsetTop = 48;
let left = targetOffsetLeft;
let right = left + 100;
let top = targetOffsetTop;
let bottom = top + target.offsetHeight;
scroller.scrollLeft = 90;
runTestCycle(step1, "scroller.scrollLeft = 90");
checkLastEntry(entries, 0, [left, right, top, bottom,
0, 0, 0, 0, 0, vw, 0, vh, false]);
}
function step1() {
// -90px for scroll offset
let left = targetOffsetLeft - 90;
let right = left + 100;
let top = targetOffsetTop;
let bottom = top + target.offsetHeight;
// 8px body margin + 250px client width of scroller
let scrollerRight = 258;
checkLastEntry(entries, 1, [left, right, top, bottom,
left, scrollerRight, top, bottom,
0, vw, 0, vh, true]);
}
</script>
|
