<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>body { margin:0; }</style>
<div style="writing-mode:vertical-lr; 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, 80);
assert_equals(rects[0].bottom, 100);
assert_equals(rects[0].right, 100);
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, 0);
assert_equals(rects[3].bottom, 430);
assert_equals(rects[3].right, 45);
}, "#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, 40);
assert_equals(rects[0].bottom, 155);
assert_equals(rects[0].right, 100);
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, 0);
assert_equals(rects[2].bottom, 265);
assert_equals(rects[2].right, 90);
}, "#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, 40);
assert_equals(rects[0].bottom, 130);
assert_equals(rects[0].right, 100);
assert_equals(rects[1].top, 135);
assert_equals(rects[1].left, 40);
assert_equals(rects[1].bottom, 155);
assert_equals(rects[1].right, 100);
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, 0);
assert_equals(rects[4].bottom, 240);
assert_equals(rects[4].right, 90);
assert_equals(rects[5].top, 245);
assert_equals(rects[5].left, 0);
assert_equals(rects[5].bottom, 265);
assert_equals(rects[5].right, 90);
}, "#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, 90);
assert_equals(rects[0].bottom, 265);
assert_equals(rects[0].right, 100);
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, 0);
assert_equals(rects[2].bottom, 375);
assert_equals(rects[2].right, 45);
assert_equals(rects[3].top, 385);
assert_equals(rects[3].left, 0);
assert_equals(rects[3].bottom, 430);
assert_equals(rects[3].right, 45);
}, "#middleChild");
</script>
Codebase Browser
chromium