<html>
<head>
<style>
    div.columns {
        width: 200px;
        -webkit-columns: 2;
        -webkit-column-gap: 0;
        -webkit-column-fill: auto;
        columns: 2;
        column-gap: 0;
        column-fill: auto;
        outline: 1px solid blue;
        font-family: ahem;
        font-size: 10px;
        margin: 5px;
        overflow: hidden;
    }

    div.float {
        float: left;
        width: 50px;
        margin-top: 5px;
        color: silver;
    }
</style>
</head>
<body>
<div id="tests">
    <div class="columns" style="height: 80px;">
        one line two lines three lines!
        <div class="float" id="f1">
            three line float
        </div>
        text runs here next to the float
    </div>
    <!-- In this case, the float fits, but then the main content causes the break
         to occur earlier and the float gets split. -->
    <div class="columns" style="height: 75px;">
        one line two lines three lines!
        <div class="float" id="f2">
            three line float
        </div>
        text runs here next to the float
    </div>
    <!-- In this case, the float paginates after its second line. -->
    <div class="columns" style="height: 70px;">
        one line two lines three lines!
        <div class="float" id="f3">
            three line float
        </div>
        text runs here next to the float
    </div>
    <!-- In this case, the float paginates after its first line. -->
    <div class="columns" style="height: 70px;">
        one line two lines three lines and some more
        <div class="float" id="f4">
            three line float
        </div>
        text runs here next to the float
    </div>
    <!-- In this case, the float paginates after its third line. -->
    <div class="columns" style="height: 45px;">
        one line
        <div class="float" id="f5">
            and one five line float
        </div>
        text runs here next to the float
    </div>
</div>
<pre id="result"></pre>
<script>
    function floatOffset(float)
    {
        var range = document.createRange();
        range.setStart(float, 0);
        range.setEnd(float, 0);
        range.expand("word");
        var rect = range.getBoundingClientRect();
        var parentRect = float.parentNode.getBoundingClientRect();
        return { width: rect.left - parentRect.left, height: rect.top - parentRect.top  };
    }

    var tests = [
        ["f1", 0, 45],
        ["f2", 0, 45],
        ["f3", 0, 45],
        ["f4", 0, 55],
        ["f5", 0, 15]
    ];

    var test;
    var failures = 0;
    while (test = tests.shift()) {
        var float = document.getElementById(test[0]);
        var result = floatOffset(float);
        var passed = result.width === test[1] && result.height === test[2]
        float.style.color = passed ? "green" : "red";
        if (!passed)
            failures++
    }

    if (window.testRunner) {
        testRunner.dumpAsText();
        document.getElementById("tests").style.display = "none";
    }

    document.getElementById("result").innerText = failures ? "FAIL: " + failures + " cases failed" : "PASS";
</script>