<!DOCTYPE html>
<script>
    onload = function() {
        document.body.offsetTop; // trigger layout
        document.getElementById('elm').className = "x";
    }
</script>
<style>
    .x::before, .x::after { display:block; -webkit-column-span:all; background:yellow; content:".........."; }
</style>
<p>Test adding ::before and ::after pseudo elements that are spanners. The DOM element contains
    something, and is also preceded and followed by content, which means that what used to be one column
    row needs to be split into three.</p>
<p>There should be five rectangles with identical sizes below. The first, third and fifth
    one should be blue with nothing inside. The second and fourth one should be yellow with some
    dots inside.</p>
<div style="-webkit-columns:4; line-height:50px; background:blue;">
    &nbsp;
    <span id="elm">&nbsp;</span>
    &nbsp;
</div>