operator-dictionary-combining.html (4386B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Operator dictionary (combining char)</title> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo"> 8 <link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes"> 9 <link rel="help" href="https://w3c.github.io/mathml-core/#operator-dictionary"> 10 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow"> 11 <link rel="stylesheet" href="./support/operator-dictionary-tests.css"/> 12 <meta name="assert" content="Verify special handling of 2-char operator with a combining character"> 13 <script src="/resources/testharness.js"></script> 14 <script src="/resources/testharnessreport.js"></script> 15 <script src="/mathml/support/feature-detection.js"></script> 16 <style> 17 mo { 18 color: blue; 19 } 20 mn { 21 background: black; 22 } 23 </style> 24 <script> 25 setup({ explicit_done: true }); 26 window.addEventListener("load", runTests); 27 28 function spaceBetween(element, i, j) { 29 return element.children[j].getBoundingClientRect().left - 30 element.children[i].getBoundingClientRect().right; 31 } 32 function runTests() { 33 var epsilon = 1; 34 var emToPx = 25; 35 36 [ 37 "equal", 38 "vertical_bar", 39 "left_normal_factor_semidirect_product", 40 "there_exists", 41 ].forEach(id => { 42 var div = document.getElementById(id); 43 var ref = div.getElementsByClassName("reference")[0]; 44 var totalSpaceRef = spaceBetween(ref, 0, 2); 45 var lspaceRef = spaceBetween(ref, 0, 1); 46 var rspaceRef = spaceBetween(ref, 1, 2); 47 Array.from(div.getElementsByClassName("combining")).forEach(element => { 48 test(function() { 49 assert_true(MathMLFeatureDetection.has_operator_spacing()); 50 var totalSpace = spaceBetween(element, 0, 2); 51 var lspace = spaceBetween(element, 0, 1); 52 var rspace = spaceBetween(element, 1, 2); 53 assert_approx_equals(totalSpace, totalSpaceRef, epsilon); 54 assert_approx_equals(rspace, rspaceRef, epsilon); 55 assert_approx_equals(lspace, lspaceRef, epsilon); 56 }, `Spacing around ${element.children[1].textContent}`); 57 }); 58 }); 59 60 done(); 61 } 62 </script> 63 </head> 64 <body> 65 <div id="log"></div> 66 <div id="equal"> 67 <p> 68 <math class="reference"> 69 <mn> </mn> 70 <mo>=</mo> 71 <mn> </mn> 72 </math> 73 </p> 74 <p> 75 <math class="combining"> 76 <mn> </mn> 77 <mo>≠</mo> 78 <mn> </mn> 79 </math> 80 </p> 81 <p> 82 <math class="combining"> 83 <mn> </mn> 84 <mo>=⃒</mo> 85 <mn> </mn> 86 </math> 87 </p> 88 </div> 89 <div id="vertical_bar"> 90 <p> 91 <math class="reference"> 92 <mn> </mn> 93 <mo stretchy="false">|</mo> 94 <mn> </mn> 95 </math> 96 </p> 97 <p> 98 <math class="combining"> 99 <mn> </mn> 100 <mo stretchy="false">|̸</mo> 101 <mn> </mn> 102 </math> 103 </p> 104 <p> 105 <math class="combining"> 106 <mn> </mn> 107 <mo stretchy="false">|⃒</mo> 108 <mn> </mn> 109 </math> 110 </p> 111 </div> 112 <div id="left_normal_factor_semidirect_product"> 113 <p> 114 <math class="reference"> 115 <mn> </mn> 116 <mo stretchy="false">⋉</mo> 117 <mn> </mn> 118 </math> 119 </p> 120 <p> 121 <math class="combining"> 122 <mn> </mn> 123 <mo stretchy="false">⋉̸</mo> 124 <mn> </mn> 125 </math> 126 </p> 127 <p> 128 <math class="combining"> 129 <mn> </mn> 130 <mo stretchy="false">⋉⃒</mo> 131 <mn> </mn> 132 </math> 133 </p> 134 </div> 135 <div id="there_exists"> 136 <p> 137 <math class="reference"> 138 <mn> </mn> 139 <mo stretchy="false">∃</mo> 140 <mn> </mn> 141 </math> 142 </p> 143 <p> 144 <math class="combining"> 145 <mn> </mn> 146 <mo stretchy="false">∄</mo> 147 <mn> </mn> 148 </math> 149 </p> 150 <p> 151 <math class="combining"> 152 <mn> </mn> 153 <mo stretchy="false">∃⃒</mo> 154 <mn> </mn> 155 </math> 156 </p> 157 </div> 158 </body> 159 </html>