position-absolute-overflow-visible-and-not-visible.html (1238B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width,initial-scale=1"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="../resources/intersection-observer-test-utils.js"></script> 8 <style> 9 html, body { 10 margin: 0; 11 padding: 0; 12 height: 200px; 13 width: 100%; 14 } 15 #parent { 16 position: relative; 17 height: 200px; 18 width: 200px; 19 background-color: rgb(250, 221, 221); 20 overflow-y: clip; 21 overflow-x: visible; 22 } 23 #child { 24 background-color: rgb(208, 250, 208); 25 position: absolute; 26 left: 100%; 27 width: 200px; 28 height: 200px; 29 } 30 </style> 31 </head> 32 <body> 33 <div id="parent"> 34 <div id="child"></div> 35 </div> 36 </body> 37 <script> 38 const test = async_test("ParentWithOverflowVisibleAndNotVisible"); 39 const child = document.getElementById("child"); 40 const observer = new IntersectionObserver((entries) => { 41 test.step(() => { 42 assert_true(entries[0].isIntersecting); 43 assert_equals(entries[0].intersectionRatio, 1.0); 44 assert_equals(entries[0].intersectionRect.height, 200); 45 assert_equals(entries[0].intersectionRect.width, 200); 46 }); 47 test.done(); 48 }); 49 observer.observe(child); 50 </script> 51 </html>