opt-out-inner-table.html (1265B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring-1/"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 8 #scroller { 9 height: 200px; 10 overflow: scroll; 11 } 12 #before { height: 50px; } 13 #table-row { 14 display: table-row; 15 overflow-anchor: none; 16 width: 100px; 17 height: 100px; 18 } 19 #after { margin-bottom: 500px; } 20 21 </style> 22 <div id="scroller"> 23 <div id="before"></div> 24 <div id="table-row">content</div> 25 <div id="after"></div> 26 </div> 27 <script> 28 29 // Tests that the anchor exclusion API works with table parts that generate 30 // anonymous table box wrappers 31 32 test(() => { 33 let scroller = document.querySelector('#scroller'); 34 let before = document.querySelector('#before'); 35 36 // Scroll down so that #table-row is the only element in view 37 scroller.scrollTop = 50; 38 39 // Expand #before so that we might perform a scroll adjustment 40 before.style.height = "100px"; 41 42 // We shouldn't have selected #table-row as an anchor as it is 43 // 'overflow-anchor: none' 44 assert_equals(scroller.scrollTop, 50); 45 }, "A table with anonymous wrappers and 'overflow-anchor: none' shouldn't generate any scroll anchor candidates."); 46 47 </script>