scriptlevel-001.html (8479B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Automatic scriptlevel</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#the-mathvariant-attribute"> 7 <link rel="help" href="https://w3c.github.io/mathml-core/#the-displaystyle-and-scriptlevel-attributes"> 8 <link rel="stylesheet" href="/fonts/ahem.css"> 9 <meta name="assert" content="Verify automatic scriptlevel changes"> 10 <style> 11 #container, math { 12 /* Ahem font does not have a MATH table so the font-size scale factor 13 is always 0.71^{computed - inherited math script level} */ 14 font: 100px/1 Ahem; 15 } 16 </style> 17 <script src="/resources/testharness.js"></script> 18 <script src="/resources/testharnessreport.js"></script> 19 <script src="/mathml/support/mathml-fragments.js"></script> 20 <script> 21 setup({ explicit_done: true }); 22 window.addEventListener("load", runTests); 23 function fontSize(element) { 24 return parseFloat((/(.+)px/).exec(window.getComputedStyle(element).getPropertyValue("font-size"))[1]); 25 } 26 function runTests() { 27 var container = document.getElementById("container"); 28 var epsilon = .1 29 var fontSizeAtScriptLevelZero = fontSize(container); 30 31 test(function() { 32 var element = document.getElementById("mfrac_displaystyle"); 33 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "numerator"); 34 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "denominator"); 35 }, "automatic scriptlevel on mfrac (displaystyle=true)"); 36 37 test(function() { 38 var element = document.getElementById("mfrac_notdisplaystyle"); 39 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero * .71, epsilon, "numerator"); 40 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "denominator"); 41 }, "automatic scriptlevel on mfrac (displaystyle=false)"); 42 43 test(function() { 44 var element = document.getElementsByTagName("mroot")[0]; 45 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 46 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71 * .71, epsilon, "index"); 47 }, "automatic scriptlevel on mroot"); 48 49 ["msub", "msup", "msubsup", "munder", "mover", "munderover", "mmultiscripts"].forEach(tag => { 50 test(function() { 51 var element = document.getElementsByTagName(tag)[0]; 52 for (var i = 0; i < element.children.length; i++) 53 assert_approx_equals(fontSize(element.children[i]), i > 0 ? fontSizeAtScriptLevelZero * .71 : fontSizeAtScriptLevelZero, epsilon, `child ${i}`); 54 }, `automatic scriptlevel on ${tag}`); 55 }); 56 57 test(function() { 58 var element = document.getElementById("munder-accentunder") 59 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 60 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); 61 }, `automatic scriptlevel on munder (accentunder=true)`); 62 63 test(function() { 64 var element = document.getElementById("mover-accent") 65 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 66 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "over"); 67 }, `automatic scriptlevel on mover (accent=true)`); 68 69 test(function() { 70 var element = document.getElementById("munderover-accentunder") 71 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 72 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); 73 assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over"); 74 }, `automatic scriptlevel on munderover (accentunder=true)`); 75 76 test(function() { 77 var element = document.getElementById("munderover-accent") 78 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 79 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under"); 80 assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); 81 }, `automatic scriptlevel on munderover (accent=true)`); 82 83 test(function() { 84 var element = document.getElementById("munderover-case-insensitive") 85 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 86 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); 87 assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); 88 }, "checking case-insensitivity accent/accentunder"); 89 90 test(function() { 91 var element = document.getElementById("munderover-dynamic") 92 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 93 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero * .71, epsilon, "under"); 94 assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero, epsilon, "over"); 95 96 element.removeAttribute("accent"); 97 element.setAttribute("accentunder", "true"); 98 assert_approx_equals(fontSize(element.children[0]), fontSizeAtScriptLevelZero, epsilon, "base"); 99 assert_approx_equals(fontSize(element.children[1]), fontSizeAtScriptLevelZero, epsilon, "under"); 100 assert_approx_equals(fontSize(element.children[2]), fontSizeAtScriptLevelZero * .71, epsilon, "over"); 101 }, "checking dynamic accent/accentunder"); 102 103 done(); 104 } 105 </script> 106 </head> 107 <body> 108 <div id="log"></div> 109 <div id="container"> 110 <p> 111 <math displaystyle="true"> 112 <mfrac id="mfrac_displaystyle"> 113 <mn>0</mn> 114 <mn>1</mn> 115 </mfrac> 116 </math> 117 118 <math displaystyle="false"> 119 <mfrac id="mfrac_notdisplaystyle"> 120 <mn>0</mn> 121 <mn>1</mn> 122 </mfrac> 123 </math> 124 </p> 125 <p> 126 <math> 127 <mroot> 128 <mn>0</mn> 129 <mn>1</mn> 130 </mroot> 131 </math> 132 </p> 133 <p> 134 <math> 135 <msub> 136 <mn>0</mn> 137 <mn>1</mn> 138 </msub> 139 </math> 140 <math> 141 <msup> 142 <mn>0</mn> 143 <mn>1</mn> 144 </msup> 145 </math> 146 <math> 147 <msubsup> 148 <mn>0</mn> 149 <mn>1</mn> 150 <mn>2</mn> 151 </msubsup> 152 </math> 153 <math> 154 <munder> 155 <mn>0</mn> 156 <mn>1</mn> 157 </munder> 158 </math> 159 <math> 160 <mover> 161 <mn>0</mn> 162 <mn>1</mn> 163 </mover> 164 </math> 165 <math> 166 <munderover> 167 <mn>0</mn> 168 <mn>1</mn> 169 <mn>2</mn> 170 </munderover> 171 </math> 172 <math> 173 <mmultiscripts> 174 <mn>0</mn> 175 <mn>1</mn> 176 <mn>2</mn> 177 <mn>3</mn> 178 <mn>4</mn> 179 <mprescripts/> 180 <mn>6</mn> 181 <mn>7</mn> 182 <mn>8</mn> 183 <mn>9</mn> 184 </mmultiscripts> 185 </math> 186 </p> 187 <p> 188 <math> 189 <munder id="munder-accentunder" accentunder="true"> 190 <mn>0</mn> 191 <mn>1</mn> 192 </munder> 193 </math> 194 <math> 195 <mover id="mover-accent" accent="true"> 196 <mn>0</mn> 197 <mn>1</mn> 198 </mover> 199 </math> 200 <math> 201 <munderover id="munderover-accent" accent="true"> 202 <mn>0</mn> 203 <mn>1</mn> 204 <mn>2</mn> 205 </munderover> 206 </math> 207 <math> 208 <munderover id="munderover-accentunder" accentunder="true"> 209 <mn>0</mn> 210 <mn>1</mn> 211 <mn>2</mn> 212 </munderover> 213 </math> 214 </p> 215 <p> 216 <math> 217 <munderover id="munderover-case-insensitive" accent="TrUe" accentunder="TrUe"> 218 <mn>0</mn> 219 <mn>1</mn> 220 <mn>2</mn> 221 </munderover> 222 </math> 223 </p> 224 <p> 225 <math> 226 <munderover id="munderover-dynamic" accent="true"> 227 <mn>0</mn> 228 <mn>1</mn> 229 <mn>2</mn> 230 </munderover> 231 </math> 232 </p> 233 </div> 234 </body> 235 </html>