scroll-margin-clip-path.html (1232B)
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 { 10 width: 100px; 11 height: 100px; 12 overflow: hidden; 13 background-color: gray; 14 clip-path: inset(10%); 15 } 16 #spacer { width: 50px; height: 100px; } 17 #target { width: 50px; height: 50px; background-color: green; } 18 </style> 19 20 <div id=scroller> 21 <div id=spacer></div> 22 <div id=target></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: "20px" 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>