frac-parameters-2.html (10078B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Stack parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 7 <meta name="assert" content="Element mfrac correctly uses the stack parameters from the MATH table."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="/mathml/support/feature-detection.js"></script> 11 <script src="/mathml/support/fonts.js"></script> 12 <style> 13 math, mspace { 14 font-size: 10px; 15 } 16 @font-face { 17 font-family: bottomdisplaystyleshiftdown5000-axisheight1000; 18 src: url("/fonts/math/stack-bottomdisplaystyleshiftdown5000-axisheight1000.woff"); 19 } 20 @font-face { 21 font-family: bottomshiftdown6000-axisheight1000; 22 src: url("/fonts/math/stack-bottomshiftdown6000-axisheight1000.woff"); 23 } 24 @font-face { 25 font-family: displaystylegapmin4000; 26 src: url("/fonts/math/stack-displaystylegapmin4000.woff"); 27 } 28 @font-face { 29 font-family: gapmin8000; 30 src: url("/fonts/math/stack-gapmin8000.woff"); 31 } 32 @font-face { 33 font-family: topdisplaystyleshiftup3000-axisheight1000; 34 src: url("/fonts/math/stack-topdisplaystyleshiftup3000-axisheight1000.woff"); 35 } 36 @font-face { 37 font-family: topshiftup9000-axisheight1000; 38 src: url("/fonts/math/stack-topshiftup9000-axisheight1000.woff"); 39 } 40 </style> 41 <script> 42 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 43 var epsilon = 1; 44 45 function getBox(aId) { 46 return document.getElementById(aId).getBoundingClientRect(); 47 } 48 49 setup({ explicit_done: true }); 50 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 51 52 function runTests() { 53 54 test(function() { 55 assert_true(MathMLFeatureDetection.has_mspace()); 56 57 var v = 5000 * emToPx; 58 assert_approx_equals(getBox("den0002").top - getBox("ref0002").bottom, 59 v, epsilon, "mfrac: denominator shift"); 60 }, "BottomDisplayStyleShiftDown"); 61 62 test(function() { 63 assert_true(MathMLFeatureDetection.has_mspace()); 64 65 var v = 5000 * emToPx; 66 assert_approx_equals(getBox("den0002b").top - getBox("ref0002b").bottom, 67 v, epsilon, "mfrac: denominator shift"); 68 }, "BottomDisplayStyleShiftDown Displaystyle"); 69 70 test(function() { 71 assert_true(MathMLFeatureDetection.has_mspace()); 72 73 var v = 5000 * emToPx; 74 assert_approx_equals(getBox("den0002c").top - getBox("ref0002c").bottom, 75 v, epsilon, "mfrac: denominator shift"); 76 }, "BottomDisplayStyleShiftDown Displaystyle om fraction"); 77 78 test(function() { 79 assert_true(MathMLFeatureDetection.has_mspace()); 80 81 var v = 6000 * emToPx; 82 assert_approx_equals(getBox("den0003").top - getBox("ref0003").bottom, 83 v, epsilon, "mfrac: denominator shift"); 84 }, "BottomShiftDown"); 85 86 test(function() { 87 assert_true(MathMLFeatureDetection.has_mspace()); 88 89 var v = 4000 * emToPx; 90 assert_approx_equals(getBox("den0004").top - getBox("num0004").bottom, 91 v, epsilon, "mfrac: gap"); 92 }, "DisplayStyleGapMin"); 93 94 test(function() { 95 assert_true(MathMLFeatureDetection.has_mspace()); 96 97 var v = 4000 * emToPx; 98 assert_approx_equals(getBox("den0004b").top - getBox("num0004b").bottom, 99 v, epsilon, "mfrac: gap"); 100 }, "DisplayStyleGapMin Dsiplaystyle"); 101 102 test(function() { 103 assert_true(MathMLFeatureDetection.has_mspace()); 104 105 var v = 4000 * emToPx; 106 assert_approx_equals(getBox("den0004c").top - getBox("num0004c").bottom, 107 v, epsilon, "mfrac: gap"); 108 }, "DisplayStyleGapMin Dsiplaystyle on fraction"); 109 110 test(function() { 111 assert_true(MathMLFeatureDetection.has_mspace()); 112 113 var v = 8000 * emToPx; 114 assert_approx_equals(getBox("den0005").top - getBox("num0005").bottom, 115 v, epsilon, "mfrac: gap"); 116 }, "GapMin"); 117 118 test(function() { 119 assert_true(MathMLFeatureDetection.has_mspace()); 120 121 var v = 3000 * emToPx; 122 assert_approx_equals(getBox("ref0006").top - getBox("num0006").bottom, 123 v, epsilon, "mfrac: numerator shift"); 124 }, "TopDisplayStyleShiftUp"); 125 126 test(function() { 127 assert_true(MathMLFeatureDetection.has_mspace()); 128 129 var v = 3000 * emToPx; 130 assert_approx_equals(getBox("ref0006b").top - getBox("num0006b").bottom, 131 v, epsilon, "mfrac: numerator shift"); 132 }, "TopDisplayStyleShiftUp Displaystyle"); 133 134 test(function() { 135 assert_true(MathMLFeatureDetection.has_mspace()); 136 137 var v = 3000 * emToPx; 138 assert_approx_equals(getBox("ref0006c").top - getBox("num0006c").bottom, 139 v, epsilon, "mfrac: numerator shift"); 140 }, "TopDisplayStyleShiftUp Displaystyle on fraction"); 141 142 test(function() { 143 assert_true(MathMLFeatureDetection.has_mspace()); 144 145 var v = 9000 * emToPx; 146 assert_approx_equals(getBox("ref0007").top - getBox("num0007").bottom, 147 v, epsilon, "mfrac: numerator shift"); 148 }, "ToShiftUp"); 149 150 test(function() { 151 assert_true(MathMLFeatureDetection.has_mspace()); 152 153 var v = 9000 * emToPx; 154 assert_approx_equals(getBox("ref0007b").top - getBox("num0007b").bottom, 155 v, epsilon, "mfrac: numerator shift"); 156 }, "ToShiftUp with Displaystyle on fraction"); 157 158 done(); 159 } 160 </script> 161 </head> 162 <body> 163 <div id="log"></div> 164 <p> 165 <math display="block" style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;"> 166 <mspace id="ref0002" width="3em" height="1em" style="background: green"/> 167 <mfrac linethickness="0px"> 168 <mspace width="3em"/> 169 <mspace width="3em" depth="1em" id="den0002" style="background: blue"/> 170 </mfrac> 171 </math> 172 </p> 173 <hr/> 174 <p> 175 <math displaystyle="true" style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;"> 176 <mspace id="ref0002b" width="3em" height="1em" style="background: green"/> 177 <mfrac linethickness="0px"> 178 <mspace width="3em"/> 179 <mspace width="3em" depth="1em" id="den0002b" style="background: blue"/> 180 </mfrac> 181 </math> 182 </p> 183 <hr/> 184 <p> 185 <math style="font-family: bottomdisplaystyleshiftdown5000-axisheight1000;"> 186 <mspace id="ref0002c" width="3em" height="1em" style="background: green"/> 187 <mfrac displaystyle="true" linethickness="0px"> 188 <mspace width="3em"/> 189 <mspace width="3em" depth="1em" id="den0002c" style="background: blue"/> 190 </mfrac> 191 </math> 192 </p> 193 <hr/> 194 <p> 195 <math style="font-family: bottomshiftdown6000-axisheight1000;"> 196 <mspace id="ref0003" width="3em" height="1em" style="background: green"/> 197 <mfrac linethickness="0px"> 198 <mspace width="3em"/> 199 <mspace width="3em" depth="1em" id="den0003" style="background: blue"/> 200 </mfrac> 201 </math> 202 </p> 203 <hr/> 204 <p> 205 <math display="block" style="font-family: displaystylegapmin4000;"> 206 <mfrac linethickness="0px"> 207 <mspace width="3em" height="1em" id="num0004" style="background: blue"/> 208 <mspace width="3em" depth="1em" id="den0004" style="background: green"/> 209 </mfrac> 210 </math> 211 </p> 212 <hr/> 213 <p> 214 <math displaystyle="true" style="font-family: displaystylegapmin4000;"> 215 <mfrac linethickness="0px"> 216 <mspace width="3em" height="1em" id="num0004b" style="background: blue"/> 217 <mspace width="3em" depth="1em" id="den0004b" style="background: green"/> 218 </mfrac> 219 </math> 220 </p> 221 <hr/> 222 <p> 223 <math style="font-family: displaystylegapmin4000;"> 224 <mfrac displaystyle="true" linethickness="0px"> 225 <mspace width="3em" height="1em" id="num0004c" style="background: blue"/> 226 <mspace width="3em" depth="1em" id="den0004c" style="background: green"/> 227 </mfrac> 228 </math> 229 </p> 230 <hr/> 231 <p> 232 <math style="font-family: gapmin8000;"> 233 <mfrac linethickness="0px"> 234 <mspace width="3em" height="1em" id="num0005" style="background: blue"/> 235 <mspace width="3em" depth="1em" id="den0005" style="background: green"/> 236 </mfrac> 237 </math> 238 </p> 239 <hr/> 240 <p> 241 <math display="block" style="font-family: topdisplaystyleshiftup3000-axisheight1000;"> 242 <mspace id="ref0006" width="3em" depth="1em" style="background: green"/> 243 <mfrac linethickness="0px"> 244 <mspace width="3em" height="1em" id="num0006" style="background: blue"/> 245 <mspace width="3em"/> 246 </mfrac> 247 </math> 248 </p> 249 <hr/> 250 <p> 251 <math displaystyle="true" style="font-family: topdisplaystyleshiftup3000-axisheight1000;"> 252 <mspace id="ref0006b" width="3em" depth="1em" style="background: green"/> 253 <mfrac linethickness="0px"> 254 <mspace width="3em" height="1em" id="num0006b" style="background: blue"/> 255 <mspace width="3em"/> 256 </mfrac> 257 </math> 258 </p> 259 <hr/> 260 <p> 261 <math style="font-family: topdisplaystyleshiftup3000-axisheight1000;"> 262 <mspace id="ref0006c" width="3em" depth="1em" style="background: green"/> 263 <mfrac displaystyle="true" linethickness="0px"> 264 <mspace width="3em" height="1em" id="num0006c" style="background: blue"/> 265 <mspace width="3em"/> 266 </mfrac> 267 </math> 268 </p> 269 <hr/> 270 <p> 271 <math style="font-family: topshiftup9000-axisheight1000;"> 272 <mspace id="ref0007" width="3em" depth="1em" style="background: green"/> 273 <mfrac linethickness="0px"> 274 <mspace width="3em" height="1em" id="num0007" style="background: blue"/> 275 <mspace width="3em"/> 276 </mfrac> 277 </math> 278 </p> 279 <hr/> 280 <p> 281 <math displaystyle="true" style="font-family: topshiftup9000-axisheight1000;"> 282 <mspace id="ref0007b" width="3em" depth="1em" style="background: green"/> 283 <mfrac displaystyle="false" linethickness="0px"> 284 <mspace width="3em" height="1em" id="num0007b" style="background: blue"/> 285 <mspace width="3em"/> 286 </mfrac> 287 </math> 288 </p> 289 </body> 290 </html>