position-sticky-overflow-hidden.html (3004B)
1 <!DOCTYPE html> 2 <title>position:sticky elements should respect an overflow:hidden ancestor</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 adhere to an overflow:hidden ancestor" /> 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 outer_scroller = document.createElement('div'); 16 outer_scroller.style.width = '100px'; 17 outer_scroller.style.height = '100px'; 18 outer_scroller.style.overflow = 'scroll'; 19 20 const inner_scroller = document.createElement('div'); 21 inner_scroller.style.width = '80%'; 22 inner_scroller.style.height = '200px'; 23 inner_scroller.style.overflow = 'hidden'; 24 25 const sticky = document.createElement('div'); 26 sticky.style.width = '20px'; 27 sticky.style.height = '20px'; 28 sticky.style.position = 'sticky'; 29 sticky.style.top = '0'; 30 sticky.style.background = 'red'; 31 32 const spacer = document.createElement('div'); 33 spacer.style.height = '500px'; 34 35 inner_scroller.appendChild(sticky); 36 inner_scroller.appendChild(spacer); 37 outer_scroller.appendChild(inner_scroller); 38 document.body.appendChild(outer_scroller); 39 40 outer_scroller.scrollTop = 50; 41 42 // The sticky should attach to the inner scroller, and so should not stick. 43 assert_equals(sticky.offsetTop, inner_scroller.offsetTop); 44 }, 'A sticky element should attach to an overflow:hidden ancestor'); 45 46 // This tests a specific bug in Firefox where the sticky element incorrectly 47 // started sticking when inside a table. See https://bugzilla.mozilla.org/show_bug.cgi?id=1488810 48 test(() => { 49 const outer_scroller = document.createElement('div'); 50 outer_scroller.style.width = '100px'; 51 outer_scroller.style.height = '100px'; 52 outer_scroller.style.overflow = 'scroll'; 53 54 const table = document.createElement('div'); 55 table.style.display = 'table'; 56 57 const tr = document.createElement('div'); 58 tr.style.display = 'table-row'; 59 60 const inner_scroller = document.createElement('div'); 61 inner_scroller.style.display = 'table-cell'; 62 inner_scroller.style.overflow = 'hidden'; 63 64 const sticky = document.createElement('div'); 65 sticky.style.width = '20px'; 66 sticky.style.height = '20px'; 67 sticky.style.position = 'sticky'; 68 sticky.style.top = '0'; 69 sticky.style.background = 'red'; 70 71 const spacer = document.createElement('div'); 72 spacer.style.height = '500px'; 73 74 inner_scroller.appendChild(sticky); 75 inner_scroller.appendChild(spacer); 76 tr.append(inner_scroller); 77 table.appendChild(tr); 78 outer_scroller.appendChild(table); 79 document.body.appendChild(outer_scroller); 80 81 outer_scroller.scrollTop = 50; 82 83 // The sticky should attach to the inner scroller, and so should not stick. 84 assert_equals(sticky.offsetTop, inner_scroller.offsetTop); 85 }, 'A sticky element should attach to an overflow:hidden ancestor inside a table'); 86 </script>