| <!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> |
