blob: 1d26123f4a4f7dba3f1dd132a7ef716807901f82 [file] [log] [blame]
<!DOCTYPE html>
<!--
| This test checks that the intersection ratios are correctly computed for an
| observer with multiple targets.
| The target elements are initially transparent, but if the intersection ratios
| are computed correctly they turn opaque (become visibly green).
| https://www.w3.org/TR/intersection-observer/
-->
<html>
<head>
<style>
div {
position: absolute;
}
#root {
background-color: red;
width: 400px;
height: 200px;
}
#firsttarget {
background-color: rgba(0, 128, 0, 0);
width: 100px;
height: 200px;
margin: 50px;
}
#secondtarget {
background-color: rgba(0, 128, 0, 0);
width: 200px;
height: 100px;
margin: 50px 350px;
}
</style>
</head>
<body>
<div id="root">
<div id="firsttarget"></div>
<div id="secondtarget"></div>
</div>
<script>
if (window.testRunner) {
window.testRunner.waitUntilDone();
}
window.addEventListener("load", function() {
var rootElement = document.querySelector('#root');
var firstTargetElement = document.querySelector('#firsttarget');
var secondTargetElement = document.querySelector('#secondtarget');
var firstIntersectionRatio = 0.75;
var secondIntersectionRatio = 0.25;
function handleIntersect(entries, observer) {
entries.forEach(function(entry) {
console.log(entry.intersectionRatio);
if (entry.target == firstTargetElement &&
entry.intersectionRatio == firstIntersectionRatio) {
entry.target.style.backgroundColor = "rgba(0, 128, 0, 255)";
}
if (entry.target == secondTargetElement &&
entry.intersectionRatio == secondIntersectionRatio) {
entry.target.style.backgroundColor = "rgba(0, 128, 0, 255)";
}
});
}
function createObserver() {
var options = {
root: rootElement,
rootMargin: "0px",
threshold: 0.0
};
var observer = new IntersectionObserver(handleIntersect, options);
observer.observe(firstTargetElement);
observer.observe(secondTargetElement);
}
createObserver();
if (window.testRunner) {
window.testRunner.DoNonMeasuredLayout();
window.setTimeout(function() { window.testRunner.notifyDone(); }, 0);
}
});
</script>
</body>
</html>