multicol-dynamic-add-003.html (1411B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Append element to grid with 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-003-ref.html"> 10 <meta name="assert" content="This test checks that dynamically appending an element to a grid container with ::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 grid = document.getElementById("grid"); 20 grid.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 #grid { 34 display: grid; 35 grid: 20px 20px / 40px 40px; 36 } 37 #grid::before, #grid::after { 38 content: ""; 39 grid-row: 1 / 3; 40 } 41 nav { 42 grid-row: 1 / 3; 43 } 44 </style> 45 46 <body onload="runTest();"> 47 <div class="columns"> 48 <div id="grid"></div> 49 </div> 50 </body> 51 </html>