position-sticky-overflow-clip-container.html (920B)
1 <!DOCTYPE html> 2 <html> 3 <title>Sticky elements should not consider overflow: clip containers as possible scroll ancestor</title> 4 <link rel="match" href="position-sticky-overflow-clip-container-ref.html" /> 5 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 6 <meta name="assert" content="This test checks that sticky elements do not consider overflow:clip containers as possible scroll ancestor"/> 7 <style> 8 body { 9 margin: 0; 10 overflow: hidden; /* hide scrollbars */ 11 } 12 13 #container { 14 height: 300px; 15 overflow: auto; 16 } 17 18 #overflowClipContainer { 19 overflow: clip; 20 height: 600px; 21 } 22 23 #sticky { 24 position: sticky; 25 top: 0; 26 height: 50px; 27 background-color: yellow; 28 } 29 </style> 30 <script> 31 function doTest() 32 { 33 container.scrollTo(0, 50); 34 } 35 window.addEventListener('load', doTest, false); 36 </script> 37 <div id="container"> 38 <div id="overflowClipContainer"> 39 <div id="sticky"></div> 40 </div> 41 </div>