<html>
<body style="-webkit-writing-mode: vertical-lr">
<div id="tests" style="-webkit-column-count:2; -webkit-column-gap:0; -webkit-column-fill:auto; column-count:2; column-gap:0; column-fill:auto; width:300px; height:600px;">
<div style="width:280px"></div>
<div id="f1" style="border:5px solid black; float:left">
<img style="display:block;height:140px;width:80px;">
</div>
</div>
<div id="result"></div>
<script>
    function floatOffset(float)
    {
        var parentRect = document.getElementById('tests').getBoundingClientRect();
        var rect = float.getBoundingClientRect();
        return { width: rect.left - parentRect.left, height: rect.top - parentRect.top  };
    }

    var tests = [
        ["f1", 0, 300]
    ];

    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.backgroundColor = 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>


</body>
</html>