| <!doctype html> |
| <title>button with inline-level display</title> |
| <link rel=match href=inline-level-ref.html> |
| <style> |
| button, input { font: inherit } |
| .inline { display: inline } |
| .inline-block { display: inline-block } |
| .inline-table { display: inline-table } |
| </style> |
| <p>There should be three buttons below containing "1" and "2" on separate lines, and "a" and "b" before and after on the same baseline as the "2".</p> |
| <p>a<button class=inline>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p> |
| <p>a<button class=inline-block>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p> |
| <p>a<button class=inline-table>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p> |
| <p>a<input type=button class=inline-table value="1 2">b</p> |
| <script> |
| const spans = document.querySelectorAll('.check-baseline'); |
| for (const span of [].slice.call(spans)) { |
| const baseline = span.offsetTop + span.offsetHeight; |
| const refSpan = span.parentNode.nextSibling; |
| const refBaseline = refSpan.offsetTop + refSpan.offsetHeight; |
| if (baseline !== refBaseline) { |
| refSpan.textContent += " (wrong baseline)"; |
| } |
| } |
| </script> |
