third_party/WebKit/LayoutTests/fast/multicol/vertical-lr/break-properties.html

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