third_party/WebKit/LayoutTests/css3/calc/font-monospace.html

   1 <style>
   2 body     {font-size: 12px;}
   3 #control {font: italic small-caps 900 150%/2em monospace;}
   4 #calc    {font: italic small-caps 900 calc(150%)/2em monospace;}
   5 </style>
   6
   7 <div>
   8 <span id="control">The font size and line height of these lines should be identical</span>
   9 <hr/>
  10 <span id="calc">The font size and line height of these lines should be identical</span>
  11 </div>
  12 <hr/>
  13 <div id="results"></div>
  14
  15 <script>
  16 if (window.testRunner)
  17     testRunner.dumpAsText();
  18 var controlHeight = getComputedStyle(document.getElementById("control"), null).lineHeight;
  19 var controlSize = getComputedStyle(document.getElementById("control"), null).fontSize;
  20
  21 var spans = document.getElementsByTagName("span");
  22 var sameHeight = true;
  23 var sameSize = true;
  24 for (var i = 0; i < spans.length; ++i) {
  25     var current = spans[i];
  26     if (sameHeight)
  27         sameHeight = getComputedStyle(current, null).lineHeight == controlHeight;
  28     if (sameSize)
  29         sameSize = getComputedStyle(current, null).fontSize == controlSize;
  30 }
  31
  32 var results = document.getElementById("results");
  33 if (sameHeight && sameSize) {
  34     results.style.color = "green";
  35     results.innerHTML = "PASS";
  36 } else {
  37     results.style.color = "red";
  38     results.innerHTML = "FAIL";
  39     if (!sameHeight)
  40         results.innerHTML += "<p>Line heights do not match</p>";
  41     if (!sameSize)
  42         results.innerHTML += "<p>Font sizes do not match</p>";
  43 }
  44
  45 </script>