multicol-width-004-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

  <meta charset="utf-8">

  <title>CSS Multi-column Layout Test Ref: Test width:min-content for a multi-column container with column-span:all children</title>

  <link rel="author" title="Ting-Yu Lin" href="mailto: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: 150px;">

    <div class="block">block1</div>

    <div class="spanner" style="width: 150px;">spanner</div>

    <div class="block">block2</div>

  </article>

  <br>

  <!-- Case 3 -->

  <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: 250px;">

    <div class="block">block1</div>

    <div class="spanner" style="width: 250px;">spanner</div>

    <div class="block">block2</div>

  </article>

</html>