position-sticky-left.html (1775B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should respect the left 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 left 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('left', 50); 16 elements.scroller.scrollLeft = 100; 17 const nonStickyLeftX = elements.container.offsetLeft + 18 elements.filler.clientWidth; 19 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); 20 }, 'before reaching the sticking point the sticky box should not be offset'); 21 22 test(() => { 23 const elements = setupStickyTest('left', 50); 24 elements.scroller.scrollLeft = 200; 25 26 // This math actually cancels to sticky.offsetLeft == (scroller.scrollLeft + 50), 27 // but for clarity the calculations are left explicit. 28 const nonStickyLeftX = elements.container.offsetLeft + 29 elements.filler.clientWidth; 30 const targetLeftX = elements.scroller.scrollLeft + 50; 31 const stickyOffset = targetLeftX - nonStickyLeftX; 32 33 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX + stickyOffset); 34 }, 'after reaching the sticking point the sticky box should be offset'); 35 36 test(() => { 37 const elements = setupStickyTest('left', 50); 38 elements.scroller.scrollLeft = 300; 39 const maxOffsetInContainer = elements.container.offsetLeft + 40 elements.container.clientWidth - elements.sticky.clientWidth; 41 assert_equals(elements.sticky.offsetLeft, maxOffsetInContainer); 42 }, 'the sticky box should not be pushed outside its containing block'); 43 </script>