third_party/WebKit/LayoutTests/fast/multicol/inline-getclientrects.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <script>
   4     if (window.testRunner)
   5         testRunner.dumpAsText();
   6 </script>
   7 <body style="margin-left:10px; margin-top:15px;">
   8     <!-- Make a container with 9 lines. With three columns, that means three lines per column. -->
   9     <div style="-webkit-columns:3; columns:3; column-gap:1em; -webkit-column-gap:1em; width:32em; orphans:1; widows:1;">
  10         <br>
  11         <br>
  12         <br>
  13         <br>
  14         <br>
  15         <span id="elm">
  16             <!-- This is at a column boundary, where the first line fits in the second column, while
  17                  the second line is in the third column. -->
  18             XXXXXXXXXXXXXXXXXXXXXXXXXX
  19             XXXXXXXXXXXXXXXXXXXXXXXXXX
  20         </span><br>
  21         <br>
  22         <br>
  23     </div>
  24     <script>
  25         var rects = document.getElementById('elm').getClientRects();
  26         shouldBe("rects.length", "2");
  27         shouldBeGreaterThan("rects[1].left", "rects[0].left");
  28         shouldBeGreaterThan("rects[0].top", "rects[1].top");
  29         shouldBeGreaterThan("rects[0].right - rects[0].left", "0");
  30         shouldBe("rects[1].right - rects[1].left", "rects[0].right - rects[0].left");
  31         shouldBeGreaterThan("rects[0].bottom - rects[0].top", "0");
  32         shouldBe("rects[1].bottom - rects[1].top", "rects[0].bottom - rects[0].top");
  33     </script>
  34 </body>