position-sticky-inflow-position.html (1368B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should not affect the flow position of other elements</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="assert" content="This test checks that position:sticky elements do not affect the flow position of other elements" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 .scroller { 11 position: relative; 12 height: 200px; 13 width: 100px; 14 overflow: scroll; 15 } 16 17 #sticky { 18 background-color: green; 19 position: sticky; 20 top: 150px; 21 } 22 23 #before { 24 background-color: fuchsia; 25 } 26 27 #after { 28 background-color: orange; 29 } 30 31 .box { 32 height: 50px; 33 width: 50px; 34 } 35 36 .padding { 37 height: 500px; 38 } 39 </style> 40 41 <div class="scroller"> 42 <div id="before" class="box"></div> 43 <div id="sticky" class="box"></div> 44 <div id="after" class="box"></div> 45 <div class="padding"></div> 46 </div> 47 48 <script> 49 test(() => { 50 // The sticky element is pushed to be stuck 150 pixels from the top. 51 assert_equals(sticky.offsetTop, 150); 52 53 // Neither 'before' or 'after' should be affected by the change in the sticky 54 // element's location. 55 assert_equals(before.offsetTop, 0); 56 assert_equals(after.offsetTop, before.clientHeight + sticky.clientHeight); 57 }, 'sticky offset should not affect the position of other elements.'); 58 </script>