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