root-parameters-1.html (8239B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Radical parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> 7 <meta name="assert" content="Elements msqrt and mroot correctly use the radical 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: degreebottomraisepercent25-rulethickness1000; 18 src: url("/fonts/math/radical-degreebottomraisepercent25-rulethickness1000.woff"); 19 } 20 @font-face { 21 font-family: displaystyleverticalgap7000-rulethickness1000; 22 src: url("/fonts/math/radical-displaystyleverticalgap7000-rulethickness1000.woff"); 23 } 24 @font-face { 25 font-family: extraascender3000-rulethickness1000; 26 src: url("/fonts/math/radical-extraascender3000-rulethickness1000.woff"); 27 } 28 @font-face { 29 font-family: kernafterdegreeminus5000-rulethickness1000; 30 src: url("/fonts/math/radical-kernafterdegreeminus5000-rulethickness1000.woff"); 31 } 32 @font-face { 33 font-family: kernbeforedegree4000-rulethickness1000; 34 src: url("/fonts/math/radical-kernbeforedegree4000-rulethickness1000.woff"); 35 } 36 @font-face { 37 font-family: verticalgap6000-rulethickness1000; 38 src: url("/fonts/math/radical-verticalgap6000-rulethickness1000.woff"); 39 } 40 @font-face { 41 font-family: rulethickness8000; 42 src: url("/fonts/math/radical-rulethickness8000.woff"); 43 } 44 </style> 45 <script> 46 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 47 var epsilon = 1; 48 49 function getBox(aId) { 50 return document.getElementById(aId).getBoundingClientRect(); 51 } 52 53 setup({ explicit_done: true }); 54 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 55 56 function runTests() { 57 test(function() { 58 assert_true(MathMLFeatureDetection.has_mspace()); 59 60 var v1 = 25; 61 var v2 = 1000 * emToPx; 62 var radicalHeight = getBox("base001").height + v2; 63 assert_approx_equals(getBox("ref001").top - getBox("index001").bottom, 64 v1 * radicalHeight / 100, epsilon, 65 "mroot: vertical position of index"); 66 }, "RadicalDegreeBottomRaisePercent"); 67 68 test(function() { 69 assert_true(MathMLFeatureDetection.has_mspace()); 70 71 var v1 = 7000 * emToPx; 72 var v2 = 1000 * emToPx; 73 assert_approx_equals(getBox("base0021").top - getBox("radical0021").top, 74 v1 + v2, epsilon, 75 "msqrt: vertical gap"); 76 assert_approx_equals(getBox("base0022").top - getBox("radical0022").top, 77 v1 + v2, epsilon, 78 "mroot: vertical gap"); 79 }, "RadicalDisplayStyleVerticalGap"); 80 81 test(function() { 82 assert_true(MathMLFeatureDetection.has_mspace()); 83 84 var v1 = 3000 * emToPx; 85 var v2 = 1000 * emToPx; 86 assert_approx_equals(getBox("base0031").top - getBox("radical0031").top, 87 v1 + v2, epsilon, 88 "msqrt: vertical gap"); 89 assert_approx_equals(getBox("base0032").top - getBox("radical0032").top, 90 v1 + v2, epsilon, 91 "mroot: vertical gap"); 92 }, "RadicalExtraAscender"); 93 94 test(function() { 95 assert_true(MathMLFeatureDetection.has_mspace()); 96 97 // Note: the size variants of U+221A in this font have width 1000. 98 var v1 = 5000 * emToPx; 99 var radicalSymbolWidth = 1000 * emToPx; 100 var radicalLeft = getBox("base004").left - radicalSymbolWidth; 101 assert_approx_equals(getBox("index004").right - radicalLeft, 102 v1, epsilon, 103 "mroot: kern after degree"); 104 }, "RadicalKernAfterDegree"); 105 106 test(function() { 107 assert_true(MathMLFeatureDetection.has_mspace()); 108 109 var v1 = 4000 * emToPx; 110 assert_approx_equals(getBox("index005").left - getBox("radical005").left, 111 v1, epsilon, 112 "mroot: kern before degree"); 113 }, "RadicalKernBeforeDegree"); 114 115 test(function() { 116 assert_true(MathMLFeatureDetection.has_mspace()); 117 118 var v = 8000 * emToPx; 119 assert_approx_equals(getBox("base0061").top - getBox("radical0061").top, 120 v, epsilon, 121 "msqrt: vertical gap"); 122 assert_approx_equals(getBox("base0062").top - getBox("radical0062").top, 123 v, epsilon, 124 "msqrt: vertical gap"); 125 }, "RadicalRuleThickness"); 126 127 test(function() { 128 assert_true(MathMLFeatureDetection.has_mspace()); 129 130 var v1 = 6000 * emToPx; 131 var v2 = 1000 * emToPx; 132 assert_approx_equals(getBox("base0071").top - getBox("radical0071").top, 133 v1 + v2, epsilon, 134 "msqrt: vertical gap"); 135 assert_approx_equals(getBox("base0072").top - getBox("radical0072").top, 136 v1 + v2, epsilon, 137 "msqrt: vertical gap"); 138 }, "RadicalVerticalGap"); 139 140 done(); 141 } 142 </script> 143 </head> 144 <body> 145 <div id="log"></div> 146 <p> 147 <math style="font-family: degreebottomraisepercent25-rulethickness1000;"> 148 <mspace id="ref001" width="3em" depth="1em" style="background: green"/> 149 <mroot> 150 <mspace id="base001" width="3em" height="10em" style="background: green"/> 151 <mspace id="index001" width="3em" height="1em" style="background: blue"/> 152 </mroot> 153 </math> 154 </p> 155 <hr/> 156 <p> 157 <math display="block" 158 style="font-family: displaystyleverticalgap7000-rulethickness1000;"> 159 <msqrt style="background: green" id="radical0021"> 160 <mspace id="base0021" width="3em" height="1em" style="background: blue"/> 161 </msqrt> 162 <mroot style="background: green" id="radical0022"> 163 <mspace id="base0022" width="3em" height="1em" style="background: blue"/> 164 <mspace width="3em" height="1em" style="background: black"/> 165 </mroot> 166 </math> 167 </p> 168 <hr/> 169 <p> 170 <math style="font-family: extraascender3000-rulethickness1000;"> 171 <msqrt style="background: green" id="radical0031"> 172 <mspace id="base0031" width="3em" height="1em" style="background: blue"/> 173 </msqrt> 174 <mroot style="background: green" id="radical0032"> 175 <mspace id="base0032" width="3em" height="1em" style="background: blue"/> 176 <mspace width="3em" height="1em" style="background: black"/> 177 </mroot> 178 </math> 179 </p> 180 <hr/> 181 <p> 182 <math style="font-family: kernafterdegreeminus5000-rulethickness1000;"> 183 <mroot> 184 <mspace id="base004" width="3em" height="2em" style="background: blue"/> 185 <mspace id="index004" width="7em" height="1em" style="background: green"/> 186 </mroot> 187 </math> 188 </p> 189 <hr/> 190 <p> 191 <math style="font-family: kernbeforedegree4000-rulethickness1000;"> 192 <mroot id="radical005" style="background: blue"> 193 <mspace width="3em" height="1em"/> 194 <mspace id="index005" width="3em" height="1em" style="background: green"/> 195 </mroot> 196 </math> 197 </p> 198 <hr/> 199 <p> 200 <math style="font-family: rulethickness8000;"> 201 <msqrt style="background: green" id="radical0061"> 202 <mspace id="base0061" width="3em" height="1em" style="background: blue"/> 203 </msqrt> 204 <mroot style="background: green" id="radical0062"> 205 <mspace id="base0062" width="3em" height="1em" style="background: blue"/> 206 <mspace width="3em" height="1em" style="background: black"/> 207 </mroot> 208 </math> 209 </p> 210 <p> 211 <math style="font-family: verticalgap6000-rulethickness1000;"> 212 <msqrt style="background: green" id="radical0071"> 213 <mspace id="base0071" width="3em" height="1em" style="background: blue"/> 214 </msqrt> 215 <mroot style="background: green" id="radical0072"> 216 <mspace id="base0072" width="3em" height="1em" style="background: blue"/> 217 <mspace width="3em" height="1em" style="background: black"/> 218 </mroot> 219 </math> 220 </p> 221 </body> 222 </html>