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