abspos-in-multicol-002.html (1439B)
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 fully clipped element and 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 height: 4000px; 14 } 15 16 main { 17 height: 0px; /* Fully clipped */ 18 } 19 20 div { 21 position: absolute; /* Abspos */ 22 font-size: 100px; 23 width: 200px; 24 height: 100%; 25 line-height: 100px; 26 } 27 </style> 28 <main><div>abc <b id=b>def</b> ghi</div></main> 29 <script src="/resources/testharness.js"></script> 30 <script src="/resources/testharnessreport.js"></script> 31 <script> 32 // Tests anchoring to a text node that is moved by preceding text, 33 // where the text is inside an absolutely positioned element, 34 // there is a fully clippped element between the abspos and its contaning block, 35 // and the containing block is inside a multi-column fragmentainer. 36 test(() => { 37 var b = document.querySelector("#b"); 38 var preText = b.previousSibling; 39 document.scrollingElement.scrollTop = 150; 40 preText.nodeValue = "abcd efg "; 41 assert_equals(document.scrollingElement.scrollTop, 250); 42 }, "Anchoring with text wrapping changes."); 43 </script>