| <!DOCTYPE html> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="./resources/intersection-observer-test-utils.js"></script> |
| |
| <iframe |
| id="target-iframe" |
| src="resources/iframe-no-root-subframe.html" |
| width="300" |
| height="200" |
| ></iframe> |
| |
| <script> |
| var iframe = document.getElementById("target-iframe"); |
| var target; |
| var entries = []; |
| |
| iframe.onload = function() { |
| runTestCycle(function() { |
| assert_true(!!iframe, "iframe exists"); |
| |
| target = iframe.contentDocument.getElementById("target"); |
| assert_true(!!target, "Target element exists."); |
| |
| var observer = new IntersectionObserver(function(changes) { |
| entries = entries.concat(changes) |
| }, { |
| scrollMargin: "18px" |
| }); |
| observer.observe(target); |
| |
| entries = entries.concat(observer.takeRecords()); |
| assert_equals(entries.length, 0, "No initial notifications."); |
| |
| runTestCycle(testIntersection, "Test scroll margin intersection"); |
| }, "Observer with the implicit root; target in a same-origin iframe."); |
| }; |
| |
| function testIntersection() { |
| assert_equals(entries.length, 1, "IntersectionObserverEntryCount"); |
| assert_true(entries[0].isIntersecting, "isIntersecting"); |
| assert_approx_equals(entries[0].intersectionRatio, 0.1, 0.001, "intersectionRatio"); |
| } |
| </script> |
