client-rect-overflowing-multicol.html

<!DOCTYPE html>
<style>body { margin:8px; }</style>
<div style="columns:1; width:10px; height:200px; 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, 1);
	var rect = rects[0];
	// #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 and height will be the unclipped bounding box of #elm.
	assert_equals(rect.left, -12);
	assert_equals(rect.top, -17);
	assert_equals(rect.width, 4000);
	assert_equals(rect.height, 40);
    }, "getClientRects should include overflow");
</script>

chromium/third_party/blink/web_tests/fast/multicol/client-rect-overflowing-multicol.html