subsup-parameters-1.html (15263B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Subscripts and Superscripts parameters</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> 7 <meta name="assert" content="Elements msub, msup, subsup and msubsup correctly use the subscript and superscript 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: spaceafterscript3000; 18 src: url("/fonts/math/scripts-spaceafterscript3000.woff"); 19 } 20 @font-face { 21 font-family: superscriptshiftup7000; 22 src: url("/fonts/math/scripts-superscriptshiftup7000.woff"); 23 } 24 @font-face { 25 font-family: superscriptshiftupcramped5000; 26 src: url("/fonts/math/scripts-superscriptshiftupcramped5000.woff"); 27 } 28 @font-face { 29 font-family: subscriptshiftdown6000; 30 src: url("/fonts/math/scripts-subscriptshiftdown6000.woff"); 31 } 32 @font-face { 33 font-family: subsuperscriptgapmin11000; 34 src: url("/fonts/math/scripts-subsuperscriptgapmin11000.woff"); 35 } 36 @font-face { 37 font-family: subsuperscriptgapmin11000superscriptbottommaxwithsubscript3000; 38 src: url("/fonts/math/scripts-subsuperscriptgapmin11000-superscriptbottommaxwithsubscript3000.woff"); 39 } 40 @font-face { 41 font-family: subscripttopmax4000; 42 src: url("/fonts/math/scripts-subscripttopmax4000.woff"); 43 } 44 @font-face { 45 font-family: superscriptbottommin8000; 46 src: url("/fonts/math/scripts-superscriptbottommin8000.woff"); 47 } 48 @font-face { 49 font-family: subscriptbaselinedropmin9000; 50 src: url("/fonts/math/scripts-subscriptbaselinedropmin9000.woff"); 51 } 52 @font-face { 53 font-family: superscriptbaselinedropmax10000; 54 src: url("/fonts/math/scripts-superscriptbaselinedropmax10000.woff"); 55 } 56 </style> 57 <script> 58 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 59 var epsilon = 1; 60 61 function getBox(aId) { 62 return document.getElementById(aId).getBoundingClientRect(); 63 } 64 65 setup({ explicit_done: true }); 66 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 67 68 function runTests() { 69 test(function() { 70 assert_true(MathMLFeatureDetection.has_mspace()); 71 72 var v = 3000 * emToPx; 73 assert_approx_equals(getBox("ref001").left - getBox("sub001").right, v, epsilon, "msub: Space after subscript"); 74 assert_approx_equals(getBox("ref002").left - getBox("sup002").right, v, epsilon, "msup: Space after superscript"); 75 assert_approx_equals(getBox("ref003").left - getBox("sup003").right, v, epsilon, "msubsup: Space after superscript"); 76 assert_approx_equals(getBox("sup0042").left - getBox("sup0041").right, v, epsilon, "mmultiscripts: Space after first superscript"); 77 assert_approx_equals(getBox("sup0043").left - getBox("sup0042").right, v, epsilon, "mmultiscripts: Space after second superscript"); 78 assert_approx_equals(getBox("ref004").left - getBox("sup0043").right, v, epsilon, "mmultiscripts: Space after last superscript"); 79 }, "SpaceAfterScript"); 80 81 test(function() { 82 assert_true(MathMLFeatureDetection.has_mspace()); 83 84 var v = 7000 * emToPx; 85 assert_approx_equals(getBox("ref101").bottom - getBox("sup102").bottom, v, epsilon, "msup: Superscript shift"); 86 assert_approx_equals(getBox("ref101").bottom - getBox("sup103").bottom, v, epsilon, "msubsup: Superscript shift"); 87 assert_approx_equals(getBox("ref101").bottom - getBox("sup1041").bottom, v, epsilon, "mmultiscripts: First superscript shift"); 88 assert_approx_equals(getBox("ref101").bottom - getBox("sup1042").bottom, v, epsilon, "mmultiscripts: Second superscript shift"); 89 assert_approx_equals(getBox("ref101").bottom - getBox("sup1043").bottom, v, epsilon, "mmultiscripts: Last superscript shift"); 90 }, "SuperscriptShiftUp"); 91 92 test(function() { 93 assert_true(MathMLFeatureDetection.has_mspace()); 94 95 var v = 5000 * emToPx; 96 assert_approx_equals(getBox("ref201").bottom - getBox("sup202").bottom, v, epsilon, "msup: Superscript shift"); 97 assert_approx_equals(getBox("ref201").bottom - getBox("sup203").bottom, v, epsilon, "msubsup: Superscript shift"); 98 assert_approx_equals(getBox("ref201").bottom - getBox("sup2041").bottom, v, epsilon, "mmultiscripts: First superscript shift"); 99 assert_approx_equals(getBox("ref201").bottom - getBox("sup2042").bottom, v, epsilon, "mmultiscripts: Second superscript shift"); 100 assert_approx_equals(getBox("ref201").bottom - getBox("sup2043").bottom, v, epsilon, "mmultiscripts: Last superscript shift"); 101 }, "SuperscriptShiftUpCramped"); 102 103 test(function() { 104 assert_true(MathMLFeatureDetection.has_mspace()); 105 106 var v = 6000 * emToPx; 107 assert_approx_equals(getBox("sub301").bottom - getBox("ref300").bottom, v, epsilon, "msup: Subscript shift"); 108 assert_approx_equals(getBox("sub302").bottom - getBox("ref300").bottom, v, epsilon, "msubsup: Subscript shift"); 109 assert_approx_equals(getBox("sub303").bottom - getBox("ref300").bottom, v, epsilon, "mmultiscripts: First subscript shift"); 110 assert_approx_equals(getBox("sub304").bottom - getBox("ref300").bottom, v, epsilon, "mmultiscripts: Second subscript shift"); 111 }, "SubscriptShiftDown"); 112 113 test(function() { 114 assert_true(MathMLFeatureDetection.has_mspace()); 115 116 var v = 11000 * emToPx; 117 assert_approx_equals(getBox("sub4011").top - getBox("sup4012").bottom, v, epsilon, "msubsup: SubSuperscript gap"); 118 assert_approx_equals(getBox("sub4021").top - getBox("sup4022").bottom, v, epsilon, "mmultiscripts: SubSuperscript gap"); 119 }, "SubSuperscriptGapMin"); 120 121 test(function() { 122 assert_true(MathMLFeatureDetection.has_mspace()); 123 124 var v1 = 11000 * emToPx; 125 var v2 = 3000 * emToPx; 126 assert_approx_equals(getBox("sub501").top - getBox("sup501").bottom, v1, epsilon, "msubsup: SubSuperscript gap"); 127 assert_approx_equals(getBox("ref500").bottom - getBox("sup501").bottom, v2, epsilon, "msubsup: Superscript bottom"); 128 assert_approx_equals(getBox("sub502").top - getBox("sup502").bottom, v1, epsilon, "mmultiscripts: SubSuperscript gap"); 129 assert_approx_equals(getBox("ref500").bottom - getBox("sup502").bottom, v2, epsilon, "mmultiscripts: Superscript bottom"); 130 }, "SuperscriptBottomMaxWithSubscript"); 131 132 test(function() { 133 assert_true(MathMLFeatureDetection.has_mspace()); 134 135 var v = 4000 * emToPx; 136 assert_approx_equals(getBox("ref600").bottom - getBox("sub601").top, v, epsilon, "msub: Subscript top"); 137 }, "SubscriptTopMax"); 138 139 test(function() { 140 assert_true(MathMLFeatureDetection.has_mspace()); 141 142 var v = 8000 * emToPx; 143 assert_approx_equals(getBox("ref700").bottom - getBox("sub701").bottom, v, epsilon, "msub: Superscript bottom"); 144 }, "SuperscriptBottomMin"); 145 146 test(function() { 147 assert_true(MathMLFeatureDetection.has_mspace()); 148 149 var v = 9000 * emToPx; 150 assert_approx_equals(getBox("sub801").bottom - getBox("base801").bottom, v, epsilon, "msub: Superscript drop"); 151 }, "SubscriptBaselineDrop"); 152 153 test(function() { 154 assert_true(MathMLFeatureDetection.has_mspace()); 155 156 var v = 10000 * emToPx; 157 assert_approx_equals(getBox("sup901").bottom - getBox("base901").top, v, epsilon, "msup: Superscript drop"); 158 }, "SuperscriptBaselineDrop"); 159 160 done(); 161 } 162 </script> 163 </head> 164 <body> 165 <div id="log"></div> 166 <p> 167 <math style="font-family: spaceafterscript3000;"> 168 <msub> 169 <mspace height="2em" width="2em" style="background: blue"/> 170 <mspace id="sub001" height="1em" width="1em" style="background: red"/> 171 </msub> 172 <mspace id="ref001" height="1em" width="1em" style="background: green"/> 173 </math> 174 <math style="font-family: spaceafterscript3000;"> 175 <msup> 176 <mspace height="2em" width="2em" style="background: blue"/> 177 <mspace id="sup002" height="1em" width="1em" style="background: red"/> 178 </msup> 179 <mspace id="ref002" height="1em" width="1em" style="background: green"/> 180 </math> 181 <math style="font-family: spaceafterscript3000;"> 182 <msubsup> 183 <mspace height="2em" width="2em" style="background: blue"/> 184 <mspace/> 185 <mspace id="sup003" height="1em" width="1em" style="background: red"/> 186 </msubsup> 187 <mspace id="ref003" height="1em" width="1em" style="background: green"/> 188 </math> 189 <math style="font-family: spaceafterscript3000;"> 190 <mmultiscripts> 191 <mspace height="2em" width="2em" style="background: blue"/> 192 <none/> 193 <mspace id="sup0041" height="1em" width="1em" style="background: red"/> 194 <none/> 195 <mspace id="sup0042" height="1em" width="1em" style="background: red"/> 196 <none/> 197 <mspace id="sup0043" height="1em" width="1em" style="background: red"/> 198 </mmultiscripts> 199 <mspace id="ref004" height="1em" width="1em" style="background: green"/> 200 </math> 201 </p> 202 <hr/> 203 <p> 204 <math style="font-family: superscriptshiftup7000;"> 205 <mspace id="ref101" height="1em" width="1em" style="background: green"/> 206 <msup> 207 <mspace height="2em" width="2em" style="background: blue"/> 208 <mspace id="sup102" height="1em" width="1em" style="background: red"/> 209 </msup> 210 <msubsup> 211 <mspace height="2em" width="2em" style="background: blue"/> 212 <mspace height="1em" width="1em" style="background: red"/> 213 <mspace id="sup103" height="1em" width="1em" style="background: red"/> 214 </msubsup> 215 <mmultiscripts> 216 <mspace height="2em" width="2em" style="background: blue"/> 217 <none/> 218 <mspace id="sup1041" height="1em" width="1em" style="background: red"/> 219 <none/> 220 <mspace id="sup1042" height="1em" width="1em" style="background: red"/> 221 <none/> 222 <mspace id="sup1043" height="1em" width="1em" style="background: red"/> 223 </mmultiscripts> 224 </math> 225 </p> 226 <hr/> 227 <p> 228 <math style="font-family: superscriptshiftupcramped5000;"> 229 <msqrt> 230 <mspace id="ref201" height="1em" width="1em" style="background: green"/> 231 <msup> 232 <mspace height="2em" width="2em" style="background: blue"/> 233 <mspace id="sup202" height="1em" width="1em" style="background: red"/> 234 </msup> 235 <msubsup> 236 <mspace height="2em" width="2em" style="background: blue"/> 237 <mspace height="1em" width="1em" style="background: blue"/> 238 <mspace id="sup203" height="1em" width="1em" style="background: red"/> 239 </msubsup> 240 <mmultiscripts> 241 <mspace height="2em" width="2em" style="background: blue"/> 242 <none/> 243 <mspace id="sup2041" height="1em" width="1em" style="background: red"/> 244 <none/> 245 <mspace id="sup2042" height="1em" width="1em" style="background: red"/> 246 <none/> 247 <mspace id="sup2043" height="1em" width="1em" style="background: red"/> 248 </mmultiscripts> 249 </msqrt> 250 </math> 251 </p> 252 <hr/> 253 <p> 254 <math style="font-family: subscriptshiftdown6000;"> 255 <mspace id="ref300" height="1em" width="1em" style="background: green"/> 256 <msub> 257 <mspace height="2em" width="2em" style="background: blue"/> 258 <mspace id="sub301" height="1em" width="1em" style="background: red"/> 259 </msub> 260 <msubsup> 261 <mspace height="2em" width="2em" style="background: blue"/> 262 <mspace id="sub302" height="1em" width="1em" style="background: red"/> 263 <mspace height="1em" width="1em" style="background: blue"/> 264 </msubsup> 265 <mmultiscripts> 266 <mspace height="2em" width="2em" style="background: blue"/> 267 <mspace id="sub303" height="1em" width="1em" style="background: red"/> 268 <none/> 269 <mspace id="sub304" height="1em" width="1em" style="background: red"/> 270 <none/> 271 </mmultiscripts> 272 </math> 273 </p> 274 <hr/> 275 <p> 276 <math style="font-family: subsuperscriptgapmin11000;"> 277 <msubsup> 278 <mspace height="2em" width="2em" style="background: blue"/> 279 <mspace id="sub4011" height="1em" width="1em" style="background: red"/> 280 <mspace id="sup4012" height="1em" width="1em" style="background: red"/> 281 </msubsup> 282 <mmultiscripts> 283 <mspace height="2em" width="2em" style="background: blue"/> 284 <none/> 285 <none/> 286 <mspace id="sub4021" height="1em" width="1em" style="background: red"/> 287 <mspace id="sup4022" height="1em" width="1em" style="background: red"/> 288 </mmultiscripts> 289 </math> 290 </p> 291 <hr/> 292 <p> 293 <math style="font-family: subsuperscriptgapmin11000superscriptbottommaxwithsubscript3000;"> 294 <mspace id="ref500" height="1em" width="1em" style="background: green"/> 295 <msubsup> 296 <mspace height="2em" width="2em" style="background: blue"/> 297 <mspace id="sub501" height="1em" width="1em" style="background: red"/> 298 <mspace id="sup501" height="1em" width="1em" style="background: red"/> 299 </msubsup> 300 <mmultiscripts> 301 <mspace height="2em" width="2em" style="background: blue"/> 302 <none/> 303 <none/> 304 <mspace id="sub502" height="1em" width="1em" style="background: red"/> 305 <mspace id="sup502" height="1em" width="1em" style="background: red"/> 306 </mmultiscripts> 307 </math> 308 </p> 309 <hr/> 310 <p> 311 <math style="font-family: subscripttopmax4000;"> 312 <mspace id="ref600" height="1em" 313 width="1em" style="background: green"/> 314 <msub> 315 <mspace height="2em" width="2em" style="background: blue"/> 316 <mspace id="sub601" height="10em" 317 width="1em" style="background: red"/> 318 </msub> 319 </math> 320 </p> 321 <hr/> 322 <p> 323 <math style="font-family: superscriptbottommin8000;"> 324 <mspace id="ref700" height="1em" 325 width="1em" style="background: green"/> 326 <msup> 327 <mspace height="2em" width="2em" style="background: blue"/> 328 <mspace id="sub701" depth="1em" 329 width="1em" style="background: red"/> 330 </msup> 331 </math> 332 </p> 333 <hr/> 334 <p> 335 <math style="font-family: subscriptbaselinedropmin9000;"> 336 <msub> 337 <mspace id="base801" height="2em" width="2em" style="background: blue"/> 338 <mspace id="sub801" height="1em" 339 width="1em" style="background: red"/> 340 </msub> 341 </math> 342 </p> 343 <hr/> 344 <p> 345 <math style="font-family: superscriptbaselinedropmax10000;"> 346 <msup> 347 <mspace id="base901" height="15em" width="2em" style="background: blue"/> 348 <mspace id="sup901" height="1em" 349 width="1em" style="background: red"/> 350 </msup> 351 </math> 352 </p> 353 </body> 354 </html>