abspos-in-multicol-001.html (1236B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 4 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#candidate-examination"> 5 <meta name="assert" content="The candidate examination algorithm iterates abspos descendants of the containing block. Being inside a fragmentainer shouldn't break that."> 6 <style> 7 html { 8 column-count: 1; /* Fragmentainer */ 9 } 10 11 body { 12 position: relative; /* Containing block */ 13 } 14 15 div { 16 position: absolute; /* Abspos */ 17 font-size: 100px; 18 width: 200px; 19 height: 4000px; 20 line-height: 100px; 21 } 22 </style> 23 <div>abc <b id=b>def</b> ghi</div> 24 <script src="/resources/testharness.js"></script> 25 <script src="/resources/testharnessreport.js"></script> 26 <script> 27 // Tests anchoring to a text node that is moved by preceding text, 28 // everything in an absolutely positioned element whose containing block 29 // is inside a multi-column fragmentainer. 30 31 test(() => { 32 var b = document.querySelector("#b"); 33 var preText = b.previousSibling; 34 document.scrollingElement.scrollTop = 150; 35 preText.nodeValue = "abcd efg "; 36 assert_equals(document.scrollingElement.scrollTop, 250); 37 }, "Anchoring with text wrapping changes."); 38 </script>