multicol-fragmented-anchor.html (1429B)
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 body { margin: 0; } 9 #scroller { 10 overflow: scroll; 11 height: 100px; 12 } 13 #multicol { 14 margin-top: 20px; 15 height: 200px; 16 columns: 2; 17 column-fill: auto; 18 } 19 #before { 20 margin-top: 100px; 21 height: 100px; 22 } 23 #content { 24 height: 10px; 25 } 26 </style> 27 <div id="scroller"> 28 <div id="multicol"> 29 <div id="fragmented"> 30 <div id="before"></div> 31 <div id="content">content</div> 32 </div> 33 </div> 34 </div> 35 <script> 36 37 // Tests a scroll anchor inside of a div fragmented across multicol 38 39 test(() => { 40 let scroller = document.querySelector("#scroller"); 41 let before = document.querySelector("#before"); 42 let content = document.querySelector("#content"); 43 44 // Scroll down so that we select a scroll anchor. We should select #content 45 // and not #before, as #before is positioned offscreen in the first column 46 scroller.scrollTop = 10; 47 48 // Increase the height of #before so that it fragments into the second 49 // column and pushes #content down. 50 before.style.height = "110px"; 51 52 // We should have anchored to #content and have done an adjustment of 10px 53 assert_equals(scroller.scrollTop, 20); 54 }, "An element in a fragmented div should be able to be selected as an anchor node."); 55 56 </script>