<!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>
Codebase Browser
chromium