overflowing-columns-large-gaps.html

<!DOCTYPE html>
<script src="../../resources/check-layout.js"></script>
<p>There should be a horizontal scrollbar below.</p>

<!--
    The specified, computed, and used value of column-count is 2, but the
    actual column-count will be larger, because the column height is only 40px,
    and we have 200px of content. So we'll get ceil(200/40) = 5 columns.

    Used / actual column-width becomes 0, because the gap eats everything.

    So we get:
    Column 0: +0px = 0px
    Gap between column 0 and 1: +200px = 200px
    Column 1: +0px = 200px
    Gap between column 1 and 2: +200px = 400px
    Column 2: +0px = 400px
    Gap between column 2 and 3: +200px = 600px
    Column 3: +0px = 600px
    Gap between column 3 and 4: +200px = 800px
    Column 4: +0px = 800px
-->

<div id="container" style="overflow:auto; width:400px;" data-expected-scroll-width="800">
    <div style="columns:2; column-gap:200px; column-fill:auto; width:100px; height:40px;">
        <div style="height:200px;"></div>
    </div>
</div>
<script>
    checkLayout("#container");
</script>

chromium/third_party/blink/web_tests/fast/multicol/overflowing-columns-large-gaps.html