| <!DOCTYPE html> |
| <style> |
| body { margin: 8px; } |
| div.box { -webkit-box-sizing: border; border: solid blue; } |
| div.shorter { height: 54px; } |
| div.taller { height: 72px; } |
| </style> |
| <div style="height: 100px; width: 325px; -webkit-columns:6; -webkit-column-gap:5px; columns:6; column-gap:5px;"> |
| <div class="taller box"></div> |
| <div class="taller box"></div> |
| <div id="break-before" class="shorter box" style="-webkit-column-break-before: always;"></div> |
| <div class="shorter box" style="-webkit-column-break-after: always;"></div> |
| <div id="after-break" class="shorter box"></div> |
| <div id="no-break" class="shorter box" style="-webkit-column-break-inside: avoid;"></div> |
| </div> |
| <pre id="console"></pre> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function log(message) |
| { |
| document.getElementById("console").appendChild(document.createTextNode(message + "\n")); |
| } |
| |
| function testBoxColumn(id, expectedColumn) { |
| var rect = document.getElementById(id).getBoundingClientRect(); |
| var actualPosition = Math.round(rect.left); |
| var expectedPosition = 8 + (50 + 5) * expectedColumn; |
| |
| if (actualPosition == expectedPosition) |
| log("PASS: '" + id + "' is in column " + expectedColumn); |
| else |
| log("FAIL: '" + id + "' is at position " + actualPosition + " instead of " + expectedPosition); |
| } |
| |
| testBoxColumn("break-before", 2); |
| testBoxColumn("after-break", 4); |
| testBoxColumn("no-break", 5); |
| </script> |
