| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <meta charset="utf-8"> |
| 5 <title>Underscripts and Overscripts parameters</title> |
| 6 <link rel="help" href="http://www.mathml-association.org/MathMLinHTML5/S3.html#S
S4"> |
| 7 <meta name="assert" content="Elements munder, mover, munderover correctly use un
derbar/overbar and AccentBaseHeight parameters from the MATH table."> |
| 8 <script src="/resources/testharness.js"></script> |
| 9 <script src="/resources/testharnessreport.js"></script> |
| 10 <style> |
| 11 math, mspace, mo { |
| 12 font-size: 10px; |
| 13 } |
| 14 @font-face { |
| 15 font-family: accentbaseheight4000underbarextradescender5000; |
| 16 src: url("/fonts/math/underover-accentbaseheight4000-underbarextradescender5
000.woff"); |
| 17 } |
| 18 @font-face { |
| 19 font-family: accentbaseheight4000underbarverticalgap7000; |
| 20 src: url("/fonts/math/underover-accentbaseheight4000-underbarverticalgap7000
.woff"); |
| 21 } |
| 22 @font-face { |
| 23 font-family: accentbaseheight4000overbarextraascender3000; |
| 24 src: url("/fonts/math/underover-accentbaseheight4000-overbarextraascender300
0.woff"); |
| 25 } |
| 26 @font-face { |
| 27 font-family: accentbaseheight4000overbarverticalgap11000; |
| 28 src: url("/fonts/math/underover-accentbaseheight4000-overbarverticalgap11000
.woff"); |
| 29 } |
| 30 </style> |
| 31 <script> |
| 32 var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000 |
| 33 var epsilon = 2; |
| 34 var axisBaseHeight = 4000 * emToPx; |
| 35 var shortBaseHeight = 3000 * emToPx; // shortBaseHeight < axisBaseHeight |
| 36 var tallBaseHeight = 5000 * emToPx; // tallBaseHeight > axisBaseHeight |
| 37 |
| 38 function getBox(aId) { |
| 39 return document.getElementById(aId).getBoundingClientRect(); |
| 40 } |
| 41 |
| 42 setup({ explicit_done: true }); |
| 43 window.addEventListener("load", function() { |
| 44 document.fonts.ready.then(runTests); |
| 45 }); |
| 46 |
| 47 function runTests() { |
| 48 test(function() { |
| 49 for (var i = 1; i <= 4; i++) { |
| 50 for (var j = 1; j <= 6; j++) { |
| 51 var baseId = ("base00" + i) + j; |
| 52 assert_approx_equals(getBox("ref00" + i).bottom, |
| 53 getBox(baseId).bottom, |
| 54 epsilon, |
| 55 "alignment of " + baseId); |
| 56 } |
| 57 } |
| 58 }, "Baseline alignment"); |
| 59 |
| 60 test(function() { |
| 61 for (var i = 1; i <= 4; i++) { |
| 62 for (var j = 1; j <= 6; j++) { |
| 63 var baseId = ("base00" + i) + j; |
| 64 assert_approx_equals(getBox(baseId).height, |
| 65 j == 2 || j == 5 ? |
| 66 tallBaseHeight :shortBaseHeight, |
| 67 epsilon, |
| 68 "height of " + baseId); |
| 69 } |
| 70 } |
| 71 }, "Heights of bases"); |
| 72 |
| 73 test(function() { |
| 74 var v = 5000 * emToPx; |
| 75 assert_approx_equals(getBox("ref001").bottom - getBox("over0014").bottom, |
| 76 shortBaseHeight, epsilon, |
| 77 "munderover: nonaccent over short base"); |
| 78 assert_approx_equals(getBox("ref001").bottom - getBox("over0015").bottom, |
| 79 tallBaseHeight, epsilon, |
| 80 "munderover: accent over tall base"); |
| 81 assert_approx_equals(getBox("ref001").bottom - getBox("over0016").bottom, |
| 82 axisBaseHeight, epsilon, |
| 83 "munderover: accent over short base"); |
| 84 for (var j = 1; j <= 6; j++) { |
| 85 var elId = "el001" + j; |
| 86 var baseId = "base001" + j; |
| 87 var underId = "under001" + j; |
| 88 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, |
| 89 0, epsilon, |
| 90 "gap between " + baseId + " and " + underId); |
| 91 assert_approx_equals(getBox(elId).bottom - getBox(underId).bottom, |
| 92 v, epsilon, |
| 93 "extra descender below " + underId); |
| 94 } |
| 95 }, "AccentBaseHeight, UnderbarExtraDescender"); |
| 96 |
| 97 test(function() { |
| 98 var v = 7000 * emToPx; |
| 99 assert_approx_equals(getBox("ref002").bottom - getBox("over0024").bottom, |
| 100 shortBaseHeight, epsilon, |
| 101 "munderover: nonaccent over short base"); |
| 102 assert_approx_equals(getBox("ref002").bottom - getBox("over0025").bottom, |
| 103 tallBaseHeight, epsilon, |
| 104 "munderover: accent over tall base"); |
| 105 assert_approx_equals(getBox("ref002").bottom - getBox("over0026").bottom, |
| 106 axisBaseHeight, epsilon, |
| 107 "munderover: accent over short base"); |
| 108 for (var j = 1; j <= 6; j++) { |
| 109 var elId = "el002" + j; |
| 110 var baseId = "base002" + j; |
| 111 var underId = "under002" + j; |
| 112 var gap = (j == 2 || j == 3 ? 0 : v); |
| 113 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, |
| 114 gap, epsilon, |
| 115 "gap between " + baseId + " and " + underId); |
| 116 } |
| 117 }, "AccentBaseHeight, UnderbarVerticalGap"); |
| 118 |
| 119 test(function() { |
| 120 var v = 3000 * emToPx; |
| 121 assert_approx_equals(getBox("ref003").bottom - getBox("over0031").bottom, |
| 122 shortBaseHeight, epsilon, |
| 123 "mover: nonaccent over short base"); |
| 124 assert_approx_equals(getBox("ref003").bottom - getBox("over0032").bottom, |
| 125 tallBaseHeight, epsilon, |
| 126 "mover: accent over tall base"); |
| 127 assert_approx_equals(getBox("ref003").bottom - getBox("over0033").bottom, |
| 128 axisBaseHeight, epsilon, |
| 129 "mover: accent over short base"); |
| 130 assert_approx_equals(getBox("ref003").bottom - getBox("over0034").bottom, |
| 131 shortBaseHeight, epsilon, |
| 132 "munderover: nonaccent over short base"); |
| 133 assert_approx_equals(getBox("ref003").bottom - getBox("over0035").bottom, |
| 134 tallBaseHeight, epsilon, |
| 135 "munderover: accent over tall base"); |
| 136 assert_approx_equals(getBox("ref003").bottom - getBox("over0036").bottom, |
| 137 axisBaseHeight, epsilon, |
| 138 "munderover: accent over short base"); |
| 139 for (var j = 1; j <= 6; j++) { |
| 140 var elId = "el003" + j; |
| 141 var baseId = "base003" + j; |
| 142 if (j >= 4) { |
| 143 var underId = "under003" + j; |
| 144 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, |
| 145 0, epsilon, |
| 146 "gap between " + baseId + " and " + underId); |
| 147 } |
| 148 var overId = "over003" + j; |
| 149 assert_approx_equals(getBox(overId).top - getBox(elId).top, |
| 150 v, epsilon, |
| 151 "extra ascender below " + overId); |
| 152 } |
| 153 }, "AccentBaseHeight, OverbarExtraAscender"); |
| 154 |
| 155 test(function() { |
| 156 v = 11000 * emToPx; |
| 157 assert_approx_equals(getBox("ref004").bottom - getBox("over0041").bottom, |
| 158 shortBaseHeight + v, epsilon, |
| 159 "mover: nonaccent over short base"); |
| 160 assert_approx_equals(getBox("ref004").bottom - getBox("over0042").bottom, |
| 161 tallBaseHeight, epsilon, |
| 162 "mover: accent over tall base"); |
| 163 assert_approx_equals(getBox("ref004").bottom - getBox("over0043").bottom, |
| 164 axisBaseHeight, epsilon, |
| 165 "mover: accent over short base"); |
| 166 assert_approx_equals(getBox("ref004").bottom - getBox("over0044").bottom, |
| 167 shortBaseHeight + v, epsilon, |
| 168 "munderover: nonaccent over short base"); |
| 169 assert_approx_equals(getBox("ref004").bottom - getBox("over0045").bottom, |
| 170 tallBaseHeight, epsilon, |
| 171 "munderover: accent over tall base"); |
| 172 assert_approx_equals(getBox("ref004").bottom - getBox("over0046").bottom, |
| 173 axisBaseHeight, epsilon, |
| 174 "munderover: accent over short base"); |
| 175 for (var j = 4; j <= 6; j++) { |
| 176 var baseId = "base004" + j; |
| 177 var underId = "under004" + j; |
| 178 assert_approx_equals(getBox(underId).top - getBox(baseId).bottom, |
| 179 0, epsilon, |
| 180 "gap between " + baseId + " and " + underId); |
| 181 } |
| 182 }, "AccentBaseHeight, OverbarVerticalGap"); |
| 183 |
| 184 done(); |
| 185 } |
| 186 </script> |
| 187 </head> |
| 188 <body> |
| 189 <p> |
| 190 <math style="font-family: accentbaseheight4000underbarextradescender5000;"
> |
| 191 <mspace id="ref001" height="1em" width="3em" mathbackground="green"/> |
| 192 <munder mathbackground="cyan" id="el0011"> |
| 193 <mspace id="base0011" height="3em" width="1em" mathbackground="black"/
> |
| 194 <mo id="under0011" mathcolor="blue">°</mo> |
| 195 </munder> |
| 196 <munder mathbackground="cyan" id="el0012"> |
| 197 <mspace id="base0012" height="5em" width="1em" mathbackground="black"/
> |
| 198 <mo id="under0012" mathcolor="blue">˘</mo> |
| 199 </munder> |
| 200 <munder mathbackground="cyan" id="el0013"> |
| 201 <mspace id="base0013" height="3em" width="1em" mathbackground="black"/
> |
| 202 <mo id="under0013" mathcolor="blue">˘</mo> |
| 203 </munder> |
| 204 <munderover mathbackground="cyan" id="el0014"> |
| 205 <mspace id="base0014" height="3em" width="1em" mathbackground="black"/
> |
| 206 <mo id="under0014" mathcolor="blue">°</mo> |
| 207 <mo id="over0014" mathcolor="red">°</mo> |
| 208 </munderover> |
| 209 <munderover mathbackground="cyan" id="el0015" accent="true"> |
| 210 <mspace id="base0015" height="5em" width="1em" mathbackground="black"/
> |
| 211 <mo id="under0015" mathcolor="blue">˘</mo> |
| 212 <mo id="over0015" mathcolor="red">˘</mo> |
| 213 </munderover> |
| 214 <munderover mathbackground="cyan" id="el0016" accent="true"> |
| 215 <mspace id="base0016" height="3em" width="1em" mathbackground="black"/
> |
| 216 <mo id="under0016" mathcolor="blue">˘</mo> |
| 217 <mo id="over0016" mathcolor="red">˘</mo> |
| 218 </munderover> |
| 219 </math> |
| 220 </p> |
| 221 <hr/> |
| 222 <p> |
| 223 <math style="font-family: accentbaseheight4000underbarverticalgap7000;"> |
| 224 <mspace id="ref002" height="1em" width="3em" mathbackground="green"/> |
| 225 <munder mathbackground="cyan" id="el0021" accentunder="false"> |
| 226 <mspace id="base0021" height="3em" width="1em" mathbackground="black"/
> |
| 227 <mo id="under0021" mathcolor="blue">˘</mo> |
| 228 </munder> |
| 229 <munder mathbackground="cyan" id="el0022"> |
| 230 <mspace id="base0022" height="5em" width="1em" mathbackground="black"/
> |
| 231 <mo id="under0022" mathcolor="blue" accent="true">˘</mo> |
| 232 </munder> |
| 233 <munder mathbackground="cyan" id="el0023"> |
| 234 <mspace id="base0023" height="3em" width="1em" mathbackground="black"/
> |
| 235 <mo id="under0023" mathcolor="blue" accent="true">°</mo> |
| 236 </munder> |
| 237 <munderover mathbackground="cyan" id="el0024"> |
| 238 <mspace id="base0024" height="3em" width="1em" mathbackground="black"/
> |
| 239 <mo id="under0024" mathcolor="blue" accent="false">˘</mo> |
| 240 <mo id="over0024" mathcolor="red" accent="false">˘</mo> |
| 241 </munderover> |
| 242 <munderover mathbackground="cyan" id="el0025"> |
| 243 <mspace id="base0025" height="5em" width="1em" mathbackground="black"/
> |
| 244 <mo id="under0025" mathcolor="blue" accent="false">˘</mo> |
| 245 <mo id="over0025" mathcolor="red">˘</mo> |
| 246 </munderover> |
| 247 <munderover mathbackground="cyan" id="el0026"> |
| 248 <mspace id="base0026" height="3em" width="1em" mathbackground="black"/
> |
| 249 <mo id="under0026" mathcolor="blue" accent="false">˘</mo> |
| 250 <mo id="over0026" mathcolor="red">˘</mo> |
| 251 </munderover> |
| 252 </math> |
| 253 </p> |
| 254 <hr/> |
| 255 <p> |
| 256 <math style="font-family: accentbaseheight4000overbarextraascender3000;"> |
| 257 <mspace id="ref003" height="1em" width="3em" mathbackground="green"/> |
| 258 <mover mathbackground="cyan" id="el0031"> |
| 259 <mspace id="base0031" height="3em" width="1em" mathbackground="black"/
> |
| 260 <mo id="over0031" mathcolor="red">°</mo> |
| 261 </mover> |
| 262 <mover mathbackground="cyan" id="el0032" accent="true"> |
| 263 <mspace id="base0032" height="5em" width="1em" mathbackground="black"/
> |
| 264 <mo id="over0032" mathcolor="red">°</mo> |
| 265 </mover> |
| 266 <mover mathbackground="cyan" id="el0033"> |
| 267 <mspace id="base0033" height="3em" width="1em" mathbackground="black"/
> |
| 268 <mo id="over0033" mathcolor="red">˘</mo> |
| 269 </mover> |
| 270 <munderover mathbackground="cyan" id="el0034"> |
| 271 <mspace id="base0034" height="3em" width="1em" mathbackground="black"/
> |
| 272 <mo id="under0034" mathcolor="blue">°</mo> |
| 273 <mo id="over0034" mathcolor="red" accent="false">˘</mo> |
| 274 </munderover> |
| 275 <munderover mathbackground="cyan" id="el0035" accent="true"> |
| 276 <mspace id="base0035" height="5em" width="1em" mathbackground="black"/
> |
| 277 <mo id="under0035" mathcolor="blue">˘</mo> |
| 278 <mo id="over0035" mathcolor="red">˘</mo> |
| 279 </munderover> |
| 280 <munderover mathbackground="cyan" id="el0036" accent="true"> |
| 281 <mspace id="base0036" height="3em" width="1em" mathbackground="black"/
> |
| 282 <mo id="under0036" mathcolor="blue">˘</mo> |
| 283 <mo id="over0036" mathcolor="red">˘</mo> |
| 284 </munderover> |
| 285 </math> |
| 286 </p> |
| 287 <hr/> |
| 288 <p> |
| 289 <math style="font-family: accentbaseheight4000overbarverticalgap11000;"> |
| 290 <mspace id="ref004" height="1em" width="3em" mathbackground="green"/> |
| 291 <mover mathbackground="cyan" id="el0041"> |
| 292 <mspace id="base0041" height="3em" width="1em" mathbackground="black"/
> |
| 293 <mo id="over0041" mathcolor="red">°</mo> |
| 294 </mover> |
| 295 <mover mathbackground="cyan" id="el0042" accent="true"> |
| 296 <mspace id="base0042" height="5em" width="1em" mathbackground="black"/
> |
| 297 <mo id="over0042" mathcolor="red">°</mo> |
| 298 </mover> |
| 299 <mover mathbackground="cyan" id="el0043"> |
| 300 <mspace id="base0043" height="3em" width="1em" mathbackground="black"/
> |
| 301 <mo id="over0043" mathcolor="red">˘</mo> |
| 302 </mover> |
| 303 <munderover mathbackground="cyan" id="el0044"> |
| 304 <mspace id="base0044" height="3em" width="1em" mathbackground="black"/
> |
| 305 <mo id="under0044" mathcolor="blue">°</mo> |
| 306 <mo id="over0044" mathcolor="red" accent="false">˘</mo> |
| 307 </munderover> |
| 308 <munderover mathbackground="cyan" id="el0045" accent="true"> |
| 309 <mspace id="base0045" height="5em" width="1em" mathbackground="black"/
> |
| 310 <mo id="under0045" mathcolor="blue">˘</mo> |
| 311 <mo id="over0045" mathcolor="red">˘</mo> |
| 312 </munderover> |
| 313 <munderover mathbackground="cyan" id="el0046" accent="true"> |
| 314 <mspace id="base0046" height="3em" width="1em" mathbackground="black"/
> |
| 315 <mo id="under0046" mathcolor="blue">˘</mo> |
| 316 <mo id="over0046" mathcolor="red">˘</mo> |
| 317 </munderover> |
| 318 </math> |
| 319 </p> |
| 320 <hr/> |
| 321 </body> |
| 322 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2434253002:
Import wpt@7e8373f4bd144e66c88535983aa735b28c934cfe (Closed)
