position-sticky-overflow-padding.html (2110B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should respect padding on their ancestor overflow element</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 respect padding on their ancestor overflow element" /> 5 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 9 <script src="../resources/sticky-util.js"></script> 10 11 <body></body> 12 13 <script> 14 test(() => { 15 const elements = setupStickyTest('top', 50); 16 elements.scroller.style.padding = '20px 0'; 17 18 // Before sticking; the element isn't within the padding range. 19 elements.scroller.scrollTop = 150; 20 const nonStickyTopY = elements.container.offsetTop + 21 elements.filler.clientHeight; 22 assert_equals(elements.sticky.offsetTop, nonStickyTopY); 23 }, 'A sticky element should not be affected by ancestor padding until it ' + 24 'reaches it'); 25 26 test(() => { 27 const elements = setupStickyTest('top', 50); 28 elements.sticky.style.top = '0'; 29 elements.scroller.style.padding = '20px 0'; 30 31 elements.scroller.scrollTop = 200; 32 33 // This math cancels to sticky.offsetTop == (scroller.scrollTop + 50), but 34 // for clarity the calculations are left explicit. 35 const nonStickyTopY = elements.container.offsetTop + 36 elements.filler.clientHeight; 37 const targetTopY = elements.scroller.scrollTop; 38 const stickyOffset = targetTopY - nonStickyTopY; 39 40 assert_equals(elements.sticky.offsetTop, nonStickyTopY + stickyOffset + 20); 41 }, 'A sticky element should be offset by ancestor padding even when stuck'); 42 43 test(() => { 44 const elements = setupStickyTest('top', 50); 45 elements.sticky.style.top = '0'; 46 elements.scroller.style.padding = '20px 0'; 47 48 elements.scroller.scrollTop = 315; 49 const maxOffsetInContainer = elements.container.offsetTop + 50 elements.container.clientHeight - elements.sticky.clientHeight; 51 assert_equals(elements.sticky.offsetTop, maxOffsetInContainer); 52 }, 'Ancestor overflow padding does not allow a sticky element to escape its ' + 53 'container'); 54 </script>