position-sticky-top.html (1746B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should respect the top 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 top 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('top', 50); 16 elements.scroller.scrollTop = 100; 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('top', 50); 24 elements.scroller.scrollTop = 200; 25 26 // This math cancels to sticky.offsetTop == (scroller.scrollTop + 50), but 27 // for clarity the calculations are left explicit. 28 const nonStickyTopY = elements.container.offsetTop + 29 elements.filler.clientHeight; 30 const targetTopY = elements.scroller.scrollTop + 50; 31 const stickyOffset = targetTopY - nonStickyTopY; 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('top', 50); 38 elements.scroller.scrollTop = 300; 39 const maxOffsetInContainer = elements.container.offsetTop + 40 elements.container.clientHeight - elements.sticky.clientHeight; 41 assert_equals(elements.sticky.offsetTop, maxOffsetInContainer); 42 }, 'the sticky box should not be pushed outside its containing block'); 43 </script>