blob: 60325a0d25903ede686ab4c8fa2a53493f0d6a9b [file] [log] [blame]
<html style="-webkit-writing-mode:vertical-lr">
<style>
div.columns {
-webkit-columns: 2;
-webkit-column-gap: 0;
-webkit-column-fill: auto;
columns: 2;
column-gap: 0;
column-fill: auto;
height: 200px;
outline: 1px solid blue;
font-family: ahem;
font-size: 10px;
margin: 5px;
overflow: hidden;
}
div.float {
float: left;
height: 50px;
-webkit-margin-before: 5px;
color: silver;
}
</style>
<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", 45, 0],
["f2", 45, 0],
["f3", 45, 0],
["f4", 55, 0],
["f5", 15, 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>