tall-line-in-short-block.html | Explore in Territory

<!DOCTYPE html>
<style>
    .kix-paragraphrenderer { position:relative; }
    .kix-lineview { position:relative; height:2em; background:blue;}
    .kix-lineview-content { position:absolute; }
    .doohickey { display:inline-block; height:200em; }
    .content { position:relative; display:inline-block; top:-198.5em; }
</style>
<!-- Note that no spec mandates this behavior, but browsers agree here, and printing Google Docs depends on it. -->
<p>Below you should see two blue boxes with the word "PASS" written on them.</p>
<div style="-webkit-columns:4; -webkit-column-gap:0; column-fill:auto; overflow:hidden; width:30em; height:10em; line-height:2em; color:white; background:white;">
    <br>
    <div class="kix-paragraphrenderer">
        <div class="kix-lineview">
            <div class="kix-lineview-content">
                <div class="doohickey"></div>
                <div class="content">PASS</div>
            </div>
        </div>
    </div>
    <br>
    <div class="kix-paragraphrenderer">
        <div class="kix-lineview">
            <div class="kix-lineview-content">
                <div class="doohickey"></div>
                <div class="content">PASS</div>
            </div>
        </div>
    </div>
</div>
chromium/third_party/blink/web_tests/fast/multicol/tall-line-in-short-block.html
