position-sticky-nested-left.html (3317B)
1 <!DOCTYPE html> 2 <title>Nested left-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 left 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('left', 50, 60); 17 elements.scroller.scrollLeft = 100; 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 assert_equals(elements.innerSticky.offsetLeft, 0); 23 }, 'before reaching the sticking point, neither sticky box should be offset'); 24 25 test(() => { 26 const elements = setupNestedStickyTest('left', 50, 60); 27 elements.scroller.scrollLeft = 145; 28 const nonStickyLeftX = elements.container.offsetLeft + 29 elements.filler.clientWidth; 30 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); 31 assert_equals(elements.innerSticky.offsetLeft, 5); 32 }, 'the inner sticky can stick before the outer one if necessary'); 33 34 test(() => { 35 const elements = setupNestedStickyTest('left', 50, 60); 36 elements.scroller.scrollLeft = 200; 37 38 // This math cancels to sticky.offsetLeft == (scroller.scrollLeft + 50), but 39 // for clarity the calculations are left explicit. 40 const nonStickyLeftX = elements.container.offsetLeft + 41 elements.filler.clientWidth; 42 const targetLeftX = elements.scroller.scrollLeft + 50; 43 const stickyOffset = targetLeftX - nonStickyLeftX; 44 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX + stickyOffset); 45 46 // The inner sticky has similar math, but its offsetLeft is relative to the 47 // sticky element and in this test is the difference between the left values. 48 assert_equals(elements.innerSticky.offsetLeft, 10); 49 }, 'both sticky boxes can be stuck at the same time'); 50 51 test(() => { 52 const elements = setupNestedStickyTest('left', 50, 60); 53 elements.scroller.scrollLeft = 300; 54 const maxOffsetInContainer = elements.container.offsetLeft + 55 elements.container.clientWidth - elements.sticky.clientWidth; 56 assert_equals(elements.sticky.offsetLeft, maxOffsetInContainer); 57 const maxOffsetInOuterSticky = elements.sticky.clientWidth - 58 elements.innerSticky.clientWidth; 59 assert_equals(elements.innerSticky.offsetLeft, maxOffsetInOuterSticky); 60 }, 'neither sticky can escape their containing block'); 61 62 test(() => { 63 const elements = setupNestedStickyTest('left', 50, 300); 64 elements.scroller.scrollLeft = 100; 65 // The outer sticky has not stuck yet. 66 const nonStickyLeftX = elements.container.offsetLeft + 67 elements.filler.clientWidth; 68 assert_equals(elements.sticky.offsetLeft, nonStickyLeftX); 69 // But the inner sticky still cannot escape the outer sticky (as it is the 70 // containing block). 71 const maxOffsetInOuterSticky = elements.sticky.clientWidth - 72 elements.innerSticky.clientWidth; 73 assert_equals(elements.innerSticky.offsetLeft, maxOffsetInOuterSticky); 74 }, 'the inner sticky cannot be pushed outside the outer sticky'); 75 </script>