| <style> |
| div.box { -webkit-box-sizing: border; border: solid blue; } |
| div.shorter { width: 54px; } |
| div.taller { width: 72px; } |
| </style> |
| <body style="-webkit-writing-mode:vertical-lr"> |
| <div style="width:100px; height:630px; -webkit-columns:6; -webkit-column-gap:5px; -webkit-column-fill:auto; columns:6; column-gap:5px; column-fill:auto;"> |
| <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 id="subPixelTest" style="width:10.5px"></div> |
| </div> |
| <pre id="console"></pre> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| function log(message) |
| { |
| document.getElementById("console").appendChild(document.createTextNode(message + "\n")); |
| } |
| |
| function testBoxPosition(id, expectedLeft, expectedTop) |
| { |
| var rect = document.getElementById(id).getBoundingClientRect(); |
| if (Math.round(rect.left) === expectedLeft && Math.round(rect.top) === expectedTop) |
| log("PASS: '" + id + "' is at (" + expectedLeft + ", " + expectedTop + ")"); |
| else |
| log("FAIL: '" + id + "' is at (" + Math.round(rect.left) + ", " + Math.round(rect.top) + ") instead of (" + expectedLeft + " ," + expectedTop + ")"); |
| } |
| |
| var rect = document.getElementById('subPixelTest').getBoundingClientRect(); |
| var hasSubpixelSupport = Math.round(rect.bottom) != rect.bottom; |
| |
| testBoxPosition("break-before", 8, hasSubpixelSupport ? 220 : 218); |
| testBoxPosition("after-break", 8, hasSubpixelSupport ? 431 : 428); |
| </script> |
