isIntersecting-threshold.html (1496B)
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 <style> 7 #scroller { width: 100px; height: 100px; overflow: scroll; } 8 #scroller > div { height: 800px; } 9 #target { margin-top: 25px; height: 50px; background-color: blue; } 10 </style> 11 <div id="scroller"> 12 <div> 13 <div id="target"></div> 14 </div> 15 </div> 16 17 <script> 18 let entries = []; 19 20 window.onload = function() { 21 runTestCycle(step2, "At initial scroll position"); 22 23 scroller.scrollTop = 0; 24 let observer = new IntersectionObserver( 25 es => entries = entries.concat(es), 26 { threshold: 1 } 27 ); 28 observer.observe(target); 29 }; 30 31 function step2() { 32 runTestCycle(step3, "Scrolled to half way through target element"); 33 34 assert_equals(entries.length, 1); 35 assert_equals(entries[0].intersectionRatio, 1); 36 assert_equals(entries[0].isIntersecting, true); 37 scroller.scrollTop = 50; 38 } 39 40 function step3() { 41 runTestCycle(step4, "Scrolled to target element completely off screen"); 42 43 assert_equals(entries.length, 2); 44 assert_true(entries[1].intersectionRatio >= 0.5 && 45 entries[1].intersectionRatio < 1); 46 // See https://github.com/w3c/IntersectionObserver/issues/432 47 assert_equals(entries[1].isIntersecting, false); 48 scroller.scrollTop = 100; 49 } 50 51 function step4() { 52 assert_equals(entries.length, 2); 53 } 54 </script>