position-sticky-child-multicolumn.html (1380B)
1 <!DOCTYPE html> 2 <title>Multicolumn under position:sticky should be positioned correctly</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <link rel="match" href="position-sticky-child-multicolumn-ref.html" /> 5 <link rel="author" title="Philip Rogers" href="mailto:pdr@chromium.org" /> 6 <meta name="assert" content="This test checks that a multicolumn element is positioned relative to a sticky position" /> 7 8 <script src="../resources/ref-rectangle.js"></script> 9 10 <style> 11 body { 12 margin: 0; 13 } 14 #scroller { 15 overflow-y: scroll; 16 width: 200px; 17 height: 200px; 18 } 19 #sticky { 20 position: sticky; 21 top: 10px; 22 margin: 10px; 23 } 24 #multicolumn { 25 width: 100px; 26 height: 100px; 27 background: green; 28 columns: 1; 29 } 30 #contents { 31 margin-left: 10%; 32 margin-top: 10%; 33 width: 80%; 34 height: 80%; 35 background: lightgreen; 36 } 37 #spacer { 38 height: 400px; 39 } 40 </style> 41 42 <div id="scroller"> 43 <div id="sticky"> 44 <div id="multicolumn"> 45 <div id="contents"></div> 46 </div> 47 </div> 48 <div id="spacer"></div> 49 </div> 50 51 <div>You should see a light green box above with a dark green border, no blue should be visible.</div> 52 53 <script> 54 window.addEventListener('load', function() { 55 scroller.scrollTop = 100; 56 createIndicatorForStickyElements(document.querySelectorAll('.sticky')); 57 }); 58 </script>