scroll-margin-non-scrolling-root.html (1452B)
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 #scroller { width: 100px; height: 100px; overflow: hidden; background-color: gray; } 10 #spacer { width: 50px; height: 110px; background-color: darkgray; } 11 #root { height: 75; width: 75; background-color: blue; } 12 #target { width: 50px; height: 50px; background-color: green; } 13 #spacer2 { width: 10px; height: 10px; background-color: lightgray; } 14 </style> 15 16 <div id=scroller> 17 <div id=spacer></div> 18 <div id=root> 19 <div id=spacer2></div> 20 <div id=target></div> 21 </div> 22 </div> 23 24 <script> 25 let entries = []; 26 27 window.onload = function() { 28 runTestCycle(testIntersection, "Test scroll margin intersection"); 29 30 const observer = new IntersectionObserver( 31 es => entries = entries.concat(es), 32 { 33 root: document.querySelector("#root"), 34 scrollMargin: "10px" 35 } 36 ); 37 observer.observe(target); 38 }; 39 40 function testIntersection() { 41 assert_equals(entries.length, 1, "IntersectionObserverEntryCount"); 42 assert_true(entries[0].isIntersecting, "isIntersecting"); 43 assert_approx_equals(entries[0].intersectionRatio, 1.0, 0.001, "intersectionRatio"); 44 } 45 </script>