<!DOCTYPE html>
<style>
body { margin: 8px; }
div.box { -webkit-box-sizing: border; border: solid blue; }
div.shorter { height: 54px; }
div.taller { height: 72px; }
</style>
<div style="height: 100px; width: 325px; -webkit-columns:6; -webkit-column-gap:5px; columns:6; column-gap:5px;">
<div class="taller box"></div>
<div class="taller box"></div>
<div id="break-before" class="shorter box" style="-webkit-column-break-before: always;"></div>
<div class="shorter box" style="-webkit-column-break-after: always;"></div>
<div id="after-break" class="shorter box"></div>
<div id="no-break" class="shorter box" style="-webkit-column-break-inside: avoid;"></div>
</div>
<pre id="console"></pre>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function log(message)
{
document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
}
function testBoxColumn(id, expectedColumn) {
var rect = document.getElementById(id).getBoundingClientRect();
var actualPosition = Math.round(rect.left);
var expectedPosition = 8 + (50 + 5) * expectedColumn;
if (actualPosition == expectedPosition)
log("PASS: '" + id + "' is in column " + expectedColumn);
else
log("FAIL: '" + id + "' is at position " + actualPosition + " instead of " + expectedPosition);
}
testBoxColumn("break-before", 2);
testBoxColumn("after-break", 4);
testBoxColumn("no-break", 5);
</script>