third_party/WebKit/LayoutTests/css1/units/rounding.html

   1 <html>
   2 <head>
   3 <style type="text/css">
   4     body, div {
   5         margin: 0;
   6         padding: 0;
   7         border: 0;
   8     }
   9     #top, #bottom {
  10         line-height: 1.5;
  11         font-size: 70%;
  12         background:green;
  13         color:white;
  14         width:100%;
  15     }
  16     #top {
  17         padding:.6em 0 .7em;
  18     }
  19     #bottom {
  20       position:absolute;
  21       top:2.8em;
  22     }
  23 </style>
  24 </head>
  25 <body>
  26
  27 <div id="top">no gap below</div>
  28 <div id="bottom">no gap above</div>
  29
  30 <div id="description"></div>
  31 <div id="console"></div>
  32 <script src="../../resources/js-test.js"></script>
  33 <script>
  34
  35 description("This test checks that floating point rounding doesn't cause misalignment.  There should be no gap between the divs.");
  36
  37 var divtop = document.getElementById("top").getBoundingClientRect();
  38 var divbottom = document.getElementById("bottom").getBoundingClientRect();
  39 shouldBe('Math.round(divtop.bottom)', '31');
  40 shouldBe('Math.round(divbottom.top)', '31');
  41
  42 </script>
  43
  44
  45 </body>
  46 </html>