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 - writing-mode is vertical-rl.");
</script>
<body style="-webkit-writing-mode:vertical-rl;">
    <div id="multicol" style="-webkit-column-count:2; -webkit-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>
    <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", "210");
    shouldBe("result.top", "300");
    </script>
</body>

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