multicol-span-all-004.html (1577B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: column-span:all should act like column-span:none in different block formatting 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/#column-span"> 8 <link rel="match" href="multicol-span-all-004-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: 500px; 16 outline: 1px solid black; 17 } 18 h3 { 19 column-span: all; 20 outline: 1px solid blue; 21 } 22 </style> 23 24 <body> 25 <article id="column"> 26 <div>block1</div> 27 <div style="display: inline-block;"> 28 <h3>non-spanner</h3> 29 </div> 30 <div style="overflow: hidden;"> 31 <h3>non-spanner</h3> 32 </div> 33 <table> 34 <caption> 35 <h3>non-spanner in caption</h3> 36 </caption> 37 </table> 38 <div style="display: grid;"> 39 <div> 40 <h3>non-spanner in grid</h3> 41 </div> 42 </div> 43 <div style="display: flex;"> 44 <div> 45 <h3>non-spanner in flex</h3> 46 </div> 47 </div> 48 <div style="column-span: all; outline: 1px solid green;"> 49 Spanner 50 <h3>non-spanner in a spanner</h3> 51 </div> 52 <div>block2</div> 53 </article> 54 </body> 55 </html>