observer-in-iframe-subframe.html (1670B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="./intersection-observer-test-utils.js"></script> 5 6 <style> 7 #root { 8 width: 200px; 9 height: 200px; 10 } 11 #scroller { 12 width: 160px; 13 height: 200px; 14 overflow-y: scroll; 15 } 16 #target { 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 .spacer { 22 height: 300px; 23 } 24 </style> 25 26 <div id="root"> 27 <div id="scroller"> 28 <div class="spacer"></div> 29 <div id="target"></div> 30 <div class="spacer"></div> 31 </div> 32 </div> 33 34 <script> 35 setup({message_events: [], output_document: window.parent.document}); 36 37 var entries = []; 38 var root, scroller, target; 39 40 runTestCycle(function() { 41 root = document.getElementById("root"); 42 assert_true(!!root, "Root element exists."); 43 scroller = document.getElementById("scroller"); 44 assert_true(!!scroller, "Scroller element exists."); 45 target = document.getElementById("target"); 46 assert_true(!!target, "Target element exists."); 47 var observer = new IntersectionObserver(function(changes) { 48 entries = entries.concat(changes) 49 }, {root: root}); 50 observer.observe(target); 51 entries = entries.concat(observer.takeRecords()); 52 assert_equals(entries.length, 0, "No initial notifications.") 53 runTestCycle(step1, "First rAF."); 54 }, "IntersectionObserver in iframe with explicit root."); 55 56 function step1() { 57 scroller.scrollTop = 250; 58 runTestCycle(step2, "scroller.scrollTop = 250"); 59 checkLastEntry(entries, 0, [8, 108, 308, 408, 0, 0, 0, 0, 8, 208, 8, 208, false]); 60 } 61 62 function step2() { 63 checkLastEntry(entries, 1, [8, 108, 58, 158, 8, 108, 58, 158, 8, 208, 8, 208, true]); 64 } 65 </script>