frac-bar-001.html (1917B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <meta charset="utf-8"> 5 <title>fractions bar</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <meta name="assert" content="Verifies painting of the fraction bar"> 8 <link rel="match" href="frac-bar-001-ref.html"> 9 <style type="text/css"> 10 @font-face { 11 font-family: TestFont; 12 src: url("/fonts/math/fraction-rulethickness10000.woff"); 13 } 14 math { 15 /* FractionRuleThickness = 10000 * 1 / 1000 = 10px; */ 16 /* The gap / shift / axisheight parameters are set to 0. */ 17 font-family: "TestFont"; 18 font-size: 1px; 19 } 20 #container { 21 position: absolute; 22 left: 0; 23 top: 0; 24 } 25 </style> 26 <script src="/common/reftest-wait.js"></script> 27 <script src="/mathml/support/fonts.js"></script> 28 <script> 29 window.addEventListener("load", () => { loadAllFonts().then(adjustPositionOfFraction); }); 30 31 function adjustPositionOfFraction() 32 { 33 requestAnimationFrame(() => { 34 var container = document.getElementById("container"); 35 var numeratorBox = document.getElementById("numerator").getBoundingClientRect(); 36 container.style.left = (10 - numeratorBox.left) + "px"; 37 container.style.top = (50 - numeratorBox.top) + "px"; 38 requestAnimationFrame(takeScreenshot); 39 }); 40 } 41 </script> 42 </head> 43 <body> 44 <p>This test passes if you see a green square.</p> 45 <div id="container"> 46 <math> 47 <mfrac style="color: green; font-size: 15em"> 48 <mspace id="numerator" width="150px"></mspace> 49 <mspace></mspace> 50 </mfrac> 51 </math> 52 </div> 53 <script src="/mathml/support/feature-detection.js"></script> 54 <script>MathMLFeatureDetection.ensure_for_match_reftest("has_mfrac");</script> 55 </body> 56 </html>