third_party/WebKit/LayoutTests/css3/calc/line-height.html

   1 <!DOCTYPE html>
   2 <script src="../../resources/js-test.js"></script>
   3 <style>
   4     span { font-size: 16px; }
   5     #control { line-height: 200%; }
   6     #calc-percent { line-height: calc(100% * 2); }
   7     #calc-percent-pixels { line-height: calc(100% + 16px); }
   8     #calc-percent-ems { line-height: calc(100% + 1em); }
   9 </style>
  10 <div id="test-container">
  11     <span id="control">The line height of these lines should be identical</span><hr/>
  12     <span id="calc-percent">The line height of these lines should be identical</span><hr/>
  13     <span id="calc-percent-pixels">The line height of these lines should be identical</span><hr/>
  14     <span id="calc-percent-ems">The line height of these lines should be identical</span><hr/>
  15 </div>
  16 <script>
  17     description("Tests that CSS3 calc() can be used for the line-height property");
  18
  19     shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
  20     shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-pixels"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
  21     shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-ems"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
  22
  23     document.body.style.zoom = 1.75;
  24
  25     shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
  26     shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-pixels"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
  27     shouldEvaluateTo('getComputedStyle(document.getElementById("calc-percent-ems"), null).lineHeight', 'getComputedStyle(document.getElementById("control"), null).lineHeight');
  28
  29     if (window.testRunner) {
  30         var testContainer = document.getElementById("test-container");
  31         if (testContainer)
  32             document.body.removeChild(testContainer);
  33     }
  34 </script>