frac-parameters-gap-003-ref.html (1780B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>Fraction parameters</title> 6 <style> 7 math, mspace { 8 font-size: 20px; 9 } 10 @font-face { 11 font-family: numeratordisplaystylegapmin8000-rulethickness1000; 12 src: url("/fonts/math/fraction-numeratordisplaystylegapmin8000-rulethickness1000.woff"); 13 } 14 #reference { 15 background: green; 16 } 17 #frame { 18 position: absolute; 19 border-top: 4px solid black; 20 border-bottom: 4px solid black; 21 width: 100%; 22 } 23 </style> 24 <script src="/mathml/support/fonts.js"></script> 25 <script> 26 function runTests() { 27 var div = document.getElementById("frame"); 28 var refBox = document.getElementById("reference").getBoundingClientRect(); 29 div.style.top = `${refBox.top-2}px`; 30 div.style.height = `${refBox.height-4}px`; 31 document.documentElement.classList.remove('reftest-wait'); 32 } 33 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 34 </script> 35 </head> 36 <body> 37 <p> 38 This test passes if the blue squares are aligned: 39 </p> 40 <p> 41 <math display="block" style="font-family: numeratordisplaystylegapmin8000-rulethickness1000;"> 42 <mspace height="20em" depth="2em"/> 43 <mfrac> 44 <mspace id="reference" width="3em" height=".5em" depth=".5em"/> 45 <mspace width="3em"/> 46 </mfrac> 47 <mfrac> 48 <mspace width="1em" depth=".5em" height=".5em" style="background: blue"/> 49 <mspace width="3em"/> 50 </mfrac> 51 <mfrac> 52 <mspace width="1em" height="1em" style="background: blue"/> 53 <mspace width="3em"/> 54 </mfrac> 55 <mfrac> 56 <mspace width="1em" depth="1em" style="background: blue"/> 57 <mspace width="3em"/> 58 </mfrac> 59 </math> 60 </p> 61 <div id="frame"></div> 62 </body> 63 </html>