<html style="-webkit-writing-mode:vertical-lr">
<style>
    div.columns {
        -webkit-columns: 2;
        -webkit-column-gap: 0;
        -webkit-column-fill: auto;
        columns: 2;
        column-gap: 0;
        column-fill: auto;
        height: 200px;
        outline: 1px solid blue;
        font-family: ahem;
        font-size: 10px;
        margin: 5px;
        overflow: hidden;
    }

    div.float {
        float: left;
        height: 50px;
        margin-block-start: 5px;
        color: silver;
    }
</style>
<div id="tests">
    <div class="columns" style="width: 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="width: 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="width: 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="width: 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="width: 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", 45, 0],
        ["f2", 45, 0],
        ["f3", 45, 0],
        ["f4", 55, 0],
        ["f5", 15, 0]
    ];

    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++
            alert(result.width + " " + result.height)
        }
    }

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

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