space-like-003.html (5718B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Non space-like elements</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#definition-of-space-like-elements"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> 10 <meta name="assert" content="Verify definition of space-like elements"> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/mathml/support/feature-detection.js"></script> 14 <style> 15 /* Default spacing of operator 'X' is 0.2777777777777778em so quite different 16 from the measured/specified 0em and 1em. */ 17 math, math * { 18 font: 25px/1 Ahem; 19 } 20 mn { 21 color: black; 22 } 23 mo { 24 color: yellow; 25 } 26 .testedElement, .testedElement * { 27 color: blue !important; 28 background: blue !important; 29 } 30 </style> 31 <script> 32 function spaceBefore(element) { 33 var mnBeforeParent = element.parentNode.previousElementSibling; 34 return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; 35 } 36 37 function spaceAfter(element) { 38 var mnAfterParent = element.parentNode.nextElementSibling; 39 return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; 40 } 41 42 setup({ explicit_done: true }); 43 window.addEventListener("load", runTests); 44 45 function runTests() { 46 var epsilon = 1; 47 var emToPx = 25; 48 49 Array.from(document.querySelectorAll(".testedElement")).forEach(el => { 50 test(function() { 51 assert_true(MathMLFeatureDetection.has_operator_spacing()); 52 assert_approx_equals(spaceBefore(el), 0, epsilon); 53 assert_approx_equals(spaceAfter(el), 2 * emToPx, epsilon); 54 }, `${el.tagName} is not space-like`); 55 }); 56 57 done(); 58 } 59 </script> 60 </head> 61 <body> 62 <div id="log"></div> 63 <p> 64 <math> 65 <mn>X</mn> 66 <mrow> 67 <mroot class="testedElement"> 68 <mtext>X</mtext> 69 <mtext>X</mtext> 70 </mroot> 71 <mo lspace="1em" rspace="0em">X</mo> 72 </mrow> 73 <mn>X</mn> 74 </math> 75 </p> 76 <p> 77 <math> 78 <mn>X</mn> 79 <mrow> 80 <mfrac class="testedElement"> 81 <mtext>X</mtext> 82 <mtext>X</mtext> 83 </mfrac> 84 <mo lspace="1em" rspace="0em">X</mo> 85 </mrow> 86 <mn>X</mn> 87 </math> 88 </p> 89 <p> 90 <math> 91 <mn>X</mn> 92 <mrow> 93 <mi class="testedElement" mathvariant="normal">X</mi> 94 <mo lspace="1em" rspace="0em">X</mo> 95 </mrow> 96 <mn>X</mn> 97 </math> 98 </p> 99 <p> 100 <math> 101 <mn>X</mn> 102 <mrow> 103 <mmultiscripts class="testedElement"> 104 <mtext>X</mtext> 105 <mtext>X</mtext> 106 <mtext>X</mtext> 107 </mmultiscripts> 108 <mo lspace="1em" rspace="0em">X</mo> 109 </mrow> 110 <mn>X</mn> 111 </math> 112 </p> 113 <p> 114 <math> 115 <mn>X</mn> 116 <mrow> 117 <mn class="testedElement">X</mn> 118 <mo lspace="1em" rspace="0em">X</mo> 119 </mrow> 120 <mn>X</mn> 121 </math> 122 </p> 123 <p> 124 <math> 125 <mn>X</mn> 126 <mrow> 127 <mo class="testedElement" lspace="0" rspace="0">X</mo> 128 <mo lspace="1em" rspace="0em">X</mo> 129 </mrow> 130 <mn>X</mn> 131 </math> 132 </p> 133 <p> 134 <math> 135 <mn>X</mn> 136 <mrow> 137 <mover class="testedElement"> 138 <mtext>X</mtext> 139 <mtext>X</mtext> 140 </mover> 141 <mo lspace="1em" rspace="0em">X</mo> 142 </mrow> 143 <mn>X</mn> 144 </math> 145 </p> 146 <p> 147 <math> 148 <mn>X</mn> 149 <mrow> 150 <munder class="testedElement"> 151 <mtext>X</mtext> 152 <mtext>X</mtext> 153 </munder> 154 <mo lspace="1em" rspace="0em">X</mo> 155 </mrow> 156 <mn>X</mn> 157 </math> 158 </p> 159 <p> 160 <math> 161 <mn>X</mn> 162 <mrow> 163 <ms class="testedElement">X</ms> 164 <mo lspace="1em" rspace="0em">X</mo> 165 </mrow> 166 <mn>X</mn> 167 </math> 168 </p> 169 <p> 170 <math> 171 <mn>X</mn> 172 <mrow> 173 <munderover class="testedElement"> 174 <mtext>X</mtext> 175 <mtext>X</mtext> 176 <mtext>X</mtext> 177 </munderover> 178 <mo lspace="1em" rspace="0em">X</mo> 179 </mrow> 180 <mn>X</mn> 181 </math> 182 </p> 183 <p> 184 <math> 185 <mn>X</mn> 186 <mrow> 187 <msup class="testedElement"> 188 <mtext>X</mtext> 189 <mtext>X</mtext> 190 </msup> 191 <mo lspace="1em" rspace="0em">X</mo> 192 </mrow> 193 <mn>X</mn> 194 </math> 195 </p> 196 <p> 197 <math> 198 <mn>X</mn> 199 <mrow> 200 <msub class="testedElement"> 201 <mtext>X</mtext> 202 <mtext>X</mtext> 203 </msub> 204 <mo lspace="1em" rspace="0em">X</mo> 205 </mrow> 206 <mn>X</mn> 207 </math> 208 </p> 209 <p> 210 <math> 211 <mn>X</mn> 212 <mrow> 213 <msubsup class="testedElement"> 214 <mtext>X</mtext> 215 <mtext>X</mtext> 216 <mtext>X</mtext> 217 </msubsup> 218 <mo lspace="1em" rspace="0em">X</mo> 219 </mrow> 220 <mn>X</mn> 221 </math> 222 </p> 223 <p> 224 <math> 225 <mn>X</mn> 226 <mrow> 227 <msqrt class="testedElement"> 228 <mtext>X</mtext> 229 </msqrt> 230 <mo lspace="1em" rspace="0em">X</mo> 231 </mrow> 232 <mn>X</mn> 233 </math> 234 </p> 235 <p> 236 <math> 237 <mn>X</mn> 238 <mrow> 239 <mtable class="testedElement"> 240 <mtr> 241 <mtd> 242 <mtext>X</mtext> 243 </mtd> 244 </mtr> 245 </mtable> 246 <mo lspace="1em" rspace="0em">X</mo> 247 </mrow> 248 <mn>X</mn> 249 </math> 250 </p> 251 </body> 252 </html>