position-sticky-right.html (1626B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should respect the right 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 right 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('right', 25); 16 elements.scroller.scrollLeft = 200; 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('right', 25); 24 elements.scroller.scrollLeft = 75; 25 26 const nonStickyLeftX = elements.container.offsetLeft + 27 elements.filler.clientWidth; 28 const nonStickyRightX = nonStickyLeftX + elements.sticky.clientWidth; 29 const targetRightX = elements.scroller.clientWidth + 30 elements.scroller.scrollLeft - 25; 31 const stickyOffset = nonStickyRightX - targetRightX; 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('right', 25); 38 elements.scroller.scrollLeft = 15; 39 assert_equals(elements.sticky.offsetLeft, elements.container.offsetLeft); 40 }, 'the sticky box should not be pushed outside its containing block'); 41 </script>