iframe-no-root.html (2169B)
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 .spacer { 14 height: calc(100vh + 100px); 15 } 16 iframe { 17 height: 100px; 18 width: 150px; 19 } 20 </style> 21 22 <div class="spacer"></div> 23 <iframe id="target-iframe" src="resources/iframe-no-root-subframe.html"></iframe> 24 <div class="spacer"></div> 25 26 <script> 27 var vw = document.documentElement.clientWidth; 28 var vh = document.documentElement.clientHeight; 29 30 var iframe = document.getElementById("target-iframe"); 31 var target; 32 var entries = []; 33 34 iframe.onload = function() { 35 runTestCycle(function() { 36 assert_true(!!iframe, "iframe exists"); 37 38 target = iframe.contentDocument.getElementById("target"); 39 assert_true(!!target, "Target element exists."); 40 var observer = new IntersectionObserver(function(changes) { 41 entries = entries.concat(changes) 42 }); 43 observer.observe(target); 44 entries = entries.concat(observer.takeRecords()); 45 assert_equals(entries.length, 0, "No initial notifications."); 46 runTestCycle(step0, "First rAF."); 47 }, "Observer with the implicit root; target in a same-origin iframe."); 48 }; 49 50 function step0() { 51 document.scrollingElement.scrollTop = 200; 52 runTestCycle(step1, "document.scrollingElement.scrollTop = 200"); 53 checkLastEntry(entries, 0, [8, 108, 208, 308, 0, 0, 0, 0, 0, vw, 0, vh, false]); 54 } 55 56 function step1() { 57 iframe.contentDocument.scrollingElement.scrollTop = 250; 58 runTestCycle(step2, "iframe.contentDocument.scrollingElement.scrollTop = 250"); 59 assert_equals(entries.length, 1, "entries.length == 1"); 60 } 61 62 function step2() { 63 document.scrollingElement.scrollTop = 100; 64 runTestCycle(step3, "document.scrollingElement.scrollTop = 100"); 65 checkLastEntry(entries, 1, [8, 108, -42, 58, 8, 108, 0, 58, 0, vw, 0, vh, true]); 66 } 67 68 function step3() { 69 checkLastEntry(entries, 2, [8, 108, -42, 58, 0, 0, 0, 0, 0, vw, 0, vh, false]); 70 document.scrollingElement.scrollTop = 0; 71 } 72 </script>