blob: e23d332936b2030de37ac011fea2c7ae4f93f26f [file] [log] [blame]
<!DOCTYPE html>
<!--
| This test checks that the observers no longer check the intersections
| for targets that have been unobserved.
| Observed targets become green if they intersect with the root (i.e. are
| visible on the screen). Unobserved targets do not change color.
| https://www.w3.org/TR/intersection-observer/
-->
<html>
<head>
<style>
div {
background-color: yellow;
width: 50px;
height: 100px;
margin: 25px;
display: inline-block;
}
</style>
</head>
<body>
<div id="firsttarget"></div>
<div id="secondtarget"></div>
<div id="thirdtarget"></div>
<div id="fourthtarget"></div>
<div id="fifthtarget"></div>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
window.addEventListener("load", function() {
function handleIntersect(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.style.backgroundColor = "green";
}
});
}
function createObserverAndUnobserveTargets() {
var firstTargetElement = document.querySelector('#firsttarget');
var secondTargetElement = document.querySelector('#secondtarget');
var thirdTargetElement = document.querySelector('#thirdtarget');
var fourthTargetElement = document.querySelector('#fourthtarget');
var fifthTargetElement = document.querySelector('#fifthtarget');
var options = {
root: null,
rootMargin: "0px",
threshold: 0.0
};
// Create observer and observe elements.
var observer = new IntersectionObserver(handleIntersect, options);
observer.observe(firstTargetElement);
observer.observe(secondTargetElement);
observer.observe(thirdTargetElement);
observer.observe(fourthTargetElement);
observer.observe(fifthTargetElement);
// Unobserve some of these targets. When the observer checks for
// intersections, these elements should not be included.
observer.unobserve(secondTargetElement);
observer.unobserve(fourthTargetElement);
observer.unobserve(fifthTargetElement);
}
createObserverAndUnobserveTargets();
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
}
});
</script>
</body>
</html>