observer-without-js-reference.html (1300B)
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 <div class="spacer"></div> 23 <div id="target"></div> 24 <div class="spacer"></div> 25 26 <script> 27 var entries = []; 28 29 runTestCycle(function() { 30 var target = document.getElementById("target"); 31 assert_true(!!target, "Target exists"); 32 function createObserver() { 33 new IntersectionObserver(function(changes) { 34 entries = entries.concat(changes) 35 }).observe(target); 36 } 37 createObserver(); 38 runTestCycle(step0, "First rAF"); 39 }, "IntersectionObserver that is unreachable in js should still generate notifications."); 40 41 function step0() { 42 document.scrollingElement.scrollTop = 300; 43 runTestCycle(step1, "document.scrollingElement.scrollTop = 300"); 44 assert_equals(entries.length, 1, "One notification."); 45 } 46 47 function step1() { 48 document.scrollingElement.scrollTop = 0; 49 assert_equals(entries.length, 2, "Two notifications."); 50 } 51 </script>