position-sticky-rendering.html (3487B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should be rendered at their sticky offset</title> 3 <link rel="match" href="position-sticky-rendering-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 are rendered correctly" /> 6 7 <script src="../resources/ref-rectangle.js"></script> 8 9 <style> 10 .group { 11 display: inline-block; 12 position: relative; 13 width: 150px; 14 height: 250px; 15 } 16 17 .inlineGroup { 18 display: inline-block; 19 position: relative; 20 width: 250px; 21 height: 150px; 22 } 23 24 .scroller { 25 position: relative; 26 width: 100px; 27 height: 200px; 28 overflow-x: hidden; 29 overflow-y: auto; 30 } 31 32 .inlineGroup .scroller { 33 position: relative; 34 width: 200px; 35 height: 100px; 36 overflow-x: auto; 37 overflow-y: hidden; 38 } 39 40 .contents { 41 height: 500px; 42 } 43 44 .inlineGroup .contents { 45 height: 100%; 46 width: 500px; 47 } 48 49 .prepadding { 50 height: 100px; 51 } 52 53 .inlineGroup .prepadding { 54 display: inline-block; 55 height: 100%; 56 width: 100px; 57 } 58 59 .container { 60 height: 200px; 61 } 62 63 .inlineGroup .container { 64 display: inline-block; 65 height: 100%; 66 width: 200px; 67 } 68 69 .filler { 70 height: 100px; 71 } 72 73 .inlineGroup .filler { 74 display: inline-block; 75 height: 100%; 76 width: 100px; 77 } 78 79 .indicator { 80 background-color: red; 81 position: absolute; 82 } 83 84 .sticky { 85 background-color: green; 86 position: sticky; 87 } 88 89 .box { 90 width: 100%; 91 height: 100px; 92 } 93 94 .inlineGroup .box { 95 display: inline-block; 96 height: 100%; 97 width: 100px; 98 } 99 </style> 100 101 <script> 102 window.addEventListener('load', function() { 103 document.getElementById('scroller1').scrollTop = 125; 104 document.getElementById('scroller2').scrollTop = 50; 105 document.getElementById('scroller3').scrollLeft = 125; 106 document.getElementById('scroller4').scrollLeft = 75; 107 createIndicatorForStickyElements(document.querySelectorAll('.sticky')); 108 }); 109 </script> 110 111 <div>You should see four green squares below. No red or blue should be visible.</div> 112 113 <div class="group"> 114 <div id="scroller1" class="scroller"> 115 <div class="indicator box" style="top: 175px;"></div> 116 <div class="contents"> 117 <div class="prepadding"></div> 118 <div class="container"> 119 <div style="top: 50px;" class="sticky box"></div> 120 </div> 121 </div> 122 </div> 123 </div> 124 125 <div class="group"> 126 <div id="scroller2" class="scroller"> 127 <div class="indicator box" style="top: 125px;"></div> 128 <div class="contents"> 129 <div class="prepadding"></div> 130 <div class="container"> 131 <div class="filler"></div> 132 <div style="bottom: 25px;" class="sticky box"></div> 133 </div> 134 </div> 135 </div> 136 </div> 137 138 <!-- Force break to make sure we are within 800px wide. --> 139 <div></div> 140 141 <div class="inlineGroup"> 142 <div id="scroller3" class="scroller"> 143 <div class="indicator box" style="left: 175px;"></div> 144 <div class="contents"> 145 <!-- As these elements are inline, they are whitespace sensitive. --> 146 <div class="prepadding"></div><div class="container"><div style="left: 50px;" class="sticky box"></div></div> 147 </div> 148 </div> 149 </div> 150 151 <div class="inlineGroup"> 152 <div id="scroller4" class="scroller"> 153 <div class="indicator box" style="left: 150px;"></div> 154 <div class="contents"> 155 <!-- As these elements are inline, they are whitespace sensitive. --> 156 <div class="prepadding"></div><div class="container"><div class="filler"></div><div style="right: 25px;" class="sticky box"></div></div> 157 </div> 158 </div> 159 </div>