<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Fraction parameters (inline gap between bar and numerator)</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac">
<link rel="match" href="frac-parameters-gap-004-ref.html"/>
<meta name="assert" content="Element mfrac correctly uses the FractionNumeratorGapMin parameter from the MATH table when numerator contains text.">
<style>
  math, mspace, mtext {
    font-size: 20px;
  }
  mtext {
    font-family: math-text;
    color: blue;
  }
  @font-face {
    font-family: numeratorgapmin9000-rulethickness1000;
    src: url("/fonts/math/fraction-numeratorgapmin9000-rulethickness1000.woff");
  }
  @font-face {
    /*
      math-text has the following properties:
      - typo/hhea/win metrics: 2.5em ascent and 2.5em descent.
      - glyph A: .5em ascent and .5em descent.
      - glyph B: 1em ascent and 0em descent.
      - glyph C: 0em ascent and 1em descent.
     */
    font-family: math-text;
    src: url("/fonts/math/math-text.woff");
  }
  #reference {
    background: green;
  }
  #frame {
    position: absolute;
    border-top: 4px solid black;
    border-bottom: 4px solid black;
    width: 100%;
  }
</style>
<script>
  function runTests() {
    var div = document.getElementById("frame");
    var refBox = document.getElementById("reference").getBoundingClientRect();
    div.style.top = `${refBox.top-2}px`;
    div.style.height = `${refBox.height-4}px`;
    document.documentElement.classList.remove('reftest-wait');
  }
  window.addEventListener("load", () => { document.fonts.ready.then(runTests); });
</script>
</head>
<body>
  <p>
    This test passes if the blue squares are aligned:
  </p>
  <p>
    <math style="font-family: numeratorgapmin9000-rulethickness1000;">
      <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. -->
      <mspace height="20em" depth="2em"/>
      <!--
           All the fraction bars must be aligned.
           The gap between the numerators and bar must be FractionNumeratorGapMin.
           The gap should be calculated using the exact bounding box of the glyphs.
           Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent.
        -->
      <mfrac>
        <mspace id="reference" width="3em" height=".5em" depth=".5em"/>
        <mspace width="3em"/>
      </mfrac>
      <mfrac>
        <mtext>A</mtext>
        <mspace width="3em"/>
      </mfrac>
      <mfrac>
        <mtext>B</mtext>
        <mspace width="3em"/>
      </mfrac>
      <mfrac>
        <mtext>C</mtext>
        <mspace width="3em"/>
      </mfrac>
    </math>
  </p>
  <div id="frame"></div>
  <script src="/mathml/support/feature-detection.js"></script>
  <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
</body>
</html>