third_party/WebKit/LayoutTests/fast/css/button-height.html

   1 <html>
   2 <head>
   3 <script src="../../resources/js-test.js"></script>
   4 <style>
   5 #button3, #button5 { height: 40px; }
   6 #button4 { height: 40px; background-color: yellow; }
   7 </style>
   8 <script>
   9 if (window.testRunner)
  10     testRunner.dumpAsText();
  11
  12 window.onload = function()
  13 {
  14     shouldBe("document.getElementById('button1').offsetHeight", "document.getElementById('button2').offsetHeight");
  15     shouldEvaluateTo("document.getElementById('button3').offsetHeight", 40);
  16     shouldEvaluateTo("document.getElementById('button4').offsetHeight", 40);
  17
  18     // Note, the expected height is the height of button 1 for the Mac ports, and 40 otherwise.
  19     var expectedButton5Height = (navigator.platform.indexOf("Mac") !== -1) ? document.getElementById("button1").offsetHeight : 40;
  20     if (document.getElementById('button5').offsetHeight == expectedButton5Height)
  21         testPassed("document.getElementById('button5').offsetHeight is correct for this platform.");
  22     else
  23         testFailed("document.getElementById('button5').offsetHeight is incorrect for this platform. Should be the same height as button 1 for the Mac ports and 40 otherwise.");
  24
  25     if (window.testRunner) {
  26         var testContainer = document.getElementById("test-container");
  27         if (testContainer)
  28             document.body.removeChild(testContainer);
  29     }
  30     debug('<br /><span class="pass">TEST COMPLETE</span>');
  31 }
  32 </script>
  33 </head>
  34 <body>
  35 <p id="description"></p>
  36 <div id="test-container">
  37     <ol>
  38         <li><input id="button1" type="button" value="unspecified height"/><p><strong>Expected height:</strong> height of button label font.</p></li>
  39         <li><button id="button2">unspecified height</button><p><strong>Expected height:</strong> height of button label font.</p></li>
  40         <li><button id="button3">height 40 pixels</button><p><strong>Expected height:</strong> 40 pixels.</p></li>
  41         <li><input id="button4" type="button" value="height 40 pixels, background yellow"/><p><strong>Expected height:</strong> 40 pixels.</p></li>
  42         <li><input id="button5" type="button" value="height 40 pixels (*)"/><p><strong>(*) Expected height:</strong><br/>Mac: height of button label font.<br/>Other: 40 pixels.</p></li>
  43     </ol>
  44 </div>
  45 <hr/>
  46 <div id="console"></div>
  47 <script>
  48     description("This tests that the specified height is honored (*) for &lt;input&gt; and &lt;button&gt; elements.<br/>" +
  49                 "(*) The Mac ports ignore the specified height for &lt;input type=&quot;button&quot;&gt; elements unless a " +
  50                 "border and/or background CSS property is also specified (see the fifth button below). Disregarding " +
  51                 "padding, they render the button with a height equal to the height of the font used for the button label.");
  52 </script>
  53 </body>
  54 </html>