| <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> |
