blob: 7ecffc43e0b163aab5c6020dd74230c5b0a05694 [file] [log] [blame]
<html>
<head>
<style>
div.columns {
width: 200px;
-webkit-columns: 2;
-webkit-column-gap: 0;
-webkit-column-fill: auto;
columns: 2;
column-gap: 0;
column-fill: auto;
outline: 1px solid blue;
font-family: ahem;
font-size: 10px;
margin: 5px;
overflow: hidden;
}
div.float {
float: left;
width: 50px;
margin-top: 5px;
color: silver;
}
</style>
</head>
<body>
<div id="tests">
<div class="columns" style="height: 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="height: 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="height: 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="height: 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="height: 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", 0, 45],
["f2", 0, 45],
["f3", 0, 45],
["f4", 0, 55],
["f5", 0, 15]
];
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++
}
if (window.testRunner) {
testRunner.dumpAsText();
document.getElementById("tests").style.display = "none";
}
document.getElementById("result").innerText = failures ? "FAIL: " + failures + " cases failed" : "PASS";
</script>