chromium/third_party/blink/web_tests/fast/multicol/flipped-blocks-border-after.html

<!DOCTYPE html>
<style>
    .test { position: absolute; }
    .pos1 { left: 50px; top: 50px;}
    .pos2 { left: 250px; top: 50px;}
    .pos3 { left: 50px; top: 300px;}

    .multicol {
        border: 0 solid black;
        background-color: red;
        width: 100px;
        height: 100px;
        -webkit-column-gap: 0;
        -webkit-columns: 2;
    }
    .multicol > div {
        background-color: green;
    }

    .horizontal_tb {
        -webkit-writing-mode: horizontal-tb;
        border-bottom-width: 50px;
    }
    .vertical_rl {
        -webkit-writing-mode: vertical-rl;
        border-left-width: 50px;
    }
    .vertical_lr {
        -webkit-writing-mode: vertical-lr;
        border-right-width: 50px;
    }
    .horizontal_bt > div, .horizontal_tb > div {
        height: 100px;
    }
    .vertical_lr > div, .vertical_rl > div {
        width: 100px;
    }
    .break_before {
         -webkit-column-break-before: always;
    }
</style>
<p>
    There should be four green squares below, plus a large black border on one side, as
    indicated. There should be no red.
</p>
<div class="test pos1">
    <p>Border below</p>
    <div class="multicol horizontal_tb">
        <div></div><div class="break_before"></div>
    </div>
</div>
<div class="test pos2">
    <p>Border left</p>
    <div class="multicol vertical_rl">
        <div></div><div class="break_before"></div>
    </div>
</div>
<div class="test pos3">
    <p>Border right</p>
    <div class="multicol vertical_lr">
        <div></div><div class="break_before"></div>
    </div>
</div>