position-sticky-margins.html (1910B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should properly interact with margins</title> 3 <link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" /> 4 <meta name="assert" content="position:sticky elements should ignore margins when sticking, but consider them when making sure sticky elements do not escape their containing block" /> 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('top', 50); 16 elements.sticky.style.margin = '15px'; 17 elements.scroller.scrollTop = 100; 18 assert_equals(elements.sticky.offsetTop, 19 elements.container.offsetTop + elements.filler.clientHeight + 15); 20 }, 'Before sticking, the margin should be obeyed.'); 21 22 test(() => { 23 const elements = setupStickyTest('top', 50); 24 elements.sticky.style.margin = '15px'; 25 26 elements.scroller.scrollTop = 200; 27 28 // This math cancels to sticky.offsetTop == (scroller.scrollTop + 50), but 29 // for clarity the calculations are left explicit. 30 const nonStickyTopY = elements.container.offsetTop + 31 elements.filler.clientHeight; 32 const targetTopY = elements.scroller.scrollTop + 50; 33 const stickyOffset = targetTopY - nonStickyTopY; 34 35 assert_equals(elements.sticky.offsetTop, nonStickyTopY + stickyOffset); 36 }, 'Whilst stuck, the margin is irrelevant.'); 37 38 test(() => { 39 const elements = setupStickyTest('top', 50); 40 elements.sticky.style.margin = '15px'; 41 42 elements.scroller.scrollTop = 300; 43 44 const maxOffsetInContainer = elements.container.offsetTop + 45 elements.container.clientHeight - elements.sticky.clientHeight; 46 assert_equals(elements.sticky.offsetTop, maxOffsetInContainer - 15); 47 }, 'The margin is taken into account when making sure the sticky element ' + 48 'does not escape its container'); 49 </script>