frac-parameters-3.html (6823B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Fraction/Stack parameters (fallback)</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <meta name="assert" content="Element mfrac correctly uses the fraction fallback parameters."> 8 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="/mathml/support/feature-detection.js"></script> 12 <script src="/mathml/support/fonts.js"></script> 13 <style> 14 /* Testing fallback values is tricky as we don't have a lot of flexibility to 15 make sure one parameter is not shadowed by another one. We also use the 16 Ahem font here, so can't really play with the fallback values involved. */ 17 math, mspace { 18 font-size: 200px; /* Large value because underlineThickness is small */ 19 } 20 math { 21 /* OS/2.sxHeight = 800 */ 22 /* post.underlineThickness == 20 */ 23 font-family: Ahem; 24 } 25 </style> 26 <script> 27 const emToPx = 200 / 1000; // font-size: 200px, font.em = 1000 28 const epsilon = 1; 29 const xHeight = 800; 30 const underlineThickness = 20; 31 32 // NB: This test assumes the fallback shifts are all equal to zero. 33 const axisHeight = xHeight / 2; 34 const fractionRuleThickness = underlineThickness; 35 const fractionNumeratorGapMin = underlineThickness; 36 const fractionDenominatorGapMin = underlineThickness; 37 const fractionNumeratorDisplayStyleGapMin = 3 * underlineThickness; 38 const fractionDenominatorDisplayStyleGapMin = 3 * underlineThickness; 39 const stackGapMin = 3 * underlineThickness; 40 const stackDisplayStyleGapMin = 7 * underlineThickness; 41 42 function getBox(aId) { 43 return document.getElementById(aId).getBoundingClientRect(); 44 } 45 46 setup({ explicit_done: true }); 47 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 48 49 function runTests() { 50 test(function() { 51 assert_true(MathMLFeatureDetection.has_mspace()); 52 assert_approx_equals(axisHeight * emToPx, 53 (getBox("ref0001").top - 54 getBox("num0001").bottom) - 55 (fractionRuleThickness/2 + 56 fractionNumeratorGapMin) * emToPx, 57 epsilon); 58 assert_approx_equals((getBox("den0002").top - 59 getBox("num0002").bottom), 60 (fractionNumeratorGapMin + 61 fractionRuleThickness + 62 fractionDenominatorGapMin) * emToPx, 63 epsilon); 64 }, "nonzero linethickness, displaystyle=false"); 65 66 test(function() { 67 assert_true(MathMLFeatureDetection.has_mspace()); 68 assert_approx_equals(axisHeight * emToPx, 69 (getBox("ref0003").top - 70 getBox("num0003").bottom) - 71 (fractionRuleThickness/2 + 72 fractionNumeratorDisplayStyleGapMin) * emToPx, 73 epsilon, "mfrac: thickness, axis height"); 74 assert_approx_equals((getBox("den0004").top - 75 getBox("num0004").bottom), 76 (fractionNumeratorDisplayStyleGapMin + 77 fractionRuleThickness + 78 fractionDenominatorDisplayStyleGapMin) * emToPx, 79 epsilon); 80 }, "nonzero linethickness, displaystyle=true"); 81 82 test(function() { 83 assert_true(MathMLFeatureDetection.has_mspace()); 84 assert_approx_equals((getBox("ref1001").top - 85 getBox("num1001").bottom), 86 stackGapMin/2 * emToPx, 87 epsilon); 88 assert_approx_equals((getBox("den1001").top) - 89 getBox("ref1001").top, 90 stackGapMin/2 * emToPx, 91 epsilon); 92 }, "linethickness=0, displaystyle=false"); 93 94 test(function() { 95 assert_true(MathMLFeatureDetection.has_mspace()); 96 assert_approx_equals((getBox("ref1002").top - 97 getBox("num1002").bottom), 98 stackDisplayStyleGapMin/2 * emToPx, 99 epsilon); 100 assert_approx_equals((getBox("den1002").top) - 101 getBox("ref1002").top, 102 stackDisplayStyleGapMin/2 * emToPx, 103 epsilon); 104 }, "linethickness=0, displaystyle=true"); 105 106 done(); 107 } 108 </script> 109 </head> 110 <body> 111 <div id="log"></div> 112 <p> 113 <math> 114 <mspace id="ref0001" height="0em" depth="1em" width="1em" style="background: green"/> 115 <mfrac> 116 <mspace width="1em" height="2em" depth="0em" id="num0001" style="background: blue"/> 117 <mspace width="1em" height="0em" depth="2em" id="den0001" style="background: purple"/> 118 </mfrac> 119 </math> 120 </p> 121 <p> 122 <math> 123 <mfrac> 124 <mspace width="1em" height="2em" depth="4em" id="num0002" style="background: blue"/> 125 <mspace width="1em" height="4em" depth="2em" id="den0002" style="background: purple"/> 126 </mfrac> 127 </math> 128 </p> 129 <hr/> 130 <p> 131 <math displaystyle="true"> 132 <mspace id="ref0003" height="0em" depth="1em" width="1em" style="background: green"/> 133 <mfrac> 134 <mspace width="1em" height="2em" depth="0em" id="num0003" style="background: blue"/> 135 <mspace width="1em" height="0em" depth="2em" id="den0003" style="background: purple"/> 136 </mfrac> 137 </math> 138 </p> 139 <p> 140 <math displaystyle="true"> 141 <mfrac> 142 <mspace width="1em" height="2em" depth="4em" id="num0004" style="background: blue"/> 143 <mspace width="1em" height="4em" depth="2em" id="den0004" style="background: purple"/> 144 </mfrac> 145 </math> 146 </p> 147 <hr/> 148 <p> 149 <math> 150 <mspace id="ref1001" height="0em" depth="1em" width="1em" style="background: green"/> 151 <mfrac linethickness="0"> 152 <mspace width="1em" height="2em" depth="0em" id="num1001" style="background: blue"/> 153 <mspace width="1em" height="0em" depth="2em" id="den1001" style="background: purple"/> 154 </mfrac> 155 </math> 156 </p> 157 <hr/> 158 <p> 159 <math displaystyle="true"> 160 <mspace id="ref1002" height="0em" depth="1em" width="1em" style="background: green"/> 161 <mfrac linethickness="0"> 162 <mspace width="1em" height="2em" depth="0em" id="num1002" style="background: blue"/> 163 <mspace width="1em" height="0em" depth="2em" id="den1002" style="background: purple"/> 164 </mfrac> 165 </math> 166 </p> 167 </body> 168 </html>