109 lines
3.1 KiB
HTML
109 lines
3.1 KiB
HTML
<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>
|