| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style>body { margin:0; }</style> |
| <div style="columns:4; column-gap:10px; column-fill:auto; width:430px; height:100px; background:yellow;"> <!-- column width is 100px --> |
| <div style="height:80px;"></div> |
| <div id="middleMulticol" style="columns:2; column-gap:10px; background:lime;"> <!-- column width is 45px --> |
| <div style="height:80px;"></div> |
| <div id="innerMulticol" style="columns:2; column-gap:5px; background:cyan;"> <!-- column width is 20px --> |
| <div id="innerChild" style="height:500px; background:olive;"></div> |
| </div> |
| <div id="middleChild" style="height:200px; background:salmon;"></div> |
| </div> |
| </div> |
| <script> |
| test(function() { |
| var rects = document.getElementById("middleMulticol").getClientRects(); |
| assert_equals(rects.length, 4); |
| assert_equals(rects[0].left, 0); |
| assert_equals(rects[0].top, 80); |
| assert_equals(rects[0].right, 100); |
| assert_equals(rects[0].bottom, 100); |
| assert_equals(rects[1].left, 110); |
| assert_equals(rects[1].top, 0); |
| assert_equals(rects[1].right, 210); |
| assert_equals(rects[1].bottom, 100); |
| assert_equals(rects[2].left, 220); |
| assert_equals(rects[2].top, 0); |
| assert_equals(rects[2].right, 320); |
| assert_equals(rects[2].bottom, 100); |
| assert_equals(rects[3].left, 330); |
| assert_equals(rects[3].top, 0); |
| assert_equals(rects[3].right, 430); |
| assert_equals(rects[3].bottom, 45); |
| }, "#middleMulticol"); |
| |
| test(function() { |
| var rects = document.getElementById("innerMulticol").getClientRects(); |
| assert_equals(rects.length, 3); |
| assert_equals(rects[0].left, 110); |
| assert_equals(rects[0].top, 40); |
| assert_equals(rects[0].right, 155); |
| assert_equals(rects[0].bottom, 100); |
| assert_equals(rects[1].left, 165); |
| assert_equals(rects[1].top, 0); |
| assert_equals(rects[1].right, 210); |
| assert_equals(rects[1].bottom, 100); |
| assert_equals(rects[2].left, 220); |
| assert_equals(rects[2].top, 0); |
| assert_equals(rects[2].right, 265); |
| assert_equals(rects[2].bottom, 90); |
| }, "#innerMulticol"); |
| |
| test(function() { |
| var rects = document.getElementById("innerChild").getClientRects(); |
| assert_equals(rects.length, 6); |
| assert_equals(rects[0].left, 110); |
| assert_equals(rects[0].top, 40); |
| assert_equals(rects[0].right, 130); |
| assert_equals(rects[0].bottom, 100); |
| assert_equals(rects[1].left, 135); |
| assert_equals(rects[1].top, 40); |
| assert_equals(rects[1].right, 155); |
| assert_equals(rects[1].bottom, 100); |
| assert_equals(rects[2].left, 165); |
| assert_equals(rects[2].top, 0); |
| assert_equals(rects[2].right, 185); |
| assert_equals(rects[2].bottom, 100); |
| assert_equals(rects[3].left, 190); |
| assert_equals(rects[3].top, 0); |
| assert_equals(rects[3].right, 210); |
| assert_equals(rects[3].bottom, 100); |
| assert_equals(rects[4].left, 220); |
| assert_equals(rects[4].top, 0); |
| assert_equals(rects[4].right, 240); |
| assert_equals(rects[4].bottom, 90); |
| assert_equals(rects[5].left, 245); |
| assert_equals(rects[5].top, 0); |
| assert_equals(rects[5].right, 265); |
| assert_equals(rects[5].bottom, 90); |
| }, "#innerChild"); |
| |
| test(function() { |
| var rects = document.getElementById("middleChild").getClientRects(); |
| assert_equals(rects.length, 4); |
| assert_equals(rects[0].left, 220); |
| assert_equals(rects[0].top, 90); |
| assert_equals(rects[0].right, 265); |
| assert_equals(rects[0].bottom, 100); |
| assert_equals(rects[1].left, 275); |
| assert_equals(rects[1].top, 0); |
| assert_equals(rects[1].right, 320); |
| assert_equals(rects[1].bottom, 100); |
| assert_equals(rects[2].left, 330); |
| assert_equals(rects[2].top, 0); |
| assert_equals(rects[2].right, 375); |
| assert_equals(rects[2].bottom, 45); |
| assert_equals(rects[3].left, 385); |
| assert_equals(rects[3].top, 0); |
| assert_equals(rects[3].right, 430); |
| assert_equals(rects[3].bottom, 45); |
| }, "#middleChild"); |
| </script> |
