third_party/WebKit/LayoutTests/css3/calc/font-size-fractional.html

   1 <!DOCTYPE HTML>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4 body         {font-size: 12px;}
   5 #control     {font: normal 400 80%/2.5 sans-serif;}
   6 #calc-reduce {font: normal 400 calc(80%)/2.5 sans-serif;}
   7 </style>
   8
   9 <div id="test-container">
  10 <span id="control">The font size and line height of these lines should be identical</span>
  11 <hr/>
  12 <span class="fonttest" id="calc-reduce">The font size and line height of these lines should be identical</span>
  13 </div>
  14 <hr/>
  15
  16 <script>
  17 description("Tests that CSS3 calc() can be used with the font property using fractional sizes");
  18
  19 var spans = document.getElementsByClassName("fonttest");
  20 for (var i = 0; i < spans.length; ++i) {
  21     var current = spans[i];
  22     shouldBeEqualToString('getComputedStyle(document.getElementById("' + current.id + '"), null).lineHeight', getComputedStyle(document.getElementById("control"), null).lineHeight);
  23     shouldBeEqualToString('getComputedStyle(document.getElementById("' + current.id + '"), null).fontSize', getComputedStyle(document.getElementById("control"), null).fontSize);
  24 }
  25
  26 if (window.testRunner)
  27     document.body.removeChild(document.getElementById("test-container"));
  28 </script>