position-sticky-bottom.html (1626B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should respect the bottom constraint</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 obey their bottom anchor after scrolling" /> 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('bottom', 25); 16 elements.scroller.scrollTop = 300; 17 const nonStickyTopY = elements.container.offsetTop + 18 elements.filler.clientHeight; 19 assert_equals(elements.sticky.offsetTop, nonStickyTopY); 20 }, 'before reaching the sticking point the sticky box should not be offset'); 21 22 test(() => { 23 const elements = setupStickyTest('bottom', 25); 24 elements.scroller.scrollTop = 100; 25 26 const nonStickyTopY = elements.container.offsetTop + 27 elements.filler.clientHeight; 28 const nonStickyBottomY = nonStickyTopY + elements.sticky.clientHeight; 29 const targetBottomY = elements.scroller.clientHeight + 30 elements.scroller.scrollTop - 25; 31 const stickyOffset = nonStickyBottomY - targetBottomY; 32 33 assert_equals(elements.sticky.offsetTop, nonStickyTopY - stickyOffset); 34 }, 'after reaching the sticking point the sticky box should be offset'); 35 36 test(() => { 37 const elements = setupStickyTest('bottom', 25); 38 elements.scroller.scrollTop = 0; 39 assert_equals(elements.sticky.offsetTop, elements.container.offsetTop); 40 }, 'the sticky box should not be pushed outside its containing block'); 41 </script>