<!DOCTYPE html><html><metacharset="utf-8"><title>CSS Multi-column Layout Test: Test width:min-content for a multi-column container with column-span:all children</title><linkrel="author"title="Ting-Yu Lin"href="mailto:tlin@mozilla.com"><linkrel="author"title="Mozilla"href="http://www.mozilla.org/"><linkrel="help"href="https://drafts.csswg.org/css-multicol-1/#column-span"><linkrel="help"href="https://drafts.csswg.org/css-sizing-3/#sizing-properties"><linkrel="match"href="multicol-width-004-ref.html"><metaname="assert"content="This test checks the width:min-content for a multi-column container is calculated correctly."><style>article{width:min-content;border:1pxsolidblack;column-gap:10px;}.block{width:100px;background-color:yellow;}.spanner{column-span:all;background-color:lime;}</style><!-- Case 1: column-width is specified, and spanner's width is less than column-width, so <article>'s expected width is 80px. --><articlestyle="column-width: 80px;"><divclass="block">block1</div><divclass="spanner"style="width: 50px;">spanner</div><divclass="block">block2</div></article><br><!-- Case 2: like case 1, but spanner's width is larger than column-width. Thus <article>'s expected width is 150px; --><articlestyle="column-width: 80px;"><divclass="block">block1</div><divclass="spanner"style="width: 150px;">spanner</div><divclass="block">block2</div></article><br><!-- Case 3: column-count is specified. Thus <article>'s expected width is two column boxes wide plus the column-gap, i.e. 100px*2 + 10px = 210px. --><articlestyle="column-count: 2;"><divclass="block">block1</div><divclass="spanner">spanner</div><divclass="block">block2</div></article><br><!-- Case 4: like case 3, but the spanner's width is larger. Thus <article>'s expected width is 250px. --><articlestyle="column-count: 2;"><divclass="block">block1</div><divclass="spanner"style="width: 250px;">spanner</div><divclass="block">block2</div></article></html>
