position-sticky-nested-right.html (2902B)
1 <!DOCTYPE html> 2 <title>Nested right-constrained position:sticky elements should render correctly</title> 3 4 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 5 <meta name="assert" content="This test checks that nested position:sticky elements with a right constraint render correctly" /> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <script src="../resources/sticky-util.js"></script> 11 12 <body></body> 13 14 <script> 15 test(() => { 16 const elements = setupNestedStickyTest('right', 25, 35); 17 elements.scroller.scrollLeft = 200; 18 const nonStickyLeftX = elements.container.offsetLeft + 19 elements.filler.clientWidth; 20 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); 21 // The inner sticky should not be offset from the outer. 22 const nonStickyInnerLeftX = elements.sticky.clientWidth - 23 elements.innerSticky.clientWidth; 24 assert_equals(elements.innerSticky.offsetLeft, nonStickyInnerLeftX); 25 }, 'before reaching the sticking point, neither sticky box should be offset'); 26 27 test(() => { 28 const elements = setupNestedStickyTest('right', 25, 50); 29 elements.scroller.scrollLeft = 150; 30 const nonStickyLeftX = elements.container.offsetLeft + 31 elements.filler.clientWidth; 32 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); 33 assert_equals(elements.innerSticky.offsetLeft, 50); 34 }, 'the inner sticky can stick before the outer one if necessary'); 35 36 test(() => { 37 const elements = setupNestedStickyTest('right', 25, 35); 38 elements.scroller.scrollLeft = 100; 39 40 const nonStickyLeftX = elements.container.offsetLeft + 41 elements.filler.clientWidth; 42 const nonStickyBottomX = nonStickyLeftX + elements.sticky.clientWidth; 43 const targetBottomX = elements.scroller.clientWidth + 44 elements.scroller.scrollLeft - 25; 45 const stickyOffset = nonStickyBottomX - targetBottomX; 46 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX - stickyOffset); 47 48 // The inner sticky has similar math, but its offsetLeft is relative to the 49 // sticky element and in this test is (height - the difference between the 50 // top values). 51 assert_equals(elements.innerSticky.offsetLeft, 40); 52 }, 'both sticky boxes can be stuck at the same time'); 53 54 test(() => { 55 const elements = setupNestedStickyTest('right', 25, 100); 56 elements.scroller.scrollLeft = 0; 57 assert_equals(elements.sticky.offsetLeft, elements.container.offsetLeft); 58 assert_equals(elements.innerSticky.offsetLeft, 0); 59 }, 'neither sticky can escape their containing block'); 60 61 test(() => { 62 const elements = setupNestedStickyTest('right', 25, 500); 63 elements.scroller.scrollLeft = 200; 64 // It doesn't matter how big the inner sticky offset is, it cannot escape its 65 // containing block (the outer sticky). 66 assert_equals(elements.innerSticky.offsetLeft, 0); 67 }, 'the inner sticky cannot be pushed outside the outer sticky'); 68 69 </script>