multicol-dynamic-add-004.html (1433B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Append float element to block with floating pseudo-elements in multi-column context</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-multicol-1/"> 8 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1645714"> 9 <link rel="match" href="multicol-dynamic-add-004-ref.html"> 10 <meta name="assert" content="This test checks that dynamically appending a float element to a block container with floating ::before and ::after pseudo-elements in a multi-column context renders correctly."> 11 12 <script> 13 function runTest() { 14 document.body.offsetHeight; 15 16 var nav = document.createElement("nav"); 17 nav.append("text"); 18 19 var container = document.getElementById("container"); 20 container.append(nav); 21 22 document.documentElement.removeAttribute("class"); 23 } 24 </script> 25 26 <style> 27 .columns { 28 columns: 2; 29 column-fill: auto; 30 width: 100px; 31 height: 10px; 32 } 33 #container::before, #container::after { 34 float: left; 35 content: ""; 36 width: 10px; 37 height: 20px; 38 } 39 nav { 40 float: left; 41 } 42 </style> 43 44 <body onload="runTest();"> 45 <div class="columns"> 46 <div id="container"></div> 47 </div> 48 </body> 49 </html>