blob: 7d982cf99432d4324b1cf0cef01858ecd458828a [file] [log] [blame]
<!DOCTYPE html>
<!--
| This test checks that the observer objects get updated when the elements
| themselves move around.
| The color of the target element is blue if there is an intersection and
| green if there is not. In this test, the initial observation turns the
| target blue, but when the target moves above the root, it turns green.
| https://www.w3.org/TR/intersection-observer/
-->
<html>
<head>
<style>
div {
position: absolute;
}
#root {
margin: 100px;
background-color: red;
width: 250px;
height: 150px;
}
#target {
width: 150px;
height: 50px;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div id="root">
<div id="target"></div>
</div>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
window.addEventListener("load", function() {
var rootElement = document.querySelector('#root');
var targetElement = document.querySelector('#target');
function handleIntersect(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.style.backgroundColor = "blue";
} else {
entry.target.style.backgroundColor = "green";
}
});
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
}
}
var options = {
root: rootElement,
rootMargin: "0px",
};
var observer = new IntersectionObserver(handleIntersect, options);
observer.observe(targetElement);
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
}
// Without waiting for requestAnimationFrame, only the movement is observed.
requestAnimationFrame(() => {
window.setTimeout(() => {
// Move the target element so that it is clearly no longer
// intersecting. An intersection observer update should be
// triggered and the callback should run.
targetElement.style.top = "-60px";
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
}
}, 0);
});
// Fail after 3 seconds if requestAnimationFrame never triggered.
window.setTimeout(function() {
window.testRunner.notifyDone();
}, 3000);
});
</script>
</body>
</html>