multicol-span-all-dynamic-add-012.html (1645B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Append a block containing a spanner kid. The spanner kid should correctly span across all columns</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/#column-span"> 8 <link rel="match" href="multicol-span-all-dynamic-add-012-ref.html"> 9 <meta name="assert" content="This test checks that an appended block containing 'column-span' element should be rendered correctly."> 10 11 <script> 12 function runTest() { 13 document.body.offsetHeight; 14 15 // Create a subtree like the following, and append it to block1. 16 // <div> 17 // <h3>spanner</h3> 18 // block2 19 // </div> 20 var spanner = document.createElement("h3"); 21 var spannerText = document.createTextNode("spanner"); 22 spanner.appendChild(spannerText); 23 24 var block2 = document.createElement("div"); 25 var block2Text = document.createTextNode("block2"); 26 block2.appendChild(spanner); 27 block2.appendChild(block2Text) 28 29 var block1 = document.getElementById("block1"); 30 block1.appendChild(block2); 31 32 document.documentElement.removeAttribute("class"); 33 } 34 </script> 35 36 <style> 37 #column { 38 column-count: 3; 39 column-rule: 6px solid; 40 width: 400px; 41 outline: 1px solid black; 42 } 43 h3 { 44 column-span: all; 45 outline: 1px solid blue; 46 } 47 </style> 48 49 <body onload="runTest();"> 50 <article id="column"> 51 <div id="block1">block1</div> 52 </article> 53 </body> 54 </html>