| <!DOCTYPE html> |
| <style>body { margin:8px; }</style> |
| <div style="columns:2; width:25px; column-gap:5px; height:10px; column-fill:auto;"> |
| <div id="elm" style="margin-left:-20px; margin-top:-25px; width:4000px; height:40px;"></div> |
| </div> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| var elm = document.getElementById("elm"); |
| var rects = elm.getClientRects(); |
| assert_equals(rects.length, 2); |
| // #elm is offset -20px,-25px relatively to its multicol container, due |
| // to negative margins. BODY is offset 8px,8px due to its margin. So the |
| // absolute offset will be (-20px+8px),(-25px+8px) = -12px,-17px. The |
| // width will be the unclipped bounding box of #elm, while the height |
| // will be as much as it can fit in the first column. Since there's a |
| // top margin of -25px, and column height is 10px, we're going to be |
| // able to fit 10px - (-25px) = 35px. |
| assert_equals(rects[0].left, -12); |
| assert_equals(rects[0].top, -17); |
| assert_equals(rects[0].width, 4000); |
| assert_equals(rects[0].height, 35); |
| // Since the first column could fit 35px of #elm's height, there's 5px |
| // left for it here in the second column. |
| assert_equals(rects[1].left, 3); |
| assert_equals(rects[1].top, 8); |
| assert_equals(rects[1].width, 4000); |
| assert_equals(rects[1].height, 5); |
| |
| // Check that the getBoundingClientRect() agrees with the union of the |
| // two rects above. |
| var boundingClientRect = elm.getBoundingClientRect(); |
| var left = Math.min(rects[0].left, rects[1].left); |
| var right = Math.max(rects[0].right, rects[1].right); |
| var top = Math.min(rects[0].top, rects[1].top); |
| var bottom = Math.max(rects[0].bottom, rects[1].bottom); |
| assert_equals(boundingClientRect.left, left); |
| assert_equals(boundingClientRect.right, right); |
| assert_equals(boundingClientRect.top, top); |
| assert_equals(boundingClientRect.bottom, bottom); |
| }, "getClientRects should include overflow"); |
| </script> |
