<!DOCTYPE html>
<title>IntersectionObserver observing elements with css zoom</title>
<link rel="author" title="Yotam Hacohen" href="mailto:[email protected]">
<link rel="author" title="Google" href="http://www.google.com/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="resources/intersection-observer-test-utils.js"></script>
<head>
<style>
div {
width: 64px;
height: 64px;
background-color: blue
}
div.a {
zoom: 1.0;
width: 512px;
height: 512px;
}
div.b {
zoom: 4.0;
background-color: pink;
}
</style>
</head>
<body>
<div class="a" id="ToBeRemoved">
<div class="b" id="target"></div>
</div>
<script>
const viewportWidth = document.documentElement.clientWidth;
const viewportHeight = document.documentElement.clientHeight;
setup(() => {
window.entries = [];
window.target = document.getElementById("target");
window.targetRect = target.getBoundingClientRect();
});
runTestCycle(function() {
assert_true(!!target, "target exists");
const observer = new IntersectionObserver(function(changes) {
entries = entries.concat(changes);
});
observer.observe(target);
entries = entries.concat(observer.takeRecords());
assert_equals(entries.length, 0, "No initial notifications");
runTestCycle(validateIntersectionRect, "Validate intersection rect");
});
function validateIntersectionRect() {
// The numbers in brackets are target client rect; intersection rect;
// and root bounds.
checkLastEntry(entries, 0, [
// the 8 pixels comes from the html body padding.
8, 8 + 256, 8, 8 + 256,
8, 8 + 256, 8, 8 + 256,
0, viewportWidth, 0, viewportHeight,
true,
]);
}
</script>
</body>
Codebase Browser
chromium