OLD | NEW |
---|---|
1 <!DOCTYPE html> | |
1 <style> | 2 <style> |
3 body { margin: 5px; } | |
mstensho (USE GERRIT)
2014/11/27 10:37:53
Being explicit about the body margin is good, so t
andersr
2014/11/27 11:03:03
Done.
| |
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) { |
mstensho (USE GERRIT)
2014/11/27 10:37:53
Can you start counting from 0 instead of 1? That's
andersr
2014/11/27 11:03:03
Done.
| |
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 = (expectedColumn - 1) * 50 + expectedColumn * 5; |
mstensho (USE GERRIT)
2014/11/27 10:37:53
Could be "8 + 55 * expectedColumn" (if you start n
andersr
2014/11/27 11:03:03
Done. (Went for the explicit version).
| |
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", 3); |
34 testBoxPosition("after-break", 431, 8); | 38 testBoxColumn("after-break", 5); |
35 testBoxPosition("no-break", 537, 8); | 39 testBoxColumn("no-break", 6); |
36 </script> | 40 </script> |
OLD | NEW |