multicol-width-005-ref.html (1710B)
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"> 4 <title>CSS Multi-column Layout Test Ref: 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 8 <style> 9 article { 10 border: 1px solid black; 11 } 12 .block { 13 width: 100px; 14 background-color: yellow; 15 } 16 .spanner { 17 column-span: all; 18 background-color: lime; 19 } 20 </style> 21 22 <!-- Case 1 --> 23 <article style="width: 80px;"> 24 <div class="block">block1</div> 25 <div class="spanner" style="width: 50px;">spanner</div> 26 <div class="block">block2</div> 27 </article> 28 <br> 29 30 <!-- Case 2 --> 31 <article style="width: 120px;"> 32 <div class="block">block1</div> 33 <div class="spanner" style="width: 50px;">spanner</div> 34 <div class="block">block2</div> 35 </article> 36 <br> 37 38 <!-- Case 3 --> 39 <article style="width: 150px;"> 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 4 --> 47 <article style="width: 210px;"> 48 <div class="block">block1</div> 49 <div class="spanner">spanner</div> 50 <div class="block">block2</div> 51 </article> 52 <br> 53 54 <!-- Case 4 --> 55 <article style="width: 230px;"> 56 <div class="block">block1</div> 57 <div class="spanner">spanner</div> 58 <div class="block">block2</div> 59 </article> 60 <br> 61 62 <!-- Case 6 --> 63 <article style="width: 250px;"> 64 <div class="block">block1</div> 65 <div class="spanner" style="width: 250px;">spanner</div> 66 <div class="block">block2</div> 67 </article> 68 </html>