third_party/WebKit/LayoutTests/fast/css/line-height-zoom-get-computed-style.html

   1 <!DOCTYPE html>
   2 <html>
   3 <script>
   4 if (window.testRunner) {
   5     testRunner.dumpAsText();
   6     testRunner.setCanOpenWindows();
   7     testRunner.waitUntilDone();
   8 }
   9
  10 function log(message)
  11 {
  12     var console = document.getElementById("console");
  13     console.appendChild(document.createTextNode(message + "\n"));
  14 }
  15 function zoomPage()
  16 {
  17     var el = document.getElementById('test');
  18
  19     if (window.eventSender) {
  20         var count=0;
  21         while(count <10) {
  22             eventSender.zoomPageIn();
  23             var num = parseFloat(document.defaultView.getComputedStyle(el, null).getPropertyValue('line-height'));
  24             log("Line height at zoom level" + (count) + " : " + num.toFixed(2));
  25             ++count;
  26             if (count == 10)
  27                 testRunner.notifyDone();
  28         }
  29     } else {
  30         var num = parseFloat(document.defaultView.getComputedStyle(el, null).getPropertyValue('line-height'));
  31         log("Line height is" + " : " + num.toFixed(2));
  32     }
  33 }
  34
  35 </script>
  36 <head>
  37 <style type="text/css">
  38 p {
  39 display: inline-block;
  40 background-color: #000;
  41 color: #fff;
  42 line-height: 120%;
  43 }
  44 p:hover {
  45 background-color: #fff;
  46 color: #000;
  47 }
  48 </style>
  49 </head>
  50 <body onload="zoomPage()">
  51 <p id="test">This tests that page zoom and getComputedStyle of line-height works well together.  This test requires testRunner to run.  To test manually, open this page in a browser window, and zoom in & reload for about 10 times. This text should get bigger at each step proportionately and the line-height should be constant.</p>
  52 <pre id="console"></pre>
  53 </body>
  54 </html>