frac-parameters-gap-006.html (3064B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Stack parameters (display gap between numerator and denominator)</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <link rel="match" href="frac-parameters-gap-006-ref.html"/> 8 <meta name="assert" content="Element mfrac with zero linethickness correctly uses the StackGapMin parameter from the MATH table when denominator contains text."> 9 <style> 10 math, mspace, mtext { 11 font-size: 20px; 12 } 13 mtext { 14 font-family: math-text; 15 color: blue; 16 } 17 @font-face { 18 font-family: gapmin8000; 19 src: url("/fonts/math/stack-gapmin8000.woff"); 20 } 21 @font-face { 22 /* 23 math-text has the following properties: 24 - typo/hhea/win metrics: 2.5em ascent and 2.5em descent. 25 - glyph A: .5em ascent and .5em descent. 26 - glyph B: 1em ascent and 0em descent. 27 - glyph C: 0em ascent and 1em descent. 28 */ 29 font-family: math-text; 30 src: url("/fonts/math/math-text.woff"); 31 } 32 #reference { 33 background: green; 34 } 35 #frame { 36 position: absolute; 37 border-top: 4px solid black; 38 border-bottom: 4px solid black; 39 width: 100%; 40 } 41 </style> 42 <script src="/mathml/support/fonts.js"></script> 43 <script> 44 function runTests() { 45 var div = document.getElementById("frame"); 46 var refBox = document.getElementById("reference").getBoundingClientRect(); 47 div.style.top = `${refBox.top-2}px`; 48 div.style.height = `${refBox.height-4}px`; 49 document.documentElement.classList.remove('reftest-wait'); 50 } 51 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 52 </script> 53 </head> 54 <body> 55 <p> 56 This test passes if the blue squares are aligned: 57 </p> 58 <p> 59 <math style="font-family: gapmin8000"> 60 <!-- This is a dummy mspace element to ensure that the font ascent/descent does not affect the size of the math element. --> 61 <mspace height="10em" depth="10em"/> 62 <!-- 63 The gap between the numerators/denominators and the math axis must StackGapMin / 2. 64 The gap should be calculated using the exact bounding box of the glyphs. 65 The numerator descent is .5em + the denominator ascent. 66 Hence glyphs A, B, C should be rendered at the same vertical position, even if they have different ascent/descent. 67 --> 68 <mfrac linethickness="0px"> 69 <mspace width="3em" depth="1em"/> 70 <mspace id="reference" width="3em" height=".5em" depth=".5em"/> 71 </mfrac> 72 <mfrac linethickness="0px"> 73 <mspace width="3em" depth="1em"/> 74 <mtext>A</mtext> 75 </mfrac> 76 <mfrac linethickness="0px"> 77 <mspace width="3em" depth="1.5em"/> 78 <mtext>B</mtext> 79 </mfrac> 80 <mfrac linethickness="0px"> 81 <mspace width="3em" depth=".5em"/> 82 <mtext>C</mtext> 83 </mfrac> 84 </math> 85 </p> 86 <div id="frame"></div> 87 <script src="/mathml/support/feature-detection.js"></script> 88 <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> 89 </body> 90 </html>