position-sticky-large-top-2.tentative.html (1591B)
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-2-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 padding: 5px 3px 0 8px; 17 overflow: auto; 18 height: 200px; 19 width: 200px; 20 } 21 22 .block { 23 width: 150px; 24 height: 200px; 25 background: yellow; 26 } 27 28 .sticky { 29 position: sticky; 30 background: purple; 31 width: 50px; 32 height: 50px; 33 top: 200px; 34 } 35 </style> 36 <script> 37 function runTest() { 38 document.getElementById("scroll2").scrollTop = 50; 39 } 40 </script> 41 42 <body onload="runTest();"> 43 <!-- test before scroll --> 44 <div class="scroll"> 45 <span> 46 <div class="sticky"></div> 47 </span> 48 <div class="block"></div> 49 </div> 50 51 <!-- test after scroll --> 52 <div class="scroll" id="scroll2"> 53 <span> 54 <div class="sticky"></div> 55 </span> 56 <div class="block"></div> 57 </div> 58 </body> 59 </html>