<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>body { margin:0; }</style>
<div style="writing-mode:vertical-rl; columns:4; column-gap:10px; column-fill:auto; height:430px; width:100px; background:yellow;"> <!-- column width is 100px -->
    <div style="width:80px;"></div>
    <div id="middleMulticol" style="columns:2; column-gap:10px; background:lime;"> <!-- column width is 45px -->
        <div style="width:80px;"></div>
        <div id="innerMulticol" style="columns:2; column-gap:5px; background:cyan;"> <!-- column width is 20px -->
            <div id="innerChild" style="width:500px; background:olive;"></div>
        </div>
        <div id="middleChild" style="width:200px; background:salmon;"></div>
    </div>
</div>
<script>
    test(function() {
        var rects = document.getElementById("middleMulticol").getClientRects();
        assert_equals(rects.length, 4);
        assert_equals(rects[0].top, 0);
        assert_equals(rects[0].left, 0);
        assert_equals(rects[0].bottom, 100);
        assert_equals(rects[0].right, 20);
        assert_equals(rects[1].top, 110);
        assert_equals(rects[1].left, 0);
        assert_equals(rects[1].bottom, 210);
        assert_equals(rects[1].right, 100);
        assert_equals(rects[2].top, 220);
        assert_equals(rects[2].left, 0);
        assert_equals(rects[2].bottom, 320);
        assert_equals(rects[2].right, 100);
        assert_equals(rects[3].top, 330);
        assert_equals(rects[3].left, 55);
        assert_equals(rects[3].bottom, 430);
        assert_equals(rects[3].right, 100);
    }, "#middleMulticol");

    test(function() {
        var rects = document.getElementById("innerMulticol").getClientRects();
        assert_equals(rects.length, 3);
        assert_equals(rects[0].top, 110);
        assert_equals(rects[0].left, 0);
        assert_equals(rects[0].bottom, 155);
        assert_equals(rects[0].right, 60);
        assert_equals(rects[1].top, 165);
        assert_equals(rects[1].left, 0);
        assert_equals(rects[1].bottom, 210);
        assert_equals(rects[1].right, 100);
        assert_equals(rects[2].top, 220);
        assert_equals(rects[2].left, 10);
        assert_equals(rects[2].bottom, 265);
        assert_equals(rects[2].right, 100);
    }, "#innerMulticol");

    test(function() {
        var rects = document.getElementById("innerChild").getClientRects();
        assert_equals(rects.length, 6);
        assert_equals(rects[0].top, 110);
        assert_equals(rects[0].left, 0);
        assert_equals(rects[0].bottom, 130);
        assert_equals(rects[0].right, 60);
        assert_equals(rects[1].top, 135);
        assert_equals(rects[1].left, 0);
        assert_equals(rects[1].bottom, 155);
        assert_equals(rects[1].right, 60);
        assert_equals(rects[2].top, 165);
        assert_equals(rects[2].left, 0);
        assert_equals(rects[2].bottom, 185);
        assert_equals(rects[2].right, 100);
        assert_equals(rects[3].top, 190);
        assert_equals(rects[3].left, 0);
        assert_equals(rects[3].bottom, 210);
        assert_equals(rects[3].right, 100);
        assert_equals(rects[4].top, 220);
        assert_equals(rects[4].left, 10);
        assert_equals(rects[4].bottom, 240);
        assert_equals(rects[4].right, 100);
        assert_equals(rects[5].top, 245);
        assert_equals(rects[5].left, 10);
        assert_equals(rects[5].bottom, 265);
        assert_equals(rects[5].right, 100);
    }, "#innerChild");

    test(function() {
        var rects = document.getElementById("middleChild").getClientRects();
        assert_equals(rects.length, 4);
        assert_equals(rects[0].top, 220);
        assert_equals(rects[0].left, 0);
        assert_equals(rects[0].bottom, 265);
        assert_equals(rects[0].right, 10);
        assert_equals(rects[1].top, 275);
        assert_equals(rects[1].left, 0);
        assert_equals(rects[1].bottom, 320);
        assert_equals(rects[1].right, 100);
        assert_equals(rects[2].top, 330);
        assert_equals(rects[2].left, 55);
        assert_equals(rects[2].bottom, 375);
        assert_equals(rects[2].right, 100);
        assert_equals(rects[3].top, 385);
        assert_equals(rects[3].left, 55);
        assert_equals(rects[3].bottom, 430);
        assert_equals(rects[3].right, 100);
    }, "#middleChild");
</script>