nested-multicol.html | Explore in Territory

<!DOCTYPE html>
<style>
    .egg { background:yellow; }
    .egg::before { content:"egg"; }
    .sausage { background:brown; }
    .sausage::before { content:"sausage"; }
    .spam { background:hotpink; }
    .spam::before { content:"spam"; }
    .lobster { background:salmon; }
    .lobster::before { content:"lobster"; }
</style>
<p>Below there should be 4 rows of boxes. The boxes on each row should have the same color.
    Some boxes are expected to be wider than others.</p>
<div style="-webkit-columns:3; -webkit-column-gap:10px; width:620px; height:120px; line-height:30px; column-fill:auto;">
    <div class="egg"></div>
    <div style="-webkit-columns:2; -webkit-column-gap:10px;">
        <div class="sausage"></div>
        <div class="sausage"></div>
        <div style="-webkit-column-span:all;" class="spam"></div>
        <div class="lobster"></div>
        <div class="lobster"></div>
        <div class="egg"></div>
        <div class="sausage"></div>
        <div class="spam"></div>
        <div class="lobster"></div>
        <div class="egg"></div>
        <div class="sausage"></div>
        <div class="spam"></div>
        <div class="lobster"></div>
        <div class="egg"></div>
        <div class="sausage"></div>
        <div class="spam"></div>
        <div class="egg"></div>
        <div class="sausage"></div>
        <div class="spam"></div>
    </div>
    <div class="lobster"></div>
</div>
chromium/third_party/blink/web_tests/fast/multicol/span/nested-multicol.html
