transformed-inline-block-in-multicol.html

<!DOCTYPE html>
<script src="../resources/ahem.js"></script>
<style>
    body { margin:0; }
</style>
<div style="columns:3; width:100px; height:100px; column-fill:auto; font:16px/1 Ahem; background:yellow;">
    <span id="elm" style="display:inline-block; transform:translateX(16px) rotate(90deg); transform-origin:top left;">XXX</span>
</div>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<script>
    test(function() {
        var rects = document.getElementById("elm").getClientRects();
        assert_equals(rects.length, 1);
        var rect = rects[0];
        assert_equals(rect.left, 0, "left");
        assert_equals(rect.top, 0, "top");
        assert_between_inclusive(rect.right, 15.9, 16.1, "right");
        assert_between_inclusive(rect.bottom, 47.9, 48.1, "bottom");
    }, "getClientRects of transformed atomic inline in multicol");
</script>

chromium/third_party/blink/web_tests/transforms/transformed-inline-block-in-multicol.html