no-spacing.html (4607B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>No spacing in elements</title> 6 <meta name="assert" content="Spacing is not added around operators when an element does not use mrow layout. However, when the element is embellished, spacing of the core mo is added around it."> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#embellished-operators"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#fractions-mfrac"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#horizontally-group-sub-expressions-mrow"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 11 <link rel="help" href="https://w3c.github.io/mathml-core/#prescripts-and-tensor-indices-mmultiscripts"> 12 <link rel="help" href="https://w3c.github.io/mathml-core/#radicals-msqrt-mroot"> 13 <link rel="help" href="https://w3c.github.io/mathml-core/#subscripts-and-superscripts-msub-msup-msubsup"> 14 <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> 15 <script src="/mathml/support/feature-detection.js"></script> 16 <script src="/mathml/support/fonts.js"></script> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 20 <script type="text/javascript"> 21 setup({ explicit_done: true }); 22 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 23 function runTests() 24 { 25 Array.from(document.getElementsByClassName("testedElement")).forEach((e) => { 26 test(function() { 27 assert_true(MathMLFeatureDetection.has_operator_spacing()); 28 let box = e.getBoundingClientRect(); 29 let spacing = 100; 30 assert_less_than_equal(box.width, spacing); 31 }, `Spacing inside <${e.tagName}>.`); 32 33 test(function() { 34 assert_true(MathMLFeatureDetection.has_operator_spacing()); 35 let box = e.parentNode.getBoundingClientRect(); 36 let spacing = 100; 37 if (e.classList.contains("embellished")) 38 assert_greater_than_equal(box.width, spacing * 2); 39 else 40 assert_less_than_equal(box.width, spacing); 41 }, `Spacing around <${e.tagName}>.`); 42 }); 43 done(); 44 } 45 </script> 46 <style> 47 .testedElement { 48 background: lightgreen; 49 } 50 math { 51 background: lightblue; 52 } 53 math, math * { 54 font: 25px/1 Ahem; 55 } 56 </style> 57 </head> 58 <body> 59 <div id="log"></div> 60 <p> 61 <math> 62 <mfrac class="testedElement embellished"> 63 <mo lspace="100px" rspace="100px">X</mo> 64 <mo lspace="100px" rspace="100px">X</mo> 65 </mfrac> 66 </math> 67 </p> 68 <p> 69 <math> 70 <msub class="testedElement embellished"> 71 <mo lspace="100px" rspace="100px">X</mo> 72 <mo lspace="100px" rspace="100px">X</mo> 73 </msub> 74 </math> 75 </p> 76 <p> 77 <math> 78 <msup class="testedElement embellished"> 79 <mo lspace="100px" rspace="100px">X</mo> 80 <mo lspace="100px" rspace="100px">X</mo> 81 </msup> 82 </math> 83 </p> 84 <p> 85 <math> 86 <msubsup class="testedElement embellished"> 87 <mo lspace="100px" rspace="100px">X</mo> 88 <mo lspace="100px" rspace="100px">X</mo> 89 <mo lspace="100px" rspace="100px">X</mo> 90 </msubsup> 91 </math> 92 </p> 93 <p> 94 <math> 95 <mmultiscripts class="testedElement embellished"> 96 <mo lspace="100px" rspace="100px">X</mo> 97 <mo lspace="100px" rspace="100px">X</mo> 98 <mo lspace="100px" rspace="100px">X</mo> 99 <mprescripts/> 100 <mo lspace="100px" rspace="100px">X</mo> 101 <mo lspace="100px" rspace="100px">X</mo> 102 </mmultiscripts> 103 </math> 104 </p> 105 <p> 106 <math> 107 <munder class="testedElement embellished"> 108 <mo lspace="100px" rspace="100px">X</mo> 109 <mo lspace="100px" rspace="100px">X</mo> 110 </munder> 111 </math> 112 </p> 113 <p> 114 <math> 115 <mover class="testedElement embellished"> 116 <mo lspace="100px" rspace="100px">X</mo> 117 <mo lspace="100px" rspace="100px">X</mo> 118 </mover> 119 </math> 120 </p> 121 <p> 122 <math> 123 <munderover class="testedElement embellished"> 124 <mo lspace="100px" rspace="100px">X</mo> 125 <mo lspace="100px" rspace="100px">X</mo> 126 <mo lspace="100px" rspace="100px">X</mo> 127 </munderover> 128 </math> 129 </p> 130 <p> 131 <math> 132 <mroot class="testedElement"> 133 <mtext>X</mtext> 134 <mo lspace="100px" rspace="100px">X</mo> 135 </mroot> 136 </math> 137 </p> 138 </body> 139 </html>