<!DOCTYPE html>
<p>There should be a green square below.</p>
<div style="position:relative;">
    <div style="float:left; width:50px; height:100px; background:green;"></div>
    <div id="invalidSpanner" style="column-span:all; width:50px; background:green;">
        <div style="float:left; width:50px; height:100px;"></div>
    </div>
</div>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script>
    test(function() {
	var invalidSpanner = document.getElementById("invalidSpanner");
        // It should not overlap with floats in the same block formatting
        // context.
        assert_equals(invalidSpanner.offsetLeft, 50);
	// It should establish a new block formatting context, so that it
	// stretches to contain all floats inside.
        assert_equals(invalidSpanner.offsetHeight, 100);
    }, "Column spanner without ancestor multicol");
</script>