disconnect.html (1371B)
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 entries = []; 29 var observer; 30 var target; 31 32 runTestCycle(function() { 33 target = document.getElementById("target"); 34 assert_true(!!target, "target exists"); 35 observer = new IntersectionObserver(function(changes) { 36 entries = entries.concat(changes) 37 }); 38 observer.observe(target); 39 entries = entries.concat(observer.takeRecords()); 40 assert_equals(entries.length, 0, "No initial notifications."); 41 runTestCycle(step0, "First rAF."); 42 }, "IntersectionObserver should not deliver pending notifications after disconnect()."); 43 44 function step0() { 45 runTestCycle(step1, "observer.disconnect()"); 46 document.scrollingElement.scrollTop = 300; 47 observer.disconnect(); 48 assert_equals(entries.length, 1, "Initial notification."); 49 } 50 51 function step1() { 52 assert_equals(entries.length, 1, "No new notifications."); 53 } 54 </script>