OLD | NEW |
| 1 <!DOCTYPE html> |
1 <style> | 2 <style> |
| 3 body { margin: 8px; } |
2 div.box { -webkit-box-sizing: border; border: solid blue; } | 4 div.box { -webkit-box-sizing: border; border: solid blue; } |
3 div.shorter { height: 54px; } | 5 div.shorter { height: 54px; } |
4 div.taller { height: 72px; } | 6 div.taller { height: 72px; } |
5 </style> | 7 </style> |
6 <div style="height: 100px; width: 630; -webkit-columns:6; -webkit-column-gap:5px
; columns:6; column-gap:5px;"> | 8 <div style="height: 100px; width: 325px; -webkit-columns:6; -webkit-column-gap:5
px; columns:6; column-gap:5px;"> |
7 <div class="taller box"></div> | 9 <div class="taller box"></div> |
8 <div class="taller box"></div> | 10 <div class="taller box"></div> |
9 <div id="break-before" class="shorter box" style="-webkit-column-break-befor
e: always;"></div> | 11 <div id="break-before" class="shorter box" style="-webkit-column-break-befor
e: always;"></div> |
10 <div class="shorter box" style="-webkit-column-break-after: always;"></div> | 12 <div class="shorter box" style="-webkit-column-break-after: always;"></div> |
11 <div id="after-break" class="shorter box"></div> | 13 <div id="after-break" class="shorter box"></div> |
12 <div id="no-break" class="shorter box" style="-webkit-column-break-inside: a
void;"></div> | 14 <div id="no-break" class="shorter box" style="-webkit-column-break-inside: a
void;"></div> |
13 </div> | 15 </div> |
14 <pre id="console"></pre> | 16 <pre id="console"></pre> |
15 <script> | 17 <script> |
16 if (window.testRunner) | 18 if (window.testRunner) |
17 testRunner.dumpAsText(); | 19 testRunner.dumpAsText(); |
18 | 20 |
19 function log(message) | 21 function log(message) |
20 { | 22 { |
21 document.getElementById("console").appendChild(document.createTextNode(m
essage + "\n")); | 23 document.getElementById("console").appendChild(document.createTextNode(m
essage + "\n")); |
22 } | 24 } |
23 | 25 |
24 function testBoxPosition(id, expectedLeft, expectedTop) | 26 function testBoxColumn(id, expectedColumn) { |
25 { | |
26 var rect = document.getElementById(id).getBoundingClientRect(); | 27 var rect = document.getElementById(id).getBoundingClientRect(); |
27 if (Math.round(rect.left) === expectedLeft && Math.round(rect.top) === e
xpectedTop) | 28 var actualPosition = Math.round(rect.left); |
28 log("PASS: '" + id + "' is at (" + expectedLeft + ", " + expectedTop
+ ")"); | 29 var expectedPosition = 8 + (50 + 5) * expectedColumn; |
| 30 |
| 31 if (actualPosition == expectedPosition) |
| 32 log("PASS: '" + id + "' is in column " + expectedColumn); |
29 else | 33 else |
30 log("FAIL: '" + id + "' is at (" + Math.round(rect.left) + ", " + Ma
th.round(rect.top) + ") instead of (" + expectedLeft + " ," + expectedTop + ")")
; | 34 log("FAIL: '" + id + "' is at position " + actualPosition + " instea
d of " + expectedPosition); |
31 } | 35 } |
32 | 36 |
33 testBoxPosition("break-before", 220, 8); | 37 testBoxColumn("break-before", 2); |
34 testBoxPosition("after-break", 431, 8); | 38 testBoxColumn("after-break", 4); |
35 testBoxPosition("no-break", 537, 8); | 39 testBoxColumn("no-break", 5); |
36 </script> | 40 </script> |
OLD | NEW |