position-sticky-top-and-bottom-overconstrained.html (1828B)
1 <!DOCTYPE html> 2 <title>position:sticky elements with height larger than the space available between top and bottom</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 the end edge is adjusted when the sticky view rectangle height ends up smaller than the height of the sticky element border box" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <style> 10 11 .scroller { 12 height: 100px; 13 overflow: auto; 14 position: relative; 15 } 16 .padding { 17 height: 200px; 18 } 19 .sticky { 20 position: sticky; 21 background: green; 22 top: 20px; 23 bottom: 0; 24 height: 200px; 25 } 26 </style> 27 28 <body> 29 <div class="scroller"> 30 <div class="padding"></div> 31 <div class="sticky"></div> 32 <div class="padding"></div> 33 </div> 34 </body> 35 36 <script> 37 test(() => { 38 const scroller = document.querySelector('.scroller'); 39 const element = document.querySelector('.sticky'); 40 scroller.scrollTop = 0; 41 assert_equals(element.offsetTop, 20); 42 }, 'start of scroll container'); 43 44 test(() => { 45 const scroller = document.querySelector('.scroller'); 46 const element = document.querySelector('.sticky'); 47 scroller.scrollTop = 160; 48 assert_equals(element.offsetTop, 180); 49 }, 'right before the in-flow position of the sticky box'); 50 51 test(() => { 52 const scroller = document.querySelector('.scroller'); 53 const element = document.querySelector('.sticky'); 54 scroller.scrollTop = 220; 55 assert_equals(element.offsetTop, 240); 56 }, 'right after the in-flow position the sticky box'); 57 58 test(() => { 59 const scroller = document.querySelector('.scroller'); 60 const element = document.querySelector('.sticky'); 61 scroller.scrollTop = 500; 62 assert_equals(element.offsetTop, 400); 63 }, 'end of scroll container'); 64 </script>