multicol-span-all-children-height-006.html (1273B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Test the borders drawing for a block split by column-span</title> 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://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-children-height-006-ref.html"> 9 <meta name="assert" content="This test verifies that the borders of block container with a fixed block-size, split by column-span, are skipped on the sides adjacent to column-span."> 10 11 <style> 12 article { 13 column-count: 2; 14 width: 400px; 15 background-color: lightgreen; 16 } 17 div.container { 18 height: 250px; 19 background-color: pink; 20 border: 20px solid purple; 21 margin-top: 1em; 22 margin-bottom: 1em; 23 } 24 div.block { 25 width: 100px; 26 height: 200px; 27 background-color: yellow; 28 } 29 div.column-span { 30 column-span: all; 31 height: 50px; 32 background-color: lightblue; 33 } 34 </style> 35 36 <article> 37 <div class="container"> 38 <div class="block">block1</div> 39 <div class="column-span">column-span1</div> 40 <div class="block">block2</div> 41 </div> 42 </article> 43 </html>