blob: 574c97f9245a515ae54b2073783321f986d9de56 [file] [log] [blame]
<!DOCTYPE html>
<!--
| This test checks that calling "unobserve" on a target that has not been
| "observed" by a particular observer does not cause a crash.
| Any observed targets should become green, and any elements that have not
| been observed should stay yellow.
| 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 createObserversAndUnobserveTargets() {
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 an observer and observe elements. The elements should become
// green.
var observerA = new IntersectionObserver(handleIntersect, options);
observerA.observe(firstTargetElement);
observerA.observe(secondTargetElement);
observerA.observe(thirdTargetElement);
// Unobserve elements that have never been observed. Nothing should
// change, and nothing should crash.
observerA.unobserve(fourthTargetElement);
observerA.unobserve(fifthTargetElement);
// Create a different observer and attempt to observe an element that
// has been observed by another observer.
// Again, nothing should change or crash.
var observerB = new IntersectionObserver(handleIntersect, options);
observerB.unobserve(thirdTargetElement);
}
createObserversAndUnobserveTargets();
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
}
});
</script>
</body>
</html>