| <!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> |
