position-sticky-offset-overflow.html (1114B)
1 <!DOCTYPE html> 2 <title>Sticky positioning can cause overflow but must be accessible.</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 a sticky positioned element 5 does not extend overflow" /> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <style> 11 .container { 12 overflow-y: scroll; 13 width: 100px; 14 height: 100px; 15 } 16 17 .box { 18 background-color: green; 19 height: 50px; 20 width: 50px; 21 } 22 23 .sticky { 24 position: sticky; 25 top: 200px; /* Forces the sticky position element below the overflow. */ 26 } 27 </style> 28 29 <div id="scroller1" class="container"> 30 <div class="sticky box"></div> 31 </div> 32 33 <script> 34 test(() => { 35 var scroller = document.getElementById('scroller1'); 36 var sticky = scroller.querySelector('.sticky'); 37 38 var stickyOffset = sticky.offsetTop - 39 scroller.scrollTop - scroller.offsetTop; 40 assert_equals(stickyOffset, 50); 41 assert_equals(scroller.scrollHeight, 100); 42 }, 'sticky position offset should be contained by scrolling box'); 43 44 </script>