subsup-parameters-2.html (8692B)
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 italic correction 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: largeop-displayoperatorminheight5000; 18 src: url("/fonts/math/largeop-displayoperatorminheight5000.woff"); 19 } 20 @font-face { 21 font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000; 22 src: url("/fonts/math/largeop-displayoperatorminheight2000-2AFF-italiccorrection3000.woff"); 23 } 24 @font-face { 25 font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000; 26 src: url("/fonts/math/largeop-displayoperatorminheight7000-2AFF-italiccorrection5000.woff"); 27 } 28 </style> 29 <script> 30 function getBox(aId) { 31 return document.getElementById(aId).getBoundingClientRect(); 32 } 33 34 setup({ explicit_done: true }); 35 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 36 37 /* 38 These two tests verify that: 39 - In msub, the script is at the right of the base minus the italic correction. 40 - In msup, the script is just at the right of the base. 41 - In msubsup, the scripts are shifted by the italic correction. 42 - In mmultiscripts, postscript pairs are shifted by the italic correction. 43 - In mmultiscripts, prescript pairs are vertically aligned. 44 */ 45 var epsilon = 1; 46 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 47 function runTests() { 48 test(function() { 49 assert_true(MathMLFeatureDetection.has_mspace()); 50 51 var v = 0; 52 assert_approx_equals(getBox("base001").right - getBox("sub001").left, v, epsilon, "msub"); 53 assert_approx_equals(getBox("sup002").left, getBox("base002").right, epsilon, "msup"); 54 assert_approx_equals(getBox("sup003").left - getBox("sub003").left, v, epsilon, "msubsup"); 55 assert_approx_equals(getBox("sup004").left - getBox("sub004").left, v, epsilon, "mmultiscripts postscripts"); 56 assert_approx_equals(getBox("sup005").left - getBox("sub005").left, 0, epsilon, "mmultiscripts prescripts"); 57 }, "Null Italic Correction"); 58 test(function() { 59 assert_true(MathMLFeatureDetection.has_mspace()); 60 61 var v = 3000 * emToPx; 62 assert_approx_equals(getBox("base011").right - getBox("sub011").left, v, epsilon, "msub"); 63 assert_approx_equals(getBox("sup012").left, getBox("base012").right, epsilon, "msup"); 64 assert_approx_equals(getBox("sup013").left - getBox("sub013").left, v, epsilon, "msubsup"); 65 assert_approx_equals(getBox("sup014").left - getBox("sub014").left, v, epsilon, "mmultiscripts postscripts"); 66 assert_approx_equals(getBox("sup015").left - getBox("sub015").left, 0, epsilon, "mmultiscripts prescripts"); 67 }, "NonNull Italic Correction (MathGlyphVariantRecord)"); 68 test(function() { 69 assert_true(MathMLFeatureDetection.has_mspace()); 70 71 var v = 5000 * emToPx; 72 assert_approx_equals(getBox("base021").right - getBox("sub021").left, v, epsilon, "msub"); 73 assert_approx_equals(getBox("sup022").left, getBox("base022").right, epsilon, "msup"); 74 assert_approx_equals(getBox("sup023").left - getBox("sub023").left, v, epsilon, "msubsup"); 75 assert_approx_equals(getBox("sup024").left - getBox("sub024").left, v, epsilon, "mmultiscripts postscripts"); 76 assert_approx_equals(getBox("sup025").left - getBox("sub025").left, 0, epsilon, "mmultiscripts prescripts"); 77 }, "NonNull Italic Correction (GlyphAssembly)"); 78 done(); 79 } 80 </script> 81 </head> 82 <body> 83 <div id="log"></div> 84 <h2>Null Italic Correction</h2> 85 <p> 86 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> 87 <msub> 88 <mo id="base001" lspace="0px" rspace="0px">⫿</mo> 89 <mspace id="sub001" height="1em" width="1em" style="background: blue"/> 90 </msub> 91 </math> 92 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> 93 <msup> 94 <mo id="base002" lspace="0px" rspace="0px">⫿</mo> 95 <mspace id="sup002" height="1em" width="1em" style="background: blue"/> 96 </msup> 97 </math> 98 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> 99 <msubsup> 100 <mo lspace="0px" rspace="0px">⫿</mo> 101 <mspace id="sub003" height="1em" width="1em" style="background: blue"/> 102 <mspace id="sup003" height="1em" width="1em" style="background: green"/> 103 </msubsup> 104 </math> 105 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight5000;"> 106 <mmultiscripts> 107 <mo lspace="0px" rspace="0px">⫿</mo> 108 <mspace id="sub004" height="1em" width="1em" style="background: blue"/> 109 <mspace id="sup004" height="1em" width="1em" style="background: green"/> 110 <mprescripts/> 111 <mspace id="sub005" height="1em" width="1em" style="background: magenta"/> 112 <mspace id="sup005" height="1em" width="1em" style="background: cyan"/> 113 </mmultiscripts> 114 </math> 115 </p> 116 <h2>NonNull Italic Correction (MathGlyphVariantRecord)</h2> 117 <p> 118 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> 119 <msub> 120 <mo id="base011" lspace="0px" rspace="0px">⫿</mo> 121 <mspace id="sub011" height="1em" width="1em" style="background: blue"/> 122 </msub> 123 </math> 124 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> 125 <msup> 126 <mo id="base012" lspace="0px" rspace="0px">⫿</mo> 127 <mspace id="sup012" height="1em" width="1em" style="background: blue"/> 128 </msup> 129 </math> 130 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> 131 <msubsup> 132 <mo lspace="0px" rspace="0px">⫿</mo> 133 <mspace id="sub013" height="1em" width="1em" style="background: blue"/> 134 <mspace id="sup013" height="1em" width="1em" style="background: green"/> 135 </msubsup> 136 </math> 137 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight2000-2AFF-italiccorrection3000;"> 138 <mmultiscripts> 139 <mo lspace="0px" rspace="0px">⫿</mo> 140 <mspace id="sub014" height="1em" width="1em" style="background: blue"/> 141 <mspace id="sup014" height="1em" width="1em" style="background: green"/> 142 <mprescripts/> 143 <mspace id="sub015" height="1em" width="1em" style="background: magenta"/> 144 <mspace id="sup015" height="1em" width="1em" style="background: cyan"/> 145 </mmultiscripts> 146 </math> 147 </p> 148 <h2>NonNull Italic Correction (GlyphAssembly)</h2> 149 <p> 150 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> 151 <msub> 152 <mo id="base021" lspace="0px" rspace="0px">⫿</mo> 153 <mspace id="sub021" height="1em" width="1em" style="background: blue"/> 154 </msub> 155 </math> 156 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> 157 <msup> 158 <mo id="base022" lspace="0px" rspace="0px">⫿</mo> 159 <mspace id="sup022" height="1em" width="1em" style="background: blue"/> 160 </msup> 161 </math> 162 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> 163 <msubsup> 164 <mo lspace="0px" rspace="0px">⫿</mo> 165 <mspace id="sub023" height="1em" width="1em" style="background: blue"/> 166 <mspace id="sup023" height="1em" width="1em" style="background: green"/> 167 </msubsup> 168 </math> 169 <math displaystyle="true" style="font-family: largeop-displayoperatorminheight7000-2AFF-italiccorrection5000;"> 170 <mmultiscripts> 171 <mo lspace="0px" rspace="0px">⫿</mo> 172 <mspace id="sub024" height="1em" width="1em" style="background: blue"/> 173 <mspace id="sup024" height="1em" width="1em" style="background: green"/> 174 <mprescripts/> 175 <mspace id="sub025" height="1em" width="1em" style="background: magenta"/> 176 <mspace id="sup025" height="1em" width="1em" style="background: cyan"/> 177 </mmultiscripts> 178 </math> 179 </p> 180 </body> 181 </html>