LayoutTests/fast/multicol/break-properties.html

<style>
    div.box { -webkit-box-sizing: border; border: solid blue; }
    div.shorter { height: 54px; }
    div.taller { height: 72px; }
</style>
<div style="height: 100px; width: 630; -webkit-column-gap: 5px; -webkit-columns: 6;">
    <div class="taller box"></div>
    <div class="taller box"></div>
    <div id="break-before" class="shorter box" style="-webkit-column-break-before: always;"></div>
    <div class="shorter box" style="-webkit-column-break-after: always;"></div>
    <div id="after-break" class="shorter box"></div>
    <div id="no-break" class="shorter box" style="-webkit-column-break-inside: avoid;"></div>
</div>
<pre id="console"></pre>
<script>
    if (window.layoutTestController)
        layoutTestController.dumpAsText();

    function log(message)
    {
        document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
    }

    function testBoxPosition(id, expectedLeft, expectedTop)
    {
        var rect = document.getElementById(id).getBoundingClientRect();
        if (rect.left === expectedLeft && rect.top === expectedTop)
            log("PASS: '" + id + "' is at (" + expectedLeft + ", " + expectedTop + ")");
        else
            log("FAIL: '" + id + "' is at (" + rect.left + ", " + rect.top + ") instead of (" + expectedLeft + " ," + expectedTop + ")");
    }

    testBoxPosition("break-before", 218, 8);
    testBoxPosition("after-break", 428, 8);
    testBoxPosition("no-break", 533, 8);
</script>