OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/testharness.js"></script> |
| 3 <script src="../../../resources/testharnessreport.js"></script> |
| 4 <style>body { margin:0; }</style> |
| 5 <div style="writing-mode:vertical-lr; columns:4; column-gap:10px; column-fill:au
to; height:430px; width:100px; background:yellow;"> <!-- column width is 100px -
-> |
| 6 <div style="width:80px;"></div> |
| 7 <div id="middleMulticol" style="columns:2; column-gap:10px; background:lime;
"> <!-- column width is 45px --> |
| 8 <div style="width:80px;"></div> |
| 9 <div id="innerMulticol" style="columns:2; column-gap:5px; background:cya
n;"> <!-- column width is 20px --> |
| 10 <div id="innerChild" style="width:500px; background:olive;"></div> |
| 11 </div> |
| 12 <div id="middleChild" style="width:200px; background:salmon;"></div> |
| 13 </div> |
| 14 </div> |
| 15 <script> |
| 16 test(function() { |
| 17 var rects = document.getElementById("middleMulticol").getClientRects(); |
| 18 assert_equals(rects.length, 4); |
| 19 assert_equals(rects[0].top, 0); |
| 20 assert_equals(rects[0].left, 80); |
| 21 assert_equals(rects[0].bottom, 100); |
| 22 assert_equals(rects[0].right, 100); |
| 23 assert_equals(rects[1].top, 110); |
| 24 assert_equals(rects[1].left, 0); |
| 25 assert_equals(rects[1].bottom, 210); |
| 26 assert_equals(rects[1].right, 100); |
| 27 assert_equals(rects[2].top, 220); |
| 28 assert_equals(rects[2].left, 0); |
| 29 assert_equals(rects[2].bottom, 320); |
| 30 assert_equals(rects[2].right, 100); |
| 31 assert_equals(rects[3].top, 330); |
| 32 assert_equals(rects[3].left, 0); |
| 33 assert_equals(rects[3].bottom, 430); |
| 34 assert_equals(rects[3].right, 45); |
| 35 }, "#middleMulticol"); |
| 36 |
| 37 test(function() { |
| 38 var rects = document.getElementById("innerMulticol").getClientRects(); |
| 39 assert_equals(rects.length, 3); |
| 40 assert_equals(rects[0].top, 110); |
| 41 assert_equals(rects[0].left, 40); |
| 42 assert_equals(rects[0].bottom, 155); |
| 43 assert_equals(rects[0].right, 100); |
| 44 assert_equals(rects[1].top, 165); |
| 45 assert_equals(rects[1].left, 0); |
| 46 assert_equals(rects[1].bottom, 210); |
| 47 assert_equals(rects[1].right, 100); |
| 48 assert_equals(rects[2].top, 220); |
| 49 assert_equals(rects[2].left, 0); |
| 50 assert_equals(rects[2].bottom, 265); |
| 51 assert_equals(rects[2].right, 90); |
| 52 }, "#innerMulticol"); |
| 53 |
| 54 test(function() { |
| 55 var rects = document.getElementById("innerChild").getClientRects(); |
| 56 assert_equals(rects.length, 6); |
| 57 assert_equals(rects[0].top, 110); |
| 58 assert_equals(rects[0].left, 40); |
| 59 assert_equals(rects[0].bottom, 130); |
| 60 assert_equals(rects[0].right, 100); |
| 61 assert_equals(rects[1].top, 135); |
| 62 assert_equals(rects[1].left, 40); |
| 63 assert_equals(rects[1].bottom, 155); |
| 64 assert_equals(rects[1].right, 100); |
| 65 assert_equals(rects[2].top, 165); |
| 66 assert_equals(rects[2].left, 0); |
| 67 assert_equals(rects[2].bottom, 185); |
| 68 assert_equals(rects[2].right, 100); |
| 69 assert_equals(rects[3].top, 190); |
| 70 assert_equals(rects[3].left, 0); |
| 71 assert_equals(rects[3].bottom, 210); |
| 72 assert_equals(rects[3].right, 100); |
| 73 assert_equals(rects[4].top, 220); |
| 74 assert_equals(rects[4].left, 0); |
| 75 assert_equals(rects[4].bottom, 240); |
| 76 assert_equals(rects[4].right, 90); |
| 77 assert_equals(rects[5].top, 245); |
| 78 assert_equals(rects[5].left, 0); |
| 79 assert_equals(rects[5].bottom, 265); |
| 80 assert_equals(rects[5].right, 90); |
| 81 }, "#innerChild"); |
| 82 |
| 83 test(function() { |
| 84 var rects = document.getElementById("middleChild").getClientRects(); |
| 85 assert_equals(rects.length, 4); |
| 86 assert_equals(rects[0].top, 220); |
| 87 assert_equals(rects[0].left, 90); |
| 88 assert_equals(rects[0].bottom, 265); |
| 89 assert_equals(rects[0].right, 100); |
| 90 assert_equals(rects[1].top, 275); |
| 91 assert_equals(rects[1].left, 0); |
| 92 assert_equals(rects[1].bottom, 320); |
| 93 assert_equals(rects[1].right, 100); |
| 94 assert_equals(rects[2].top, 330); |
| 95 assert_equals(rects[2].left, 0); |
| 96 assert_equals(rects[2].bottom, 375); |
| 97 assert_equals(rects[2].right, 45); |
| 98 assert_equals(rects[3].top, 385); |
| 99 assert_equals(rects[3].left, 0); |
| 100 assert_equals(rects[3].bottom, 430); |
| 101 assert_equals(rects[3].right, 45); |
| 102 }, "#middleChild"); |
| 103 </script> |
OLD | NEW |