<rdar://problem/9737435> Re-enable -webkit-column-break-inside: avoid
[WebKit-https.git] / LayoutTests / fast / multicol / break-properties.html
1 <style>
2     div.box { -webkit-box-sizing: border; border: solid blue; }
3     div.shorter { height: 54px; }
4     div.taller { height: 72px; }
5 </style>
6 <div style="height: 100px; width: 630; -webkit-column-gap: 5px; -webkit-columns: 6;">
7     <div class="taller box"></div>
8     <div class="taller box"></div>
9     <div id="break-before" class="shorter box" style="-webkit-column-break-before: always;"></div>
10     <div class="shorter box" style="-webkit-column-break-after: always;"></div>
11     <div id="after-break" class="shorter box"></div>
12     <div id="no-break" class="shorter box" style="-webkit-column-break-inside: avoid;"></div>
13 </div>
14 <pre id="console"></pre>
15 <script>
16     if (window.layoutTestController)
17         layoutTestController.dumpAsText();
18
19     function log(message)
20     {
21         document.getElementById("console").appendChild(document.createTextNode(message + "\n"));
22     }
23
24     function testBoxPosition(id, expectedLeft, expectedTop)
25     {
26         var rect = document.getElementById(id).getBoundingClientRect();
27         if (rect.left === expectedLeft && rect.top === expectedTop)
28             log("PASS: '" + id + "' is at (" + expectedLeft + ", " + expectedTop + ")");
29         else
30             log("FAIL: '" + id + "' is at (" + rect.left + ", " + rect.top + ") instead of (" + expectedLeft + " ," + expectedTop + ")");
31     }
32
33     testBoxPosition("break-before", 218, 8);
34     testBoxPosition("after-break", 428, 8);
35     testBoxPosition("no-break", 533, 8);
36 </script>