<!DOCTYPE html>
<style>body { margin:0; }</style>
<div style="columns:2; column-fill:auto; column-gap:0; width:100px; height:10px;">
    <div style="height:10px;"></div>
    <div id="target"></div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    test(function() {
        var rects = document.getElementById("target").getClientRects();
        assert_equals(rects.length, 1);
        var rect = rects[0];
        assert_equals(rect.width, 50);
        assert_equals(rect.height, 0);

	// Not sure about this. Should there be a second column here, to hold
	// #target, which is 0 pixels tall? Currently we don't do that. We only
	// have one column, so we let #target reside at the bottom of the first
	// column. If we add more content after #target with some actual
	// height, that's when we create a second column, and *then* #target
	// will reside at the top of the second column - just because of what's
	// put after it.
        assert_equals(rect.left, 0);
        assert_equals(rect.top, 10);
    }, "getClientRects on empty last child at column boundary");
</script>