space-like-002.html (5731B)
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("maction1"), emToPx, epsilon); 54 assert_approx_equals(spaceAfter("maction1"), emToPx, epsilon); 55 }, "space-like maction"); 56 57 test(function() { 58 assert_true(MathMLFeatureDetection.has_operator_spacing()); 59 assert_approx_equals(spaceBefore("maction2"), emToPx, epsilon); 60 assert_approx_equals(spaceAfter("maction2"), emToPx, epsilon); 61 }, "space-like maction (no first child)"); 62 63 test(function() { 64 assert_approx_equals(spaceBefore("maction3"), 0, epsilon); 65 assert_true(MathMLFeatureDetection.has_operator_spacing()); 66 assert_approx_equals(spaceAfter("maction3"), 2 * emToPx, epsilon); 67 }, "non-space like maction (first child not space-like)"); 68 69 test(function() { 70 assert_true(MathMLFeatureDetection.has_operator_spacing()); 71 assert_approx_equals(spaceBefore("semantics1"), emToPx, epsilon); 72 assert_approx_equals(spaceAfter("semantics1"), emToPx, epsilon); 73 }, "space-like semantics"); 74 75 test(function() { 76 assert_true(MathMLFeatureDetection.has_operator_spacing()); 77 assert_approx_equals(spaceBefore("semantics2"), emToPx, epsilon); 78 assert_approx_equals(spaceAfter("semantics2"), emToPx, epsilon); 79 }, "space-like semantics (no first child)"); 80 81 test(function() { 82 assert_true(MathMLFeatureDetection.has_operator_spacing()); 83 assert_approx_equals(spaceBefore("semantics3"), 0, epsilon); 84 assert_approx_equals(spaceAfter("semantics3"), 2 * emToPx, epsilon); 85 }, "non-space like semantics (first child not space-like)"); 86 87 done(); 88 } 89 </script> 90 </head> 91 <body> 92 <div id="log"></div> 93 <p> 94 <math> 95 <mn>X</mn> 96 <mrow> 97 <!-- maction is space-like when its first child exists and is space-like --> 98 <maction id="maction1" class="testedElement" actiontype="statusline"> 99 <mtext>X</mtext> 100 <mtext>STATUS MESSAGE</mtext> 101 </maction> 102 <mo lspace="1em" rspace="0em">X</mo> 103 </mrow> 104 <mn>X</mn> 105 </math> 106 </p> 107 <p> 108 <math> 109 <mn>X</mn> 110 <mrow> 111 <!-- maction is not space-like when its first does not exist-like --> 112 <maction id="maction2" class="testedElement" actiontype="statusline"> 113 </maction> 114 <mo lspace="1em" rspace="0em">X</mo> 115 </mrow> 116 <mn>X</mn> 117 </math> 118 </p> 119 <p> 120 <math> 121 <mn>X</mn> 122 <mrow> 123 <!-- maction is not space-like when its first is not space-like --> 124 <maction id="maction3" class="testedElement" actiontype="statusline"> 125 <mn>1</mn> 126 <mtext>STATUS MESSAGE</mtext> 127 </maction> 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 <!-- semantics is space-like when its first child exists and is space-like --> 138 <semantics id="semantics1" class="testedElement" actiontype="statusline"> 139 <mtext>X</mtext> 140 <annotation>TEXT ANNOTATION</annotation> 141 </semantics> 142 <mo lspace="1em" rspace="0em">X</mo> 143 </mrow> 144 <mn>X</mn> 145 </math> 146 </p> 147 <p> 148 <math> 149 <mn>X</mn> 150 <mrow> 151 <!-- semantics is not space-like when its first does not exist-like --> 152 <semantics id="semantics2" class="testedElement" actiontype="statusline"> 153 </semantics> 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 <!-- semantics is not space-like when its first is not space-like --> 164 <semantics id="semantics3" class="testedElement" actiontype="statusline"> 165 <mn>1</mn> 166 <annotation>TEXT ANNOTATION</annotation> 167 </semantics> 168 <mo lspace="1em" rspace="0em">X</mo> 169 </mrow> 170 <mn>X</mn> 171 </math> 172 </p> 173 </body> 174 </html>