62 lines
2 KiB
HTML
62 lines
2 KiB
HTML
<!DOCTYPE html>
|
|
<title>IntersectionObserver observing elements with css zoom</title>
|
|
<link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org">
|
|
<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>
|