same-document-no-root.html (1783B)
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 #target { 17 width: 100px; 18 height: 100px; 19 background-color: green; 20 } 21 </style> 22 23 <div class="spacer"></div> 24 <div id="target"></div> 25 <div class="spacer"></div> 26 27 <script> 28 var vw = document.documentElement.clientWidth; 29 var vh = document.documentElement.clientHeight; 30 31 var entries = []; 32 var target; 33 34 runTestCycle(function() { 35 target = document.getElementById("target"); 36 assert_true(!!target, "target exists"); 37 var observer = new IntersectionObserver(function(changes) { 38 entries = entries.concat(changes) 39 }); 40 observer.observe(target); 41 entries = entries.concat(observer.takeRecords()); 42 assert_equals(entries.length, 0, "No initial notifications."); 43 runTestCycle(step0, "First rAF."); 44 }, "IntersectionObserver in a single document using the implicit root."); 45 46 function step0() { 47 document.scrollingElement.scrollTop = 300; 48 runTestCycle(step1, "document.scrollingElement.scrollTop = 300"); 49 checkLastEntry(entries, 0, [8, 108, vh + 108, vh + 208, 0, 0, 0, 0, 0, vw, 0, vh, false]); 50 } 51 52 function step1() { 53 document.scrollingElement.scrollTop = 100; 54 runTestCycle(step2, "document.scrollingElement.scrollTop = 100"); 55 checkLastEntry(entries, 1, [8, 108, vh - 192, vh - 92, 8, 108, vh - 192, vh - 92, 0, vw, 0, vh, true]); 56 } 57 58 function step2() { 59 document.scrollingElement.scrollTop = 0; 60 checkLastEntry(entries, 2, [8, 108, vh + 8, vh + 108, 0, 0, 0, 0, 0, vw, 0, vh, false]); 61 } 62 </script>