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