frac-1.html (7940B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Fraction</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-nonzero-line-thickness"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#fraction-with-zero-line-thickness"> 9 <meta name="assert" content="Verify fraction metrics for different sizes of numerator and denominator."> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/mathml/support/feature-detection.js"></script> 13 <script src="/mathml/support/fonts.js"></script> 14 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 15 <style> 16 math, mspace { 17 /* OS/2.sxHeight = 800 */ 18 /* post.underlineThickness == 20 */ 19 font-family: Ahem; 20 font-size: 10px; 21 } 22 div.shrink-wrap { 23 background: yellow; 24 display: inline-block; 25 margin-top: 5px; 26 padding-top: 5px; 27 } 28 </style> 29 <script> 30 const xHeight = 800; 31 const underlineThickness = 800; 32 const emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 33 34 function getBox(aId) { 35 var box = document.getElementById(aId).getBoundingClientRect(); 36 box.middle = (box.bottom + box.top) / 2; 37 box.center = (box.left + box.right) / 2; 38 return box; 39 } 40 41 setup({ explicit_done: true }); 42 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 43 44 function runTests() { 45 test(function() { 46 assert_true(MathMLFeatureDetection.has_mspace()); 47 48 var e = 4; 49 var mathAxis = getBox("baseline").top - (xHeight/2) * emToPx; 50 for (var i = 0; i <= 4; i++) { 51 var frac = getBox("frac" + i); 52 var num = getBox("frac" + i + "num"); 53 var den = getBox("frac" + i + "den"); 54 // To estimate the fraction axis, we calculate barycenter between the 55 // top and bottom of the fraction, using the heights of numerator and 56 // denominator as weights. 57 var fracAxis = (frac.top * den.height + frac.bottom * num.height) / (num.height + den.height); 58 assert_approx_equals(fracAxis, mathAxis, e, "frac" + i + " fraction bar"); 59 } 60 }, "Fraction axis is aligned on the math axis"); 61 62 test(function() { 63 assert_true(MathMLFeatureDetection.has_mspace()); 64 65 for (var i = 0; i < 10; i++) { 66 assert_less_than_equal(getBox("frac" + i + "num").bottom, getBox("frac" + i + "den").top, "numerator is above denominator"); 67 assert_less_than(getBox("frac" + i + "den").top - getBox("frac" + i + "num").bottom, 5, "The gap between numerator and denominator is not too large"); 68 } 69 }, "Vertical positions of numerator and denominator"); 70 71 test(function() { 72 assert_true(MathMLFeatureDetection.has_mspace()); 73 74 var e = 3; 75 for (var i = 0; i < 10; i++) 76 assert_approx_equals(getBox("frac" + i + "num").center, getBox("frac" + i + "den").center, e, "numerator and denominator are horizontally centered"); 77 }, "Horizontal alignments of numerator and denominator"); 78 79 test(function() { 80 assert_true(MathMLFeatureDetection.has_mspace()); 81 82 var e = 5; 83 for (var i = 0; i < 10; i++) { 84 var frac = getBox("frac" + i); 85 var num = getBox("frac" + i + "num"); 86 var den = getBox("frac" + i + "den"); 87 assert_approx_equals(frac.height, den.bottom - num.top, e, "height of frac " + i + " is determined by the bottom/top sides of the denominator/numerator"); 88 assert_approx_equals(frac.width, Math.max(num.right, den.right) - Math.min(num.left, den.left), e, "width of frac " + i + " is determined by the left/right sides of the denominator/numerator (plus some spacing)"); 89 } 90 }, "Dimension of mfrac elements"); 91 92 test(function() { 93 assert_true(MathMLFeatureDetection.has_mspace()); 94 assert_true(MathMLFeatureDetection.has_mfrac()); 95 96 Array.from(document.getElementsByClassName("shrink-wrap")).forEach((container) => { 97 var marginPx = 2; // By default fractions have 1px margin on each side. 98 var epsilon = 1; 99 var containerWidth = container.getBoundingClientRect().width; 100 var children = container.getElementsByTagName("mspace"); 101 var numWidth = children[0].getBoundingClientRect().width; 102 var denWidth = children[1].getBoundingClientRect().width; 103 assert_approx_equals(containerWidth, marginPx + Math.max(numWidth, denWidth), epsilon, "Should be the maximum preferred width of numerator/denominator."); 104 }); 105 }, "Preferred width of mfrac elements"); 106 107 done(); 108 } 109 </script> 110 </head> 111 <body> 112 <div id="log"></div> 113 <p> 114 <math> 115 <mspace id="baseline" width="1em" height="0em" depth="1em" style="background: black"/> 116 <mfrac id="frac0"> 117 <mspace id="frac0num" width="15px" height="15px" style="background: blue"/> 118 <mspace id="frac0den" width="15px" height="15px" style="background: green"/> 119 </mfrac> 120 <mfrac id="frac1"> 121 <mspace id="frac1num" width="30px" height="15px" style="background: blue"/> 122 <mspace id="frac1den" width="15px" height="15px" style="background: green"/> 123 </mfrac> 124 <mfrac id="frac2"> 125 <mspace id="frac2num" width="15px" height="15px" style="background: blue"/> 126 <mspace id="frac2den" width="30px" height="15px" style="background: green"/> 127 </mfrac> 128 <mfrac id="frac3"> 129 <mspace id="frac3num" width="15px" height="30px" style="background: blue"/> 130 <mspace id="frac3den" width="15px" height="15px" style="background: green"/> 131 </mfrac> 132 <mfrac id="frac4"> 133 <mspace id="frac4num" width="15px" height="15px" style="background: blue"/> 134 <mspace id="frac4den" width="15px" height="30px" style="background: green"/> 135 </mfrac> 136 <mfrac id="frac5" linethickness="0px"> 137 <mspace id="frac5num" width="15px" height="15px" style="background: blue"/> 138 <mspace id="frac5den" width="15px" height="15px" style="background: green"/> 139 </mfrac> 140 <mfrac id="frac6" linethickness="0px"> 141 <mspace id="frac6num" width="30px" height="15px" style="background: blue"/> 142 <mspace id="frac6den" width="15px" height="15px" style="background: green"/> 143 </mfrac> 144 <mfrac id="frac7" linethickness="0px"> 145 <mspace id="frac7num" width="15px" height="15px" style="background: blue"/> 146 <mspace id="frac7den" width="30px" height="15px" style="background: green"/> 147 </mfrac> 148 <mfrac id="frac8" linethickness="0px"> 149 <mspace id="frac8num" width="15px" height="30px" style="background: blue"/> 150 <mspace id="frac8den" width="15px" height="15px" style="background: green"/> 151 </mfrac> 152 <mfrac id="frac9" linethickness="0px"> 153 <mspace id="frac9num" width="15px" height="15px" style="background: blue"/> 154 <mspace id="frac9den" width="15px" height="30px" style="background: green"/> 155 </mfrac> 156 </math> 157 </p> 158 <div class="shrink-wrap"> 159 <math> 160 <mfrac> 161 <mspace width="30px" height="15px" style="background: blue"/> 162 <mspace width="15px" height="15px" style="background: green"/> 163 </mfrac> 164 </math> 165 </div> 166 <div class="shrink-wrap"> 167 <math> 168 <mfrac> 169 <mspace width="15px" height="15px" style="background: blue"/> 170 <mspace width="30px" height="15px" style="background: green"/> 171 </mfrac> 172 </math> 173 </div> 174 <div class="shrink-wrap"> 175 <math> 176 <mfrac linethickness="0px"> 177 <mspace width="30px" height="15px" style="background: blue"/> 178 <mspace width="15px" height="15px" style="background: green"/> 179 </mfrac> 180 </math> 181 </div> 182 <div class="shrink-wrap"> 183 <math> 184 <mfrac linethickness="0px"> 185 <mspace width="15px" height="15px" style="background: blue"/> 186 <mspace width="30px" height="15px" style="background: green"/> 187 </mfrac> 188 </math> 189 </div> 190 </body> 191 </html>