text-target.html (1925B)
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 </style> 17 18 <div class="spacer"></div> 19 <br id="target"> 20 <div class="spacer"></div> 21 22 <script> 23 var vw = document.documentElement.clientWidth; 24 var vh = document.documentElement.clientHeight; 25 26 var entries = []; 27 var target; 28 var tw, th; 29 30 runTestCycle(function() { 31 target = document.getElementById("target"); 32 let target_rect = target.getBoundingClientRect(); 33 tw = target_rect.width; 34 th = target_rect.height; 35 assert_true(!!target, "target exists"); 36 var observer = new IntersectionObserver(function(changes) { 37 entries = entries.concat(changes) 38 }); 39 observer.observe(target); 40 entries = entries.concat(observer.takeRecords()); 41 assert_equals(entries.length, 0, "No initial notifications."); 42 runTestCycle(step0, "First rAF."); 43 }, "IntersectionObserver observing a br element."); 44 45 function step0() { 46 document.scrollingElement.scrollTop = 300; 47 runTestCycle(step1, "document.scrollingElement.scrollTop = 300"); 48 // The numbers in brackets are target client rect; intersection rect; 49 // and root bounds. 50 checkLastEntry(entries, 0, [8, 8 + tw, vh + 108, vh + 108 + th, 0, 0, 0, 0, 0, vw, 0, vh, false]); 51 } 52 53 function step1() { 54 document.scrollingElement.scrollTop = 100; 55 runTestCycle(step2, "document.scrollingElement.scrollTop = 100"); 56 checkLastEntry(entries, 1, [8, 8 + tw, vh - 192, vh - 192 + th, 8, 8 + tw, vh - 192, vh - 192 + th, 0, vw, 0, vh, true]); 57 } 58 59 function step2() { 60 document.scrollingElement.scrollTop = 0; 61 checkLastEntry(entries, 2, [8, 8 + tw, vh + 8, vh + 8 + th, 0, 0, 0, 0, 0, vw, 0, vh, false]); 62 } 63 </script>