| <!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 { |
| height: 40px; |
| width: 40px; |
| background-color: green; |
| } |
| |
| #scroller { |
| box-sizing: border-box; |
| width: 100px; |
| height: 100px; |
| overflow: hidden; |
| padding-top: 100px; |
| } |
| </style> |
| |
| <div id="scroller"> |
| <div id="target"></div> |
| </div> |
| |
| <script> |
| async_test((t) => { |
| let options = { |
| scrollMargin: '20px', |
| threshold: [0] |
| } |
| let observer = new IntersectionObserver(t.step_func_done((entries) => { |
| assert_true(entries[0].isIntersecting, "isIntersecting"); |
| assert_approx_equals(entries[0].intersectionRatio, 0.5, 0.001); |
| }), options); |
| observer.observe(document.getElementById("target")); |
| }, "IntersectionObserver's scroll margin"); |
| </script> |
