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-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>Fraction parameters (inline gap between bar and denominator)</title>
<link rel="match" href="frac-parameters-gap-002-ref.html"/>
<meta name="assert" content="Element mfrac correctly uses the FractionDenominatorGapMin 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: denominatorgapmin4000-rulethickness1000;
src: url("/fonts/math/fraction-denominatorgapmin4000-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 style="font-family: denominatorgapmin4000-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 FractionDenominatorGapMin.
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>
<script src="/mathml/support/feature-detection.js"></script>
<script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script>
</body>
</html>