tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

inline-level.html (1204B)

      1 <!doctype html>
      2 <title>button with inline-level display</title>
      3 <link rel=match href=inline-level-ref.html>
      4 <style>
      5 button, input { font: inherit }
      6 .inline { display: inline }
      7 .inline-block { display: inline-block }
      8 .inline-table { display: inline-table }
      9 </style>
     10 <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>
     11 <p>a<button class=inline>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p>
     12 <p>a<button class=inline-block>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p>
     13 <p>a<button class=inline-table>1<br><span class=check-baseline>2</span></button><span class=ref-baseline>b</span></p>
     14 <p>a<input type=button class=inline-table value="1&#10;2">b</p>
     15 <script>
     16 const spans = document.querySelectorAll('.check-baseline');
     17 for (const span of [].slice.call(spans)) {
     18  const baseline = span.offsetTop + span.offsetHeight;
     19  const refSpan = span.parentNode.nextSibling;
     20  const refBaseline = refSpan.offsetTop + refSpan.offsetHeight;
     21  if (baseline !== refBaseline) {
     22    refSpan.textContent += " (wrong baseline)";
     23  }
     24 }
     25 </script>