third_party/WebKit/LayoutTests/fast/multicol/image-inside-nested-blocks-with-border.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <script>
   4     description("Test that getBoundingClientRect works as expected on a float in the second column");
   5 </script>
   6 <body>
   7     <div id="multicol" style="-webkit-column-count:2; -webkit-column-gap:0; column-fill:auto; height:300px; width:600px;">
   8         <div style="height:280px;"></div>
   9         <div id="f1" style="border:5px solid black; float:left;">
  10             <img style="display:block; width:140px; height:80px;">
  11         </div>
  12     </div>
  13     <script>
  14     function floatOffset(float)
  15     {
  16         var parentRect = document.getElementById("multicol").getBoundingClientRect();
  17         var rect = float.getBoundingClientRect();
  18         return { left: rect.left - parentRect.left, top: rect.top - parentRect.top  };
  19     }
  20
  21     var result = floatOffset(document.getElementById("f1"));
  22     shouldBe("result.left", "300");
  23     shouldBe("result.top", "0");
  24     </script>
  25 </body>