multicol-width-005.html (2952B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test: Test width:max-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-005-ref.html"> 10 <meta name="assert" content="This test checks the width:max-content for a multi-column container is calculated correctly."> 11 12 <style> 13 article { 14 width: max-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 "column-count:auto" is considered 29 one column, 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: column-width is specified, and no other children are wider than 38 the column-width. Thus <article>'s expected width is 120px. --> 39 <article style="column-width: 120px;"> 40 <div class="block">block1</div> 41 <div class="spanner" style="width: 50px;">spanner</div> 42 <div class="block">block2</div> 43 </article> 44 <br> 45 46 <!-- Case 3: like case 2, but the spanner's width is larger than column-width. 47 Thus <article>'s expected width is 150px; --> 48 <article style="column-width: 120px;"> 49 <div class="block">block1</div> 50 <div class="spanner" style="width: 150px;">spanner</div> 51 <div class="block">block2</div> 52 </article> 53 <br> 54 55 <!-- Case 4: column-count is specified. <article>'s expected width is two 56 column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. --> 57 <article style="column-count: 2;"> 58 <div class="block">block1</div> 59 <div class="spanner">spanner</div> 60 <div class="block">block2</div> 61 </article> 62 <br> 63 64 <!-- Case 5: column-count is specified, and column-width is larger than the 65 column-box's width. Thus <article>'s expected width is column-width plus 66 the column-gap, i.e. 110px*2 + 10px = 230px. --> 67 <article style="column-count: 2; column-width: 110px;"> 68 <div class="block">block1</div> 69 <div class="spanner">spanner</div> 70 <div class="block">block2</div> 71 </article> 72 <br> 73 74 <!-- Case 6: like case 4, but the spanner's width is larger. Thus <article>'s 75 expected width is 250px. --> 76 <article style="column-count: 2;"> 77 <div class="block">block1</div> 78 <div class="spanner" style="width: 250px;">spanner</div> 79 <div class="block">block2</div> 80 </article> 81 </html>