document-scrolling-element-root.html (1587B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="./resources/intersection-observer-test-utils.js"></script> 6 7 <style> 8 pre, #log { 9 position: absolute; 10 top: 0; 11 left: 200px; 12 } 13 iframe { 14 height: 250px; 15 width: 150px; 16 border: 0; 17 } 18 </style> 19 <iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe> 20 21 <script> 22 var iframe = document.getElementById("target-iframe"); 23 var target; 24 var root; 25 var entries = []; 26 27 iframe.onload = function() { 28 runTestCycle(function() { 29 assert_true(!!iframe, "iframe exists"); 30 31 target = iframe.contentDocument.getElementById("target"); 32 assert_true(!!target, "Target element exists."); 33 var observer = new IntersectionObserver(function(changes) { 34 entries = entries.concat(changes) 35 }, { root: iframe.contentDocument }); 36 observer.observe(target); 37 entries = entries.concat(observer.takeRecords()); 38 assert_equals(entries.length, 0, "No initial notifications."); 39 runTestCycle(step0, "First rAF."); 40 }, "Observer with explicit root which is the document."); 41 }; 42 43 function step0() { 44 let vw = iframe.contentDocument.documentElement.clientWidth; 45 let vh = iframe.contentDocument.documentElement.clientHeight; 46 // The target element is partially clipped by the iframe's root scroller, so 47 // height of the intersection rect is (250 - 208) == 42. 48 checkLastEntry(entries, 0, [8, 108, 208, 308, 8, 108, 208, 250, 0, vw, 0, vh, true]); 49 } 50 </script>