space-like-001.html (10783B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>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(id) { 33 var element = document.getElementById(id); 34 var mnBeforeParent = element.parentNode.previousElementSibling; 35 return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; 36 } 37 38 function spaceAfter(id) { 39 var element = document.getElementById(id); 40 var mnAfterParent = element.parentNode.nextElementSibling; 41 return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; 42 } 43 44 setup({ explicit_done: true }); 45 window.addEventListener("load", runTests); 46 47 function runTests() { 48 var epsilon = 1; 49 var emToPx = 25; 50 51 test(function() { 52 assert_true(MathMLFeatureDetection.has_operator_spacing()); 53 assert_approx_equals(spaceBefore("mtext"), emToPx, epsilon); 54 assert_approx_equals(spaceAfter("mtext"), emToPx, epsilon); 55 }, "mtext is space-like"); 56 57 test(function() { 58 assert_true(MathMLFeatureDetection.has_operator_spacing()); 59 assert_approx_equals(spaceBefore("mspace"), emToPx, epsilon); 60 assert_approx_equals(spaceAfter("mspace"), emToPx, epsilon); 61 }, "mspace is space-like"); 62 63 test(function() { 64 assert_true(MathMLFeatureDetection.has_operator_spacing()); 65 assert_approx_equals(spaceBefore("mrow1"), emToPx, epsilon); 66 assert_approx_equals(spaceAfter("mrow1"), emToPx, epsilon); 67 }, "space-like mrow"); 68 69 test(function() { 70 assert_true(MathMLFeatureDetection.has_operator_spacing()); 71 assert_approx_equals(spaceBefore("mrow2"), 0, epsilon); 72 assert_approx_equals(spaceAfter("mrow2"), 2 * emToPx, epsilon); 73 }, "non-space-like mrow"); 74 75 test(function() { 76 assert_true(MathMLFeatureDetection.has_operator_spacing()); 77 assert_approx_equals(spaceBefore("mstyle1"), emToPx, epsilon); 78 assert_approx_equals(spaceAfter("mstyle1"), emToPx, epsilon); 79 }, "space-like mstyle"); 80 81 test(function() { 82 assert_true(MathMLFeatureDetection.has_operator_spacing()); 83 assert_approx_equals(spaceBefore("mstyle2"), 0, epsilon); 84 assert_approx_equals(spaceAfter("mstyle2"), 2 * emToPx, epsilon); 85 }, "non-space-like mstyle"); 86 87 test(function() { 88 assert_true(MathMLFeatureDetection.has_operator_spacing()); 89 assert_approx_equals(spaceBefore("mphantom1"), emToPx, epsilon); 90 assert_approx_equals(spaceAfter("mphantom1"), emToPx, epsilon); 91 }, "space-like mphantom"); 92 93 test(function() { 94 assert_true(MathMLFeatureDetection.has_operator_spacing()); 95 assert_approx_equals(spaceBefore("mphantom2"), 0, epsilon); 96 assert_approx_equals(spaceAfter("mphantom2"), 2 * emToPx, epsilon); 97 }, "non-space-like mphantom"); 98 99 test(function() { 100 assert_true(MathMLFeatureDetection.has_operator_spacing()); 101 assert_approx_equals(spaceBefore("mpadded1"), emToPx, epsilon); 102 assert_approx_equals(spaceAfter("mpadded1"), emToPx, epsilon); 103 }, "space-like mpadded"); 104 105 test(function() { 106 assert_true(MathMLFeatureDetection.has_operator_spacing()); 107 assert_approx_equals(spaceBefore("mpadded2"), 0, epsilon); 108 assert_approx_equals(spaceAfter("mpadded2"), 2 * emToPx, epsilon); 109 }, "non-space-like mpadded"); 110 111 test(function() { 112 assert_true(MathMLFeatureDetection.has_operator_spacing()); 113 assert_approx_equals(spaceBefore("merror1"), emToPx, epsilon); 114 assert_approx_equals(spaceAfter("merror1"), emToPx, epsilon); 115 }, "space-like merror"); 116 117 test(function() { 118 assert_true(MathMLFeatureDetection.has_operator_spacing()); 119 assert_approx_equals(spaceBefore("merror2"), 0, epsilon); 120 assert_approx_equals(spaceAfter("merror2"), 2 * emToPx, epsilon); 121 }, "non-space-like merror"); 122 123 test(function() { 124 assert_true(MathMLFeatureDetection.has_operator_spacing()); 125 assert_approx_equals(spaceBefore("menclose1"), emToPx, epsilon); 126 assert_approx_equals(spaceAfter("menclose1"), emToPx, epsilon); 127 }, "space-like menclose"); 128 129 test(function() { 130 assert_true(MathMLFeatureDetection.has_operator_spacing()); 131 assert_approx_equals(spaceBefore("menclose2"), 0, epsilon); 132 assert_approx_equals(spaceAfter("menclose2"), 2 * emToPx, epsilon); 133 }, "non-space-like menclose"); 134 135 done(); 136 } 137 </script> 138 </head> 139 <body> 140 <div id="log"></div> 141 <p> 142 <math> 143 <mn>X</mn> 144 <mrow> 145 <!-- mtext is space-like. --> 146 <mtext class="testedElement" id="mtext">X</mtext> 147 <mo lspace="1em" rspace="0em">X</mo> 148 </mrow> 149 <mn>X</mn> 150 </math> 151 </p> 152 <p> 153 <math> 154 <mn>X</mn> 155 <mrow> 156 <!-- mspace is space-like. --> 157 <mspace class="testedElement" id="mspace" width="25px" height="10px"></mspace> 158 <mo lspace="1em" rspace="0em">X</mo> 159 </mrow> 160 <mn>X</mn> 161 </math> 162 </p> 163 <p> 164 <math> 165 <mn>X</mn> 166 <mrow> 167 <!-- mrow is space-like when it contains only space-like elements. --> 168 <mrow id="mrow1" class="testedElement"> 169 <mtext>X</mtext> 170 <mspace width="25px" height="10px"></mspace> 171 </mrow> 172 <mo lspace="1em" rspace="0em">X</mo> 173 </mrow> 174 <mn>X</mn> 175 </math> 176 </p> 177 <p> 178 <math> 179 <mn>X</mn> 180 <mrow> 181 <!-- mrow is not space-like when it contains a non space-like element 182 such as "mn". --> 183 <mrow id="mrow2" class="testedElement"> 184 <mn>X</mn> 185 <mspace width="25px" height="10px"></mspace> 186 </mrow> 187 <mo lspace="1em" rspace="0em">X</mo> 188 </mrow> 189 <mn>X</mn> 190 </math> 191 </p> 192 <p> 193 <math> 194 <mn>X</mn> 195 <mrow> 196 <!-- mstyle is space-like when it contains only space-like elements. --> 197 <mstyle id="mstyle1" class="testedElement"> 198 <mtext>X</mtext> 199 <mspace width="25px" height="10px"></mspace> 200 </mstyle> 201 <mo lspace="1em" rspace="0em">X</mo> 202 </mrow> 203 <mn>X</mn> 204 </math> 205 </p> 206 <p> 207 <math> 208 <mn>X</mn> 209 <mrow> 210 <!-- mstyle is not space-like when it contains a non space-like element 211 such as "mn". --> 212 <mstyle id="mstyle2" class="testedElement"> 213 <mn>X</mn> 214 <mspace width="25px" height="10px"></mspace> 215 </mstyle> 216 <mo lspace="1em" rspace="0em">X</mo> 217 </mrow> 218 <mn>X</mn> 219 </math> 220 </p> 221 <p> 222 <math> 223 <mn>X</mn> 224 <mrow> 225 <!-- mphantom is space-like when it contains only space-like elements. 226 --> 227 <mphantom id="mphantom1" class="testedElement"> 228 <mtext>X</mtext> 229 <mspace width="25px" height="10px"></mspace> 230 </mphantom> 231 <mo lspace="1em" rspace="0em">X</mo> 232 </mrow> 233 <mn>X</mn> 234 </math> 235 </p> 236 <p> 237 <math> 238 <mn>X</mn> 239 <mrow> 240 <!-- mphantom is not space-like when it contains a non space-like 241 element such as "mn". --> 242 <mphantom id="mphantom2" class="testedElement"> 243 <mn>X</mn> 244 <mspace width="25px" height="10px"></mspace> 245 </mphantom> 246 <mo lspace="1em" rspace="0em">X</mo> 247 </mrow> 248 <mn>X</mn> 249 </math> 250 </p> 251 <p> 252 <math> 253 <mn>X</mn> 254 <mrow> 255 <!-- mpadded is space-like when it contains only space-like elements. --> 256 <mpadded id="mpadded1" class="testedElement"> 257 <mtext>X</mtext> 258 <mspace width="25px" height="10px"></mspace> 259 </mpadded> 260 <mo lspace="1em" rspace="0em">X</mo> 261 </mrow> 262 <mn>X</mn> 263 </math> 264 </p> 265 <p> 266 <math> 267 <mn>X</mn> 268 <mrow> 269 <!-- mpadded is not space-like when it contains a non space-like element 270 such as "mn". --> 271 <mpadded id="mpadded2" class="testedElement"> 272 <mn>X</mn> 273 <mspace width="25px" height="10px"></mspace> 274 </mpadded> 275 <mo lspace="1em" rspace="0em">X</mo> 276 </mrow> 277 <mn>X</mn> 278 </math> 279 </p> 280 <p> 281 <math> 282 <mn>X</mn> 283 <mrow> 284 <!-- merror is space-like when it contains only space-like elements. --> 285 <merror id="merror1" class="testedElement"> 286 <mtext>X</mtext> 287 <mspace width="25px" height="10px"></mspace> 288 </merror> 289 <mo lspace="1em" rspace="0em">X</mo> 290 </mrow> 291 <mn>X</mn> 292 </math> 293 </p> 294 <p> 295 <math> 296 <mn>X</mn> 297 <mrow> 298 <!-- merror is not space-like when it contains a non space-like element 299 such as "mn". --> 300 <merror id="merror2" class="testedElement"> 301 <mn>X</mn> 302 <mspace width="25px" height="10px"></mspace> 303 </merror> 304 <mo lspace="1em" rspace="0em">X</mo> 305 </mrow> 306 <mn>X</mn> 307 </math> 308 </p> 309 <p> 310 <math> 311 <mn>X</mn> 312 <mrow> 313 <!-- menclose is space-like when it contains only space-like 314 elements. --> 315 <menclose id="menclose1" class="testedElement"> 316 <mtext>X</mtext> 317 <mspace width="25px" height="10px"></mspace> 318 </menclose> 319 <mo lspace="1em" rspace="0em">X</mo> 320 </mrow> 321 <mn>X</mn> 322 </math> 323 </p> 324 <p> 325 <math> 326 <mn>X</mn> 327 <mrow> 328 <!-- menclose is not space-like when it contains a non space-like 329 element such as "mn". --> 330 <menclose id="menclose2" class="testedElement"> 331 <mn>X</mn> 332 <mspace width="25px" height="10px"></mspace> 333 </menclose> 334 <mo lspace="1em" rspace="0em">X</mo> 335 </mrow> 336 <mn>X</mn> 337 </math> 338 </p> 339 </body> 340 </html>