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
|
<!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: 0;
left: 200px;
}
.spacer {
height: calc(100vh + 100px);
}
</style>
<div id="leading-space" class="spacer"></div>
<div id="trailing-space" class="spacer"></div>
<script>
// Pick this number to be comfortably greater than the length of two frames at 60Hz.
var timeSkew = 40;
var topWindowEntries = [];
var iframeWindowEntries = [];
var targetIframe;
var topWindowTimeBeforeNotification;
var iframeWindowTimeBeforeNotification;
async_test(function(t) {
t.step_timeout(function() {
targetIframe = document.createElement("iframe");
assert_true(!!targetIframe, "iframe exists");
targetIframe.src = "resources/timestamp-subframe.html";
var trailingSpace = document.getElementById("trailing-space");
assert_true(!!trailingSpace, "trailing-space exists");
trailingSpace.parentNode.insertBefore(targetIframe, trailingSpace);
targetIframe.onload = function() {
var target = targetIframe.contentDocument.getElementById("target");
var iframeScroller = targetIframe.contentDocument.scrollingElement;
// Observer created here, callback created in iframe context. Timestamps should be
// from this window.
var observer = new IntersectionObserver(
targetIframe.contentDocument.createObserverCallback(topWindowEntries), {});
assert_true(!!observer, "Observer exists");
observer.observe(target);
// Callback created here, observer created in iframe. Timestamps should be
// from iframe window.
observer = targetIframe.contentDocument.createObserver(function(newEntries) {
iframeWindowEntries = iframeWindowEntries.concat(newEntries);
});
observer.observe(target);
runTestCycle(step1, "First rAF after iframe is loaded.");
t.done();
};
}, timeSkew);
}, "Check that timestamps correspond to the to execution context that created the observer.");
function step1() {
document.scrollingElement.scrollTop = 200;
targetIframe.contentDocument.scrollingElement.scrollTop = 250;
topWindowTimeBeforeNotification = performance.now();
iframeWindowTimeBeforeNotification = targetIframe.contentWindow.performance.now();
runTestCycle(step2, "Generate notifications.");
assert_equals(topWindowEntries.length, 1, "One notification to top window observer.");
assert_equals(iframeWindowEntries.length, 1, "One notification to iframe observer.");
}
function step2() {
document.scrollingElement.scrollTop = 0;
var topWindowTimeAfterNotification = performance.now();
var iframeWindowTimeAfterNotification = targetIframe.contentWindow.performance.now();
assert_approx_equals(
topWindowEntries[1].time - topWindowTimeBeforeNotification,
iframeWindowEntries[1].time - iframeWindowTimeBeforeNotification,
// Since all intersections are computed in a tight loop between 2 frames,
// an epsilon of 16ms (the length of one frame at 60Hz) turned out to be
// reliable, even at slow frame rates.
16,
"Notification times are relative to the expected time origins");
assert_equals(topWindowEntries.length, 2, "Top window observer has two notifications.");
assert_between_inclusive(
topWindowEntries[1].time,
topWindowTimeBeforeNotification,
topWindowTimeAfterNotification,
"Notification to top window observer is within the expected range.");
assert_equals(iframeWindowEntries.length, 2, "Iframe observer has two notifications.");
assert_between_inclusive(
iframeWindowEntries[1].time,
iframeWindowTimeBeforeNotification,
iframeWindowTimeAfterNotification,
"Notification to iframe observer is within the expected range.");
}
</script>
|
