grow-height-and-scrolled.html (1093B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <meta name="help" href="https://crbug.com/40895558"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="./resources/intersection-observer-test-utils.js"></script> 7 8 <div id="target" style="background: green"> 9 <div id="content" style="height: 100vh"></div> 10 </div> 11 12 <script> 13 var entries = []; 14 new IntersectionObserver(function(changes) { 15 target.style.background = changes[0].isIntersecting ? 'green' : 'red'; 16 entries = entries.concat(changes); 17 }, {root: document}).observe(target); 18 19 runTestCycle(function() { 20 assert_equals(entries.length, 1, "Initial notification"); 21 runTestCycle(scroll); 22 content.style.height = "300vh"; 23 }, "IntersectionObserver should only report intersection change after the target grows height and is scrolled."); 24 25 function scroll() { 26 runTestCycle(check_no_new_entries); 27 window.scrollTo(0, 10000); 28 } 29 30 function check_no_new_entries() { 31 assert_equals(entries.length, 1, "No new notifications"); 32 } 33 </script>