scroll-margin-nested-3.html (1395B)
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 #scroller3 { width: 160px; height: 160px; overflow: hidden; } 12 #spacer { width: 50px; height: 100px; } 13 #target { width: 50px; height: 50px; background-color: green; } 14 </style> 15 16 <div id=scroller3> 17 <div id=scroller2> 18 <div id=scroller> 19 <div id=spacer></div> 20 <div id=target></div> 21 </div> 22 </div> 23 </div> 24 25 <script> 26 let entries = []; 27 28 window.onload = function() { 29 runTestCycle(testIntersection, "Test scroll margin intersection"); 30 31 const observer = new IntersectionObserver( 32 es => entries = entries.concat(es), 33 { 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, 0.2, 0.001, "intersectionRatio"); 44 } 45 </script>