underover-parameters-1.html (5649B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Underscripts and Overscripts parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> 7 <meta name="assert" content="Elements munder, mover, munderover correctly use the limit 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, mo { 14 font-size: 10px; 15 } 16 @font-face { 17 font-family: lowerlimitbaselinedropmin3000; 18 src: url("/fonts/math/limits-lowerlimitbaselinedropmin3000.woff"); 19 } 20 @font-face { 21 font-family: lowerlimitgapmin11000; 22 src: url("/fonts/math/limits-lowerlimitgapmin11000.woff"); 23 } 24 @font-face { 25 font-family: upperlimitbaselinerisemin5000; 26 src: url("/fonts/math/limits-upperlimitbaselinerisemin5000.woff"); 27 } 28 @font-face { 29 font-family: upperlimitgapmin7000; 30 src: url("/fonts/math/limits-upperlimitgapmin7000.woff"); 31 } 32 </style> 33 <script> 34 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 35 var epsilon = 1; 36 37 function getBox(aId) { 38 return document.getElementById(aId).getBoundingClientRect(); 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 v = 3000 * emToPx; 49 assert_approx_equals(getBox("under00011").top - getBox("ref0001").bottom, 50 v, epsilon, "munder: under shift"); 51 assert_approx_equals(getBox("under00012").top - getBox("ref0001").bottom, 52 v, epsilon, "munderover: under shift"); 53 }, "LowerLimitBaselineDropMin"); 54 55 test(function() { 56 assert_true(MathMLFeatureDetection.has_mspace()); 57 58 var v = 11000 * emToPx; 59 assert_approx_equals(getBox("under00021").top - getBox("ref0002").bottom, 60 v, epsilon, "munder: under gap"); 61 assert_approx_equals(getBox("under00022").top - getBox("ref0002").bottom, 62 v, epsilon, "munderover: under gap"); 63 }, "LowerLimitGapMin"); 64 65 test(function() { 66 assert_true(MathMLFeatureDetection.has_mspace()); 67 68 var v = 5000 * emToPx; 69 assert_approx_equals(getBox("ref0003").top - getBox("over00031").bottom, 70 v, epsilon, "mover: over shift"); 71 assert_approx_equals(getBox("ref0003").top - getBox("over00032").bottom, 72 v, epsilon, "munderover: over shift"); 73 }, "UpperLimitBaselineRiseMin"); 74 75 test(function() { 76 assert_true(MathMLFeatureDetection.has_mspace()); 77 78 var v = 7000 * emToPx; 79 assert_approx_equals(getBox("ref0004").top - getBox("over00041").bottom, 80 v, epsilon, "mover: over shift"); 81 assert_approx_equals(getBox("ref0004").top - getBox("over00042").bottom, 82 v, epsilon, "munderover: over shift"); 83 }, "UpperLimitGapMin"); 84 85 done(); 86 } 87 </script> 88 </head> 89 <body> 90 <div id="log"></div> 91 <p> 92 <math style="font-family: lowerlimitbaselinedropmin3000;"> 93 <mspace id="ref0001" height="1em" width="3em" style="background: green"/> 94 <munder> 95 <mo movablelimits="false">∑</mo> 96 <mspace id="under00011" depth="1em" width="3em" style="background: blue"/> 97 </munder> 98 <munderover> 99 <mo movablelimits="false">∑</mo> 100 <mspace id="under00012" depth="1em" width="3em" style="background: blue"/> 101 <mspace height="1em" width="3em" style="background: black"/> 102 </munderover> 103 </math> 104 </p> 105 <hr/> 106 <p> 107 <math style="font-family: lowerlimitgapmin11000;"> 108 <mspace id="ref0002" height="1em" width="3em" style="background: green"/> 109 <munder> 110 <mo movablelimits="false">∑</mo> 111 <mspace id="under00021" depth="1em" width="3em" style="background: blue"/> 112 </munder> 113 <munderover> 114 <mo movablelimits="false">∑</mo> 115 <mspace id="under00022" depth="1em" width="3em" style="background: blue"/> 116 <mspace height="1em" width="3em" style="background: black"/> 117 </munderover> 118 </math> 119 </p> 120 <hr/> 121 <p> 122 <math style="font-family: upperlimitbaselinerisemin5000;"> 123 <mspace id="ref0003" height="1em" width="3em" style="background: green"/> 124 <mover> 125 <mo movablelimits="false">∑</mo> 126 <mspace id="over00031" height="1em" width="3em" style="background: blue"/> 127 </mover> 128 <munderover> 129 <mo movablelimits="false">∑</mo> 130 <mspace height="1em" width="3em" style="background: black"/> 131 <mspace id="over00032" height="1em" width="3em" style="background: blue"/> 132 </munderover> 133 </math> 134 </p> 135 <hr/> 136 <p> 137 <math style="font-family: upperlimitgapmin7000;"> 138 <mspace id="ref0004" height="1em" width="3em" style="background: green"/> 139 <mover> 140 <mo movablelimits="false">∑</mo> 141 <mspace id="over00041" depth="1em" width="3em" style="background: blue"/> 142 </mover> 143 <munderover> 144 <mo movablelimits="false">∑</mo> 145 <mspace height="1em" width="3em" style="background: black"/> 146 <mspace id="over00042" depth="1em" width="3em" style="background: blue"/> 147 </munderover> 148 </math> 149 </p> 150 </body> 151 </html>