Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /mathml/presentation-markup/fractions/frac-parameters-gap-003.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Fraction parameters (display gap between bar and numerator)</title>
<link rel="match" href="frac-parameters-gap-003-ref.html"/>
<meta name="assert" content="Element mfrac correctly uses the FractionNumDisplayStyleGapMin 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: numeratordisplaystylegapmin8000-rulethickness1000;
src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-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 src="/mathml/support/fonts.js"></script>
<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", () => { loadAllFonts().then(runTests); });
</script>
</head>
<body>
<p>
This test passes if the blue squares are aligned:
</p>
<p>
<math display="block" style="font-family: numeratordisplaystylegapmin8000-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 FractionNumDisplayStyleGapMin.
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>