button-baseline-and-collapsing.html

<!DOCTYPE html>

<script>
  if (window.testRunner)
    testRunner.dumpAsText();
</script>
<style>
  #test, button {
    font: 10px Ahem;
  }
  button, span, input { -webkit-appearance: none; }
  #b1 { margin-bottom: 0; border-bottom: 0; padding-bottom: 0; }
  /* Give b3 a border-bottom that's the same as the descent of Ahem,
   * therefore, the bottom of b3 should be the same as the bottom of the span.
   */
  #b3 { margin-bottom: 0; border-bottom: 2px outset; padding-bottom: 0; }
</style>

<p>Tests correct button behavior with respect to collapsing and baseline: Empty
buttons have a baseline at the bottom of the content box; buttons with text are
aligned so that the text lines up. Also, empty buttons should collapse.</p>

<p>To understand this test, note that with the Ahem font, the bottom of the "X"
is 2px below the baseline (at a 10px font-size).</p>

<div id="test">
  <p><button id="b1"></button> <button id="b2"><span id="s2">X</span></button>
  <button id="b3"></button>
  <span id="s-ref">X</span></p>
</div>

<p id="out"></p>

<script>
  function output(msg) {
    var out = document.getElementById("out");
    out.innerHTML += msg;
  }

  function bottom(node) {
    // bottom of the border-box
    return node.offsetTop + node.offsetHeight;
  }

  function check_equal(i1, i2, msg) {
    if (i1 == i2) output("PASS<br>");
    else output("FAIL: " + i1 + " != " + i2 + ": " + msg + "<br>");
  }
  var b1 = document.getElementById("b1");
  var s2 = document.getElementById("s2");
  var sref = document.getElementById("s-ref");

  check_equal(bottom(b1), bottom(sref) - 2, "b1 bottom == span baseline");
  check_equal(bottom(s2), bottom(sref), "s2 bottom == span bottom");
  check_equal(bottom(b3), bottom(sref), "b3 bottom == span bottom");

  // Now check for collapsing
  var b1 = document.getElementById("b1");
  var s2 = document.getElementById("s2");
  if (b1.offsetHeight < s2.offsetHeight) output("PASS<br>");
  else output("FAIL: empty buttons should collapse (offsetHeight should be smaller than the text)<br>")
</script>
chromium/third_party/blink/web_tests/fast/forms/button/button-baseline-and-collapsing.html
