blob: fe7db26d1331fbe0b2e522dbb69275b8338e53bc [file] [log] [blame]
<style>
div.box { -webkit-box-sizing: border; border: solid blue; }
div.shorter { width: 54px; }
div.taller { width: 72px; }
</style>
<body style="-webkit-writing-mode:vertical-lr">
<div style="width:100px; height:630px; -webkit-columns:6; -webkit-column-gap:5px; -webkit-column-fill:auto; columns:6; column-gap:5px; column-fill:auto;">
<div class="taller box"></div>
<div class="taller box"></div>
<div id="break-before" class="shorter box" style="break-before: column;"></div>
<div class="shorter box" style="break-after: column;"></div>
<div id="after-break" class="shorter box"></div>
<div id="no-break" class="shorter box" style="break-inside: avoid;"></div>
<div id="subPixelTest" style="width:10.5px"></div>
</div>
<pre id="console"></pre>
<script>
if (window.testRunner)
testRunner.dumpAsText();
function log(message)
{
document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
}
function testBoxPosition(id, expectedLeft, expectedTop)
{
var rect = document.getElementById(id).getBoundingClientRect();
if (Math.round(rect.left) === expectedLeft && Math.round(rect.top) === expectedTop)
log("PASS: '" + id + "' is at (" + expectedLeft + ", " + expectedTop + ")");
else
log("FAIL: '" + id + "' is at (" + Math.round(rect.left) + ", " + Math.round(rect.top) + ") instead of (" + expectedLeft + " ," + expectedTop + ")");
}
var rect = document.getElementById('subPixelTest').getBoundingClientRect();
var hasSubpixelSupport = Math.round(rect.bottom) != rect.bottom;
testBoxPosition("break-before", 8, hasSubpixelSupport ? 220 : 218);
testBoxPosition("after-break", 8, hasSubpixelSupport ? 431 : 428);
</script>