| <!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> |
