position-sticky-nested-bottom.html (2885B)
1 <!DOCTYPE html> 2 <title>Nested bottom-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 bottom 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('bottom', 25, 35); 17 elements.scroller.scrollTop = 300; 18 const nonStickyTopY = elements.container.offsetTop + 19 elements.filler.clientHeight; 20 assert_equals(elements.sticky.offsetTop, nonStickyTopY); 21 // The inner sticky should not be offset from the outer. 22 const nonStickyInnerTopY = elements.sticky.clientHeight - 23 elements.innerSticky.clientHeight; 24 assert_equals(elements.innerSticky.offsetTop, nonStickyInnerTopY); 25 }, 'before reaching the sticking point, neither sticky box should be offset'); 26 27 test(() => { 28 const elements = setupNestedStickyTest('bottom', 25, 50); 29 elements.scroller.scrollTop = 150; 30 const nonStickyTopY = elements.container.offsetTop + 31 elements.filler.clientHeight; 32 assert_equals(elements.sticky.offsetTop, nonStickyTopY); 33 assert_equals(elements.innerSticky.offsetTop, 50); 34 }, 'the inner sticky can stick before the outer one if necessary'); 35 36 test(() => { 37 const elements = setupNestedStickyTest('bottom', 25, 35); 38 elements.scroller.scrollTop = 100; 39 40 const nonStickyTopY = elements.container.offsetTop + 41 elements.filler.clientHeight; 42 const nonStickyBottomY = nonStickyTopY + elements.sticky.clientHeight; 43 const targetBottomY = elements.scroller.clientHeight + 44 elements.scroller.scrollTop - 25; 45 const stickyOffset = nonStickyBottomY - targetBottomY; 46 assert_equals(elements.sticky.offsetTop, nonStickyTopY - stickyOffset); 47 48 // The inner sticky has similar math, but its offsetTop 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.offsetTop, 40); 52 }, 'both sticky boxes can be stuck at the same time'); 53 54 test(() => { 55 const elements = setupNestedStickyTest('bottom', 25, 75); 56 elements.scroller.scrollTop = 0; 57 assert_equals(elements.sticky.offsetTop, elements.container.offsetTop); 58 assert_equals(elements.innerSticky.offsetTop, 0); 59 }, 'neither sticky can escape their containing block'); 60 61 test(() => { 62 const elements = setupNestedStickyTest('bottom', 25, 300); 63 elements.scroller.scrollTop = 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.offsetTop, 0); 67 }, 'the inner sticky cannot be pushed outside the outer sticky'); 68 </script>