multicol-span-all-005.html (1778B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Test column-span:all with various display types</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-005-ref.html"> 9 <meta name="assert" content="This test checks a column-span:all element should act like column-span: none if it's under different block formatting context."> 10 11 <style> 12 .column { 13 column-count: 3; 14 column-rule: 6px solid; 15 width: 400px; 16 outline: 1px solid black; 17 } 18 .spanner { 19 column-span: all; 20 outline: 1px solid blue; 21 } 22 fieldset { 23 margin: 0; 24 padding: 0; 25 border: 0; 26 } 27 </style> 28 29 <body> 30 <article class="column"> 31 <div>block1</div> 32 <table class="spanner"> 33 <tr> 34 <td>table as a spanner</td> 35 </tr> 36 </table> 37 <div>block2</div> 38 </article> 39 <br> 40 41 <article class="column"> 42 <div>block1</div> 43 <div class="spanner" style="display: grid;">grid as a spanner</div> 44 <div>block2</div> 45 </article> 46 <br> 47 48 <article class="column"> 49 <div>block1</div> 50 <div class="spanner" style="display: flex;">flex as a spanner</div> 51 <div>block2</div> 52 </article> 53 <br> 54 55 <article class="column"> 56 <div>block1</div> 57 <fieldset class="spanner">fieldset as a spanner</fieldset> 58 <div>block2</div> 59 </article> 60 <br> 61 62 <article class="column"> 63 <div>block1</div> 64 <details open class="spanner">details as a spanner</details> 65 <div>block2</div> 66 </article> 67 <br> 68 69 </body> 70 </html>