position-sticky-grid.html (2480B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should work correctly with grid layout</title> 3 <link rel="match" href="position-sticky-grid-ref.html" /> 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 5 <meta name="assert" content="This test checks that position:sticky elements interoperate correctly with grid" /> 6 7 <script src="../resources/ref-rectangle.js"></script> 8 9 <style> 10 .scroller { 11 position: relative; 12 overflow-x: scroll; 13 overflow-y: hidden; 14 width: 300px; 15 height: 100px; 16 margin-bottom: 15px; 17 } 18 19 .grid-container { 20 display: grid; 21 grid-template-columns: 25% 25% 25% 25%; 22 grid-template-rows: 100%; 23 width: 400px; 24 height: 90px; 25 } 26 27 .sticky { 28 position: sticky; 29 left: 50px; 30 } 31 32 .green { 33 background-color: green; 34 } 35 36 .grid-item { 37 width: 100%; 38 height: 100%; 39 grid-row: 1; 40 } 41 42 .indicator { 43 position: absolute; 44 background-color: red; 45 width: 100px; 46 height: 90px; 47 } 48 49 .padding { 50 height: 1px; 51 width: 700px; 52 } 53 54 </style> 55 56 <script> 57 window.addEventListener('load', function() { 58 document.getElementById('scroller1').scrollLeft = 0; 59 document.getElementById('scroller2').scrollLeft = 150; 60 document.getElementById('scroller3').scrollLeft = 300; 61 createIndicatorForStickyElements(document.querySelectorAll('.sticky')); 62 }); 63 </script> 64 65 <p>You should see three green boxes of varying size below. There should be no red or blue.</p> 66 67 <div id="scroller1" class="scroller"> 68 <div class="grid-container"> 69 <div class="indicator" style="left: 100px;"></div> 70 <div class="grid-item" style="grid-column: 1;"></div> 71 <div class="sticky green grid-item" style="grid-column: 2;"></div> 72 <div class="green grid-item" style="grid-column: 3;"></div> 73 </div> 74 <div class="padding"></div> 75 </div> 76 77 <div id="scroller2" class="scroller"> 78 <div class="grid-container"> 79 <div class="indicator" style="left: 200px;"></div> 80 <div class="grid-item" style="grid-column: 1;"></div> 81 <div class="sticky green grid-item" style="grid-column: 2;"></div> 82 <div class="green grid-item" style="grid-column: 3;"></div> 83 </div> 84 <div class="padding"></div> 85 </div> 86 87 <div id="scroller3" class="scroller"> 88 <div class="grid-container"> 89 <div class="indicator" style="left: 300px;"></div> 90 <div class="grid-item" style="grid-column: 1;"></div> 91 <div class="sticky green grid-item" style="grid-column: 2;"></div> 92 <div class="green grid-item" style="grid-column: 3;"></div> 93 </div> 94 <div class="padding"></div> 95 </div>