image-inside-nested-blocks-with-border.html

<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<script>
    description("Test that getBoundingClientRect works as expected on a float in the second column");
</script>
<body>
    <div id="multicol" style="-webkit-column-count:2; -webkit-column-gap:0; column-fill:auto; height:300px; width:600px;">
        <div style="height:280px;"></div>
        <div id="f1" style="border:5px solid black; float:left;">
            <img style="display:block; width:140px; height:80px;">
        </div>
    </div>
    <script>
    function floatOffset(float)
    {
        var parentRect = document.getElementById("multicol").getBoundingClientRect();
        var rect = float.getBoundingClientRect();
        return { left: rect.left - parentRect.left, top: rect.top - parentRect.top  };
    }

    var result = floatOffset(document.getElementById("f1"));
    shouldBe("result.left", "300");
    shouldBe("result.top", "0");
    </script>
</body>

chromium/third_party/blink/web_tests/fast/multicol/image-inside-nested-blocks-with-border.html