| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <head> |
| <meta charset="utf-8"> |
| <title>Fraction parameters (display gap between bar and denominator)</title> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#fractions-mfrac"> |
| <link rel="match" href="frac-parameters-gap-001-ref.html"/> |
| <meta name="assert" content="Element mfrac correctly uses the FractionDenomDisplayStyleGapMin parameter from the MATH table when denominator contains text."> |
| <style> |
| math, mspace, mtext { |
| font-size: 20px; |
| } |
| mtext { |
| font-family: math-text; |
| color: blue; |
| } |
| @font-face { |
| font-family: denominatordisplaystylegapmin5000-rulethickness1000; |
| src: url("/fonts/math/fraction-denominatordisplaystylegapmin5000-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", function() { |
| // Delay the check to workaround WebKit's bug https://webkit.org/b/174030. |
| requestAnimationFrame(() => { document.fonts.ready.then(runTests); }); |
| }); |
| </script> |
| </head> |
| <body> |
| <p> |
| This test passes if the blue squares are aligned: |
| </p> |
| <p> |
| <math display="block" style="font-family: denominatordisplaystylegapmin5000-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="2em" depth="20em"/> |
| <!-- |
| All the fraction bars must be aligned. |
| The gap between the denominators and bar must be FractionDenomDisplayStyleGapMin. |
| 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 width="3em"/> |
| <mspace id="reference" width="3em" height=".5em" depth=".5em"/> |
| </mfrac> |
| <mfrac> |
| <mspace width="3em"/> |
| <mtext>A</mtext> |
| </mfrac> |
| <mfrac> |
| <mspace width="3em"/> |
| <mtext>B</mtext> |
| </mfrac> |
| <mfrac> |
| <mspace width="3em"/> |
| <mtext>C</mtext> |
| </mfrac> |
| </math> |
| </p> |
| <div id="frame"></div> |
| </body> |
| </html> |
