<html style="-webkit-writing-mode:horizontal-tb;">
<head>
<style>
div.columns {
height: 200px;
-webkit-columns: 2;
-webkit-column-gap: 0;
columns: 2;
column-gap: 0;
column-fill: auto;
outline: 1px solid blue;
font-family: Ahem;
font-size: 10px;
margin: 5px;
overflow: hidden;
orphans: 1;
widows: 1;
}
div.float {
float: left;
height: 51px;
margin-block-start: 5px;
color: silver;
}
</style>
</head>
<body style="-webkit-writing-mode:vertical-rl; width:800px">
<div id="tests">
<div class="columns" style="width: 80px;">
one line two lines three lines
<div class="float" id="f1">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float fits, but then the main content causes the break
to occur earlier and the float gets split. -->
<div class="columns" style="width: 75px;">
one line two lines three lines
<div class="float" id="f2">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float paginates after its second line. -->
<div class="columns" style="width: 70px;">
one line two lines three lines
<div class="float" id="f3">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float paginates after its first line. -->
<div class="columns" style="width: 70px;">
one line two lines three lines and some more
<div class="float" id="f4">
three line float
</div>
text runs here next to the float
</div>
<!-- In this case, the float paginates after its third line. -->
<div class="columns" style="width: 45px;">
one line
<div class="float" id="f5">
and one five line float
</div>
text runs here next to the float
</div>
</div>
<pre id="result"></pre>
<script>
function floatOffset(float)
{
var range = document.createRange();
range.setStart(float, 0);
range.setEnd(float, 0);
range.expand("word");
var rect = range.getBoundingClientRect();
var parentRect = float.parentNode.getBoundingClientRect();
return { width: rect.left - parentRect.left, height: rect.top - parentRect.top };
}
var tests = [
["f1", 25, 0],
["f2", 20, 0],
["f3", 15, 0],
["f4", 5, 0],
["f5", 20, 0]
];
var test;
var failures = 0;
while (test = tests.shift()) {
var float = document.getElementById(test[0]);
var result = floatOffset(float);
var passed = result.width === test[1] && result.height === test[2]
float.style.color = passed ? "green" : "red";
if (!passed) {
failures++
alert(result.width + " " + result.height);
}
}
if (window.testRunner) {
testRunner.dumpAsText();
document.getElementById("tests").style.display = "none";
}
document.getElementById("result").innerText = failures ? "FAIL: " + failures + " cases failed" : "PASS";
</script>