scroll-margin-iframe.html (1510B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="./resources/intersection-observer-test-utils.js"></script> 7 8 <iframe 9 id="target-iframe" 10 src="resources/iframe-no-root-subframe.html" 11 width="300" 12 height="200" 13 ></iframe> 14 15 <script> 16 var iframe = document.getElementById("target-iframe"); 17 var target; 18 var entries = []; 19 20 iframe.onload = function() { 21 runTestCycle(function() { 22 assert_true(!!iframe, "iframe exists"); 23 24 target = iframe.contentDocument.getElementById("target"); 25 assert_true(!!target, "Target element exists."); 26 27 var observer = new IntersectionObserver(function(changes) { 28 entries = entries.concat(changes) 29 }, { 30 scrollMargin: "18px" 31 }); 32 observer.observe(target); 33 34 entries = entries.concat(observer.takeRecords()); 35 assert_equals(entries.length, 0, "No initial notifications."); 36 37 runTestCycle(testIntersection, "Test scroll margin intersection"); 38 }, "Observer with the implicit root; target in a same-origin iframe."); 39 }; 40 41 function testIntersection() { 42 assert_equals(entries.length, 1, "IntersectionObserverEntryCount"); 43 assert_true(entries[0].isIntersecting, "isIntersecting"); 44 assert_approx_equals(entries[0].intersectionRatio, 0.1, 0.001, "intersectionRatio"); 45 } 46 </script>