position-sticky-column-reverse-flex.html (901B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="assert" content="Position sticky works correctly with column-reverse flex" /> 5 <link rel="match" href="position-sticky-column-reverse-flex-ref.html" /> 6 <script src="/common/reftest-wait.js"></script> 7 8 <style> 9 #scroller { 10 position: relative; 11 display: flex; 12 flex-direction: column-reverse; 13 overflow-y: scroll; 14 width: 100px; 15 height: 100px; 16 scrollbar-width: none; 17 } 18 #sticky { 19 position: sticky; 20 bottom: 0; 21 width: 50px; 22 min-height: 50px; 23 background: green; 24 } 25 </style> 26 27 <div id=scroller> 28 <div id=sticky ></div> 29 <div style="min-height: 400px;"></div> 30 </div> 31 <script> 32 onload = () => { 33 scroller.scrollTo(0, -400); 34 takeScreenshot(); 35 } 36 </script> 37 </html>