35 lines
1.2 KiB
HTML
35 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="help" href="https://www.w3.org/TR/intersection-observer/#intersection-observer-interface">
|
|
<script src="../resources/testharness.js"></script>
|
|
<script src="../resources/testharnessreport.js"></script>
|
|
<style>
|
|
#target {
|
|
position: absolute;
|
|
height: 40px;
|
|
width: 100px;
|
|
top: -40px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
|
|
|
|
<div id="target"></div>
|
|
|
|
<script>
|
|
// The target is positioned 40 px above the viewport so should fully intersect
|
|
// when the viewport is expanded by a root margin of 40 px, no matter what
|
|
// page zoom factor is used, since page zoom should equally affect both the
|
|
// positioning of the target and the size of the root margin.
|
|
window.internals.setPageZoomFactor(2);
|
|
async_test((t) => {
|
|
let options = {
|
|
rootMargin: '40px 0px 0px 0px',
|
|
threshold: [1]
|
|
}
|
|
let observer = new IntersectionObserver(t.step_func_done((entries) => {
|
|
assert_true(entries[0].isIntersecting, "isIntersecting");
|
|
}), options);
|
|
observer.observe(document.getElementById("target"));
|
|
}, "IntersectionObserver's root margin accounts for zooming");
|
|
</script>
|