LayoutTests/fast/css/line-height-rounding.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4 <style type="text/css">
   5 </style>
   6
   7 <script>
   8 if (window.layoutTestController)
   9     layoutTestController.dumpAsText();
  10
  11 function checkLineHeight(fontSize, lineHeightPercent, expectedLineHeight) {
  12     var testElement = document.getElementById('testElement');
  13     testElement.style.fontSize = fontSize;
  14     testElement.style.lineHeight = lineHeightPercent;
  15
  16     var style = document.defaultView.getComputedStyle(testElement, null);
  17     var actualLineHeight = style.getPropertyValue('line-height');
  18     if (actualLineHeight != expectedLineHeight) {
  19         return "FAIL: font size: " + fontSize +
  20                "; line height percent: " + lineHeightPercent +
  21                "; expected line height: " + expectedLineHeight +
  22                "; actual line height: " + actualLineHeight + "<br>";
  23     }
  24
  25     return "";
  26 }
  27
  28 function test() {
  29     var message = checkLineHeight("10px", 1.05, '11px');  // 10*1.05  = 10.50
  30     message += checkLineHeight("10px", 1.049, '10px');    // 10*1.049 = 10.49
  31     message += checkLineHeight("10px", 0, '0px');         // 10*0 = 0
  32     message += checkLineHeight("10px", 1, '10px');        // 10*1.00 = 10.00
  33
  34     if (message != "")
  35         document.getElementById("results").innerHTML = "Test failed:<br>" + message;
  36     else
  37         document.getElementById("results").innerHTML = "Test passed.";
  38
  39     document.getElementById('testElement').innerHTML = "";
  40 }
  41
  42 </script>
  43 </head>
  44 <body onload="test()">
  45     <p>This tests non-integer line height is rounded to the nearest integer.</p>
  46     <p id='testElement'>test data</p>
  47     <div id='results'></div>
  48 </body>
  49 </html>