blob: d2a40dd8987e6bfdd33ccae4f74d864484593864 [file] [log] [blame]
<!DOCTYPE html>
<script src="helper-functions.js"></script>
<div style="height: 200px; width: 100px;"></div>
<div id="target" style="background-color: green; width:100px; height:100px"></div>
<div style="height: 200px; width: 100px;"></div>
<script>
var port;
var entries = [];
var target = document.getElementById('target');
var scroller = document.scrollingElement;
var nextStep;
// Note that we never use RAF in this code, because this frame might get render-throttled.
// Instead of RAF-ing, we just post an empty message to the parent window, which will
// RAF when it is received, and then send us a message to cause the next step to run.
function observer_callback(changes) {
for (var i in changes)
entries.push(changes[i]);
}
// Use a rootMargin here, and verify it does NOT get applied for the cross-origin case.
var observer = new IntersectionObserver(observer_callback, {rootMargin: "7px"});
observer.observe(target);
function step0() {
setTimeout(function() {
nextStep = step1;
port.postMessage({actual: entries.map(entryToJson), expected: []}, "*");
entries = [];
port.postMessage({scrollTo: 200}, "*");
});
}
function step1() {
setTimeout(function() {
port.postMessage({actual: entries.map(entryToJson), expected: []}, "*");
entries = [];
scroller.scrollTop = 250;
nextStep = step2;
port.postMessage({}, "*");
});
}
function step2() {
setTimeout(function() {
var expected = [{
boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
intersectionRect: coordinatesToClientRectJson(0, 108, 58, 8),
rootBounds: "null",
target: target.id
}];
port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*");
entries = [];
nextStep = step3;
port.postMessage({scrollTo: 100}, "*");
});
}
function step3() {
setTimeout(function() {
var expected = [{
boundingClientRect: coordinatesToClientRectJson(-42, 108, 58, 8),
intersectionRect: coordinatesToClientRectJson(0, 0, 0, 0),
rootBounds: "null",
target: target.id
}];
port.postMessage({actual: entries.map(entryToJson), expected: expected}, "*");
port.postMessage({DONE: 1}, "*");
});
}
function handleMessage(event)
{
port = event.source;
nextStep();
}
nextStep = step0;
window.addEventListener("message", handleMessage);
</script>