multicol-width-004.html (2201B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Test width:min-content for a multi-column container with column-span:all children</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="help" href="https://drafts.csswg.org/css-sizing-3/#sizing-properties"> 9 <link rel="match" href="multicol-width-004-ref.html"> 10 <meta name="assert" content="This test checks the width:min-content for a multi-column container is calculated correctly."> 11 12 <style> 13 article { 14 width: min-content; 15 border: 1px solid black; 16 column-gap: 10px; 17 } 18 .block { 19 width: 100px; 20 background-color: yellow; 21 } 22 .spanner { 23 column-span: all; 24 background-color: lime; 25 } 26 </style> 27 28 <!-- Case 1: column-width is specified, and spanner's width is less than 29 column-width, so <article>'s expected width is 80px. --> 30 <article style="column-width: 80px;"> 31 <div class="block">block1</div> 32 <div class="spanner" style="width: 50px;">spanner</div> 33 <div class="block">block2</div> 34 </article> 35 <br> 36 37 <!-- Case 2: like case 1, but spanner's width is larger than column-width. 38 Thus <article>'s expected width is 150px; --> 39 <article style="column-width: 80px;"> 40 <div class="block">block1</div> 41 <div class="spanner" style="width: 150px;">spanner</div> 42 <div class="block">block2</div> 43 </article> 44 <br> 45 46 <!-- Case 3: column-count is specified. Thus <article>'s expected width is two 47 column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. --> 48 <article style="column-count: 2;"> 49 <div class="block">block1</div> 50 <div class="spanner">spanner</div> 51 <div class="block">block2</div> 52 </article> 53 <br> 54 55 <!-- Case 4: like case 3, but the spanner's width is larger. Thus <article>'s 56 expected width is 250px. --> 57 <article style="column-count: 2;"> 58 <div class="block">block1</div> 59 <div class="spanner" style="width: 250px;">spanner</div> 60 <div class="block">block2</div> 61 </article> 62 </html>