space-like-004.html (19768B)
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 <script src="/mathml/support/box-navigation.js"></script> 15 <style> 16 /* Default spacing of operator 'X' is 0.2777777777777778em so quite different 17 from the measured/specified 0em and 1em. */ 18 math, math * { 19 font: 25px/1 Ahem; 20 } 21 mn { 22 color: black; 23 } 24 mo { 25 color: yellow; 26 } 27 .testedElement, .testedElement * { 28 color: blue !important; 29 background: blue !important; 30 } 31 .oof1 { 32 position: absolute; 33 } 34 .oof2 { 35 position: fixed; 36 } 37 .nobox { 38 display: none; 39 } 40 </style> 41 <script> 42 function spaceBefore(id) { 43 var element = document.getElementById(id); 44 var mnBeforeParent = previousInFlowSibling(element.parentNode); 45 return element.getBoundingClientRect().left - mnBeforeParent.getBoundingClientRect().right; 46 } 47 48 function spaceAfter(id) { 49 var element = document.getElementById(id); 50 var mnAfterParent = nextInFlowSibling(element.parentNode); 51 return mnAfterParent.getBoundingClientRect().left - element.getBoundingClientRect().right; 52 } 53 54 setup({ explicit_done: true }); 55 window.addEventListener("load", runTests); 56 57 function runTests() { 58 var epsilon = 1; 59 var emToPx = 25; 60 61 test(function() { 62 assert_true(MathMLFeatureDetection.has_operator_spacing()); 63 assert_approx_equals(spaceBefore("complex1"), emToPx, epsilon); 64 assert_approx_equals(spaceAfter("complex1"), emToPx, epsilon); 65 }, "complex space-like subtree"); 66 67 test(function() { 68 assert_true(MathMLFeatureDetection.has_operator_spacing()); 69 assert_approx_equals(spaceBefore("complex1-bis"), emToPx, epsilon); 70 assert_approx_equals(spaceAfter("complex1-bis"), emToPx, epsilon); 71 }, "complex space-like subtree, from in-flow children"); 72 73 test(function() { 74 assert_true(MathMLFeatureDetection.has_operator_spacing()); 75 assert_approx_equals(spaceBefore("complex2"), 0, epsilon); 76 assert_approx_equals(spaceAfter("complex2"), 2 * emToPx, epsilon); 77 }, "complex non-space-like subtree"); 78 79 test(function() { 80 assert_true(MathMLFeatureDetection.has_operator_spacing()); 81 assert_approx_equals(spaceBefore("complex2-bis"), 0, epsilon); 82 assert_approx_equals(spaceAfter("complex2-bis"), 2 * emToPx, epsilon); 83 }, "complex non-space-like subtree, from in-flow children"); 84 85 done(); 86 } 87 </script> 88 </head> 89 <body> 90 <div id="log"></div> 91 <p> 92 <math> 93 <mn>X</mn> 94 <mrow> 95 <!-- This element is space-like because it is made of nested 96 mrow, mstyle, mpadded, mphantom, mtext, mspace 97 --> 98 <mrow class="testedElement" id="complex1"> 99 <mtext>X</mtext> 100 <mstyle> 101 <mstyle> 102 <mtext>X</mtext> 103 <mtext>X</mtext> 104 </mstyle> 105 <mtext>X</mtext> 106 <mspace width="25px"></mspace> 107 <mpadded> 108 <mtext>X</mtext> 109 <mrow></mrow> 110 <mtext>X</mtext> 111 <mspace width="25px"></mspace> 112 <mphantom> 113 <mtext>X</mtext> 114 <mspace width="25px"></mspace> 115 </mphantom> 116 <mrow> 117 <mtext>X</mtext> 118 <mtext>X</mtext> 119 </mrow> 120 <mspace width="25px"></mspace> 121 </mpadded> 122 <mspace width="25px"></mspace> 123 <mtext>X</mtext> 124 <mspace width="25px"></mspace> 125 <mpadded> 126 <mphantom> 127 <mtext>X</mtext> 128 <mspace width="25px"></mspace> 129 </mphantom> 130 <mtext>X</mtext> 131 <mtext>X</mtext> 132 <mspace width="25px"></mspace> 133 <mtext>X</mtext> 134 <mtext>X</mtext> 135 <mspace width="25px"></mspace> 136 <mphantom> 137 <mtext>X</mtext> 138 <mspace width="25px"></mspace> 139 </mphantom> 140 <mtext>X</mtext> 141 <mtext>X</mtext> 142 <mspace width="25px"></mspace> 143 </mpadded> 144 </mstyle> 145 <mspace width="25px"></mspace> 146 </mrow> 147 <mo lspace="1em" rspace="0em">X</mo> 148 </mrow> 149 <mn>X</mn> 150 </math> 151 </p> 152 <p> 153 <math> 154 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 155 <mn>X</mn> 156 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 157 <mrow> 158 <!-- This element is space-like because it is made of nested 159 mrow, mstyle, mpadded, mphantom, mtext, mspace 160 --> 161 <mrow class="testedElement" id="complex1-bis"> 162 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 163 <mtext>X</mtext> 164 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 165 <mstyle> 166 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 167 <mstyle> 168 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 169 <mtext>X</mtext> 170 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 171 <mtext>X</mtext> 172 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 173 </mstyle> 174 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 175 <mtext>X</mtext> 176 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 177 <mspace width="25px"></mspace> 178 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 179 <mpadded> 180 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 181 <mtext>X</mtext> 182 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 183 <mrow></mrow> 184 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 185 <mtext>X</mtext> 186 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 187 <mspace width="25px"></mspace> 188 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 189 <mphantom> 190 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 191 <mtext>X</mtext> 192 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 193 <mspace width="25px"></mspace> 194 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 195 </mphantom> 196 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 197 <mrow> 198 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 199 <mtext>X</mtext> 200 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 201 <mtext>X</mtext> 202 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 203 </mrow> 204 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 205 <mspace width="25px"></mspace> 206 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 207 </mpadded> 208 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 209 <mspace width="25px"></mspace> 210 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 211 <mtext>X</mtext> 212 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 213 <mspace width="25px"></mspace> 214 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 215 <mpadded> 216 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 217 <mphantom> 218 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 219 <mtext>X</mtext> 220 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 221 <mspace width="25px"></mspace> 222 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 223 </mphantom> 224 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 225 <mtext>X</mtext> 226 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 227 <mtext>X</mtext> 228 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 229 <mspace width="25px"></mspace> 230 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 231 <mtext>X</mtext> 232 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 233 <mtext>X</mtext> 234 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 235 <mspace width="25px"></mspace> 236 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 237 <mphantom> 238 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 239 <mtext>X</mtext> 240 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 241 <mspace width="25px"></mspace> 242 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 243 </mphantom> 244 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 245 <mtext>X</mtext> 246 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 247 <mtext>X</mtext> 248 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 249 <mspace width="25px"></mspace> 250 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 251 </mpadded> 252 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 253 </mstyle> 254 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 255 <mspace width="25px"></mspace> 256 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 257 </mrow> 258 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 259 <mo lspace="1em" rspace="0em">X</mo> 260 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 261 </mrow> 262 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 263 <mn>X</mn> 264 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 265 </math> 266 </p> 267 <p> 268 <math> 269 <mn>X</mn> 270 <mrow> 271 <!-- This element is not space-like. It is made of nested 272 mrow, mstyle, mpadded, mphantom, mtext, mspace but contains 273 one non-space like descendant (an mn element). 274 --> 275 <mrow class="testedElement" id="complex2"> 276 <mtext>X</mtext> 277 <mstyle> 278 <mstyle> 279 <mtext>X</mtext> 280 <mtext>X</mtext> 281 </mstyle> 282 <mtext>X</mtext> 283 <mspace width="25px"></mspace> 284 <mpadded> 285 <mtext>X</mtext> 286 <mrow></mrow> 287 <mtext>X</mtext> 288 <mspace width="25px"></mspace> 289 <mphantom> 290 <mtext>X</mtext> 291 <mspace width="25px"></mspace> 292 </mphantom> 293 <mrow> 294 <mtext>X</mtext> 295 <mtext>X</mtext> 296 </mrow> 297 <mspace width="25px"></mspace> 298 </mpadded> 299 <mspace width="25px"></mspace> 300 <mtext>X</mtext> 301 <mspace width="25px"></mspace> 302 <mpadded> 303 <mphantom> 304 <mn>X</mn> <!-- mn is not space-like --> 305 <mspace width="25px"></mspace> 306 </mphantom> 307 <mtext>X</mtext> 308 <mtext>X</mtext> 309 <mspace width="25px"></mspace> 310 <mtext>X</mtext> 311 <mtext>X</mtext> 312 <mspace width="25px"></mspace> 313 <mphantom> 314 <mtext>X</mtext> 315 <mspace width="25px"></mspace> 316 </mphantom> 317 <mtext>X</mtext> 318 <mtext>X</mtext> 319 <mspace width="25px"></mspace> 320 </mpadded> 321 </mstyle> 322 <mspace width="25px"></mspace> 323 </mrow> 324 <mo lspace="1em" rspace="0em">X</mo> 325 </mrow> 326 <mn>X</mn> 327 </math> 328 </p> 329 <p> 330 <math> 331 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 332 <mn>X</mn> 333 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 334 <mrow> 335 <!-- This element is not space-like. It is made of nested 336 mrow, mstyle, mpadded, mphantom, mtext, mspace but contains 337 one non-space like descendant (an mn element). 338 --> 339 <mrow class="testedElement" id="complex2-bis"> 340 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 341 <mtext>X</mtext> 342 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 343 <mstyle> 344 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 345 <mstyle> 346 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 347 <mtext>X</mtext> 348 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 349 <mtext>X</mtext> 350 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 351 </mstyle> 352 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 353 <mtext>X</mtext> 354 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 355 <mspace width="25px"></mspace> 356 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 357 <mpadded> 358 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 359 <mtext>X</mtext> 360 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 361 <mrow></mrow> 362 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 363 <mtext>X</mtext> 364 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 365 <mspace width="25px"></mspace> 366 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 367 <mphantom> 368 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 369 <mtext>X</mtext> 370 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 371 <mspace width="25px"></mspace> 372 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 373 </mphantom> 374 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 375 <mrow> 376 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 377 <mtext>X</mtext> 378 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 379 <mtext>X</mtext> 380 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 381 </mrow> 382 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 383 <mspace width="25px"></mspace> 384 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 385 </mpadded> 386 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 387 <mspace width="25px"></mspace> 388 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 389 <mtext>X</mtext> 390 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 391 <mspace width="25px"></mspace> 392 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 393 <mpadded> 394 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 395 <mphantom> 396 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 397 <mn>X</mn> <!-- mn is not space-like --> 398 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 399 <mspace width="25px"></mspace> 400 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 401 </mphantom> 402 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 403 <mtext>X</mtext> 404 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 405 <mtext>X</mtext> 406 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 407 <mspace width="25px"></mspace> 408 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 409 <mtext>X</mtext> 410 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 411 <mtext>X</mtext> 412 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 413 <mspace width="25px"></mspace> 414 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 415 <mphantom> 416 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 417 <mtext>X</mtext> 418 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 419 <mspace width="25px"></mspace> 420 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 421 </mphantom> 422 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 423 <mtext>X</mtext> 424 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 425 <mtext>X</mtext> 426 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 427 <mspace width="25px"></mspace> 428 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 429 </mpadded> 430 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 431 </mstyle> 432 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 433 <mspace width="25px"></mspace> 434 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 435 </mrow> 436 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 437 <mo lspace="1em" rspace="0em">X</mo> 438 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 439 </mrow> 440 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 441 <mn>X</mn> 442 <mn class="oof1">0</mn><mn class="oof2">1</mn><mn class="nobox">2</mn> 443 </math> 444 </p> 445 </body> 446 </html>