third_party/WebKit/LayoutTests/fast/forms/button-baseline-and-collapsing.html

   1 <!DOCTYPE html>
   2
   3 <script>
   4   if (window.testRunner)
   5     testRunner.dumpAsText();
   6 </script>
   7 <style>
   8   #test, button {
   9     font: 10px Ahem;
  10   }
  11   button, span, input { -webkit-appearance: none; }
  12   #b1 { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
  13   /* Give b3 a border-bottom that's the same as the descent of Ahem,
  14    * therefore, the bottom of b3 should be the same as the bottom of the span.
  15    */
  16   #b3 { margin-bottom: 0; border-bottom: 2px outset; padding-bottom: 0; }
  17 </style>
  18
  19 <p>Tests correct button behavior with respect to collapsing and baseline: Empty
  20 buttons have a baseline at the bottom of the content box; buttons with text are
  21 aligned so that the text lines up. Also, empty buttons should collapse.</p>
  22
  23 <p>To understand this test, note that with the Ahem font, the bottom of the "X"
  24 is 2px below the baseline (at a 10px font-size).</p>
  25
  26 <div id="test">
  27   <p><button id="b1"></button> <button id="b2"><span id="s2">X</span></button>
  28   <button id="b3"></button>
  29   <span id="s-ref">X</span></p>
  30 </div>
  31
  32 <p id="out"></p>
  33
  34 <script>
  35   function output(msg) {
  36     var out = document.getElementById("out");
  37     out.innerHTML += msg;
  38   }
  39
  40   function bottom(node) {
  41     // bottom of the border-box
  42     return node.offsetTop + node.offsetHeight;
  43   }
  44
  45   function check_equal(i1, i2, msg) {
  46     if (i1 == i2) output("PASS<br>");
  47     else output("FAIL: " + i1 + " != " + i2 + ": " + msg + "<br>");
  48   }
  49   var b1 = document.getElementById("b1");
  50   var s2 = document.getElementById("s2");
  51   var sref = document.getElementById("s-ref");
  52
  53   check_equal(bottom(b1), bottom(sref) - 2, "b1 bottom == span baseline");
  54   check_equal(bottom(s2), bottom(sref), "s2 bottom == span bottom");
  55   check_equal(bottom(b3), bottom(sref), "b3 bottom == span bottom");
  56
  57   // Now check for collapsing
  58   var b1 = document.getElementById("b1");
  59   var s2 = document.getElementById("s2");
  60   if (b1.offsetHeight < s2.offsetHeight) output("PASS<br>");
  61   else output("FAIL: empty buttons should collapse (offsetHeight should be smaller than the text)<br>")
  62 </script>