position-sticky-large-top.tentative.html (1502B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Position Test: Test position:sticky element with large top in an overflow container</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-position/#sticky-pos"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1598112"> 9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2794"> 10 <link rel="match" href="position-sticky-large-top-ref.html"> 11 <meta name="assert" content="This test verifies the position of a position:sticky element with large top value can be reached by scrolling the overflow container."> 12 13 <style> 14 .scroll { 15 border: 5px solid blue; 16 overflow: auto; 17 height: 200px; 18 width: 200px; 19 } 20 21 .block { 22 width: 100%; 23 height: 200px; 24 background: yellow; 25 } 26 27 .sticky { 28 position: sticky; 29 background: purple; 30 width: 50px; 31 height: 50px; 32 top: 200px; 33 } 34 </style> 35 <script> 36 function runTest() { 37 document.getElementById("scroll2").scrollTop = 50; 38 } 39 </script> 40 41 <body onload="runTest();"> 42 <!-- test before scroll --> 43 <div class="scroll"> 44 <div class="sticky"></div> 45 <div class="block"></div> 46 </div> 47 48 <!-- test after scroll --> 49 <div class="scroll" id="scroll2"> 50 <div class="sticky"></div> 51 <div class="block"></div> 52 </div> 53 </body> 54 </html>