<!DOCTYPE html>
<html>
    <head>
        <title>Change multicol with spanner to regular block</title>
        <script>
            function test() {
                var elm = document.getElementById('elm');
                elm.offsetTop; // trigger layout
                elm.style.WebkitColumns = 'auto';
                elm.style.columns = 'auto';
            }
        </script>
    </head>
    <body onload="test()">
        <p>There should be a blue <em>square</em> below.</p>
        <div id="elm" style="-webkit-columns:4; columns:4; orphans:1; widows:1; width:17em; line-height:4em;">
            <div style="margin-top:100px; margin-left:1em;">
                <div style="-webkit-column-span:all; column-span:all; background:blue;">&nbsp;</div>
            </div>
            <div style="margin-left:1em; background:blue;">
                <br>
                <br>
                <br>
            </div>
        </div>
    </body>
</html>