scroll-and-root-margin.html (1126B)
1 <!DOCTYPE html> 2 <meta name="viewport" content="width=device-width,initial-scale=1"> 3 <link rel="help" href="https://www.w3.org/TR/intersection-observer/#dom-intersectionobserver-scrollmargin"> 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 <style> 9 #spacer { width: 50px; height: calc(100vh + 10px); } 10 #target { width: 50px; height: 50px; background-color: green; } 11 </style> 12 13 <div id=spacer></div> 14 <div id=target></div> 15 16 <script> 17 let entries = []; 18 19 window.onload = function() { 20 runTestCycle(testIntersection, "Test scroll margin intersection"); 21 22 const observer = new IntersectionObserver( 23 es => entries = entries.concat(es), 24 { 25 scrollMargin: "10px", 26 rootMargin: "10px" 27 } 28 ); 29 observer.observe(target); 30 }; 31 32 function testIntersection() { 33 assert_equals(entries.length, 1, "IntersectionObserverEntryCount"); 34 assert_true(entries[0].isIntersecting, "isIntersecting"); 35 assert_approx_equals(entries[0].intersectionRatio, 0.04, 0.0001, "intersectionRatio"); 36 } 37 </script>