| <!DOCTYPE html> |
| <html> |
| <meta charset="utf-8"> |
| <title>CSS Multi-column Layout Test Ref: Test width:max-content for a multi-column container with column-span:all children</title> |
| <link rel="author" title="Ting-Yu Lin" href="tlin@mozilla.com"> |
| <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> |
| |
| <style> |
| article { |
| border: 1px solid black; |
| } |
| .block { |
| width: 100px; |
| background-color: yellow; |
| } |
| .spanner { |
| column-span: all; |
| background-color: lime; |
| } |
| </style> |
| |
| <!-- Case 1 --> |
| <article style="width: 80px;"> |
| <div class="block">block1</div> |
| <div class="spanner" style="width: 50px;">spanner</div> |
| <div class="block">block2</div> |
| </article> |
| <br> |
| |
| <!-- Case 2 --> |
| <article style="width: 120px;"> |
| <div class="block">block1</div> |
| <div class="spanner" style="width: 50px;">spanner</div> |
| <div class="block">block2</div> |
| </article> |
| <br> |
| |
| <!-- Case 3 --> |
| <article style="width: 150px;"> |
| <div class="block">block1</div> |
| <div class="spanner" style="width: 150px;">spanner</div> |
| <div class="block">block2</div> |
| </article> |
| <br> |
| |
| <!-- Case 4 --> |
| <article style="width: 210px;"> |
| <div class="block">block1</div> |
| <div class="spanner">spanner</div> |
| <div class="block">block2</div> |
| </article> |
| <br> |
| |
| <!-- Case 4 --> |
| <article style="width: 230px;"> |
| <div class="block">block1</div> |
| <div class="spanner">spanner</div> |
| <div class="block">block2</div> |
| </article> |
| <br> |
| |
| <!-- Case 6 --> |
| <article style="width: 250px;"> |
| <div class="block">block1</div> |
| <div class="spanner" style="width: 250px;">spanner</div> |
| <div class="block">block2</div> |
| </article> |
| </html> |
