width-height-006.html (12217B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>content position with width/height</title> 6 <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> 7 <meta name="assert" content="Verify the block-start of the children for misc layout algorithms."/> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 11 <script src="/mathml/support/fonts.js"></script> 12 <style> 13 mn, .text { 14 font: 25px/1 Ahem; 15 color: black; 16 } 17 .test { 18 margin: .5em; 19 } 20 .reference, [data-name] { 21 border: 1px solid blue; 22 margin: 1em; 23 } 24 </style> 25 <script> 26 setup({ explicit_done: true }); 27 window.addEventListener("load", () => { loadAllFonts().then(runTests); }); 28 29 function getBaseLine(element) { 30 return element.parentNode.getElementsByClassName("baseline")[0].getBoundingClientRect().bottom; 31 } 32 33 function runTests() { 34 Array.from(document.getElementsByClassName("test")).forEach(div => { 35 const reference = div.getElementsByClassName("reference")[0]; 36 Array.from(div.querySelectorAll("[data-name]")).forEach(element => { 37 test(() => { 38 const referenceBox = reference.getBoundingClientRect(); 39 const elementBox = element.getBoundingClientRect(); 40 const epsilon = 1; 41 assert_approx_equals(elementBox.width, referenceBox.width, epsilon, `width is preserved`); 42 assert_greater_than(Math.abs(elementBox.height - referenceBox.height), epsilon, `height is modified`); 43 assert_approx_equals(getBaseLine(element) - elementBox.top, getBaseLine(reference) - referenceBox.top, epsilon, `baseline is preserved`); 44 for (let i = 0; i < element.children.length; i++) { 45 const referenceChildBox = reference.children[i].getBoundingClientRect(); 46 const childBox = element.children[i].getBoundingClientRect(); 47 assert_approx_equals(childBox.top - elementBox.top, referenceChildBox.top - referenceBox.top, epsilon, `vertical position of child ${i}`); 48 } 49 }, element.dataset.name); 50 }); 51 }); 52 53 done(); 54 } 55 </script> 56 </head> 57 <body> 58 <div id="log"></div> 59 60 <div class="test"> 61 <math> 62 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 63 <mrow class="reference"> 64 <mn>X</mn> 65 <mn>X</mn> 66 <mn>X</mn> 67 </mrow> 68 </math> 69 <math> 70 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 71 <mrow data-name="mrow" style="height: 10em"> 72 <mn>X</mn> 73 <mn>X</mn> 74 <mn>X</mn> 75 </mrow> 76 </math> 77 <math> 78 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 79 <mrow data-name="mrow (vertical overflow)" style="height: 1em"> 80 <mn>X</mn> 81 <mn>X</mn> 82 <mn>X</mn> 83 </mrow> 84 </math> 85 </div> 86 87 <div class="test"> 88 <math> 89 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 90 <mpadded lspace=".5em" voffset="-1em" class="reference"> 91 <mn>X</mn> 92 <mn>X</mn> 93 <mn>X</mn> 94 </mpadded> 95 </math> 96 <math> 97 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 98 <mpadded lspace=".5em" voffset="-1em" data-name="mpadded" style="height: 10em"> 99 <mn>X</mn> 100 <mn>X</mn> 101 <mn>X</mn> 102 </mpadded> 103 </math> 104 <math> 105 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 106 <mpadded lspace=".5em" voffset="-1em" data-name="mpadded (vertical overflow)" style="height: 1em"> 107 <mn>X</mn> 108 <mn>X</mn> 109 <mn>X</mn> 110 </mpadded> 111 </math> 112 </div> 113 114 <div class="test"> 115 <math> 116 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 117 <msqrt class="reference"> 118 <mn>X</mn> 119 <mn>X</mn> 120 <mn>X</mn> 121 </msqrt> 122 </math> 123 <math> 124 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 125 <msqrt data-name="msqrt" style="height: 10em"> 126 <mn>X</mn> 127 <mn>X</mn> 128 <mn>X</mn> 129 </msqrt> 130 </math> 131 <math> 132 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 133 <msqrt data-name="msqrt (vertical overflow)" style="height: 1em"> 134 <mn>X</mn> 135 <mn>X</mn> 136 <mn>X</mn> 137 </msqrt> 138 </math> 139 </div> 140 141 <div class="test"> 142 <math> 143 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 144 <mroot class="reference"> 145 <mn>X</mn> 146 <mn>X</mn> 147 </mroot> 148 </math> 149 <math> 150 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 151 <mroot data-name="mroot" style="height: 10em"> 152 <mn>X</mn> 153 <mn>X</mn> 154 </mroot> 155 </math> 156 <math> 157 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 158 <mroot data-name="mroot (vertical overflow)" style="height: 1em"> 159 <mn>X</mn> 160 <mn>X</mn> 161 </mroot> 162 </math> 163 </div> 164 165 <div class="test"> 166 <math> 167 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 168 <munder class="reference"> 169 <mn>X</mn> 170 <mn>X</mn> 171 </munder> 172 </math> 173 <math> 174 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 175 <munder data-name="munder" style="height: 10em"> 176 <mn>X</mn> 177 <mn>X</mn> 178 </munder> 179 </math> 180 <math> 181 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 182 <munder data-name="munder (vertical overflow)" style="height: 1em"> 183 <mn>X</mn> 184 <mn>X</mn> 185 </munder> 186 </math> 187 </div> 188 189 <div class="test"> 190 <math> 191 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 192 <mover class="reference"> 193 <mn>X</mn> 194 <mn>X</mn> 195 </mover> 196 </math> 197 <math> 198 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 199 <mover data-name="mover" style="height: 10em"> 200 <mn>X</mn> 201 <mn>X</mn> 202 </mover> 203 </math> 204 <math> 205 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 206 <mover data-name="mover (vertical overflow)" style="height: 1em"> 207 <mn>X</mn> 208 <mn>X</mn> 209 </mover> 210 </math> 211 </div> 212 213 <div class="test"> 214 <math> 215 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 216 <munderover class="reference"> 217 <mn>X</mn> 218 <mn>X</mn> 219 <mn>X</mn> 220 </munderover> 221 </math> 222 <math> 223 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 224 <munderover data-name="munderover" style="height: 10em"> 225 <mn>X</mn> 226 <mn>X</mn> 227 <mn>X</mn> 228 </munderover> 229 </math> 230 <math> 231 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 232 <munderover data-name="munderover (vertical overflow)" style="height: 1em"> 233 <mn>X</mn> 234 <mn>X</mn> 235 <mn>X</mn> 236 </munderover> 237 </math> 238 </div> 239 240 <div class="test"> 241 <math> 242 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 243 <msub class="reference"> 244 <mn>X</mn> 245 <mn>X</mn> 246 </msub> 247 </math> 248 <math> 249 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 250 <msub data-name="msub" style="height: 10em"> 251 <mn>X</mn> 252 <mn>X</mn> 253 </msub> 254 </math> 255 <math> 256 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 257 <msub data-name="msub (vertical overflow)" style="height: 1em"> 258 <mn>X</mn> 259 <mn>X</mn> 260 </msub> 261 </math> 262 </div> 263 264 <div class="test"> 265 <math> 266 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 267 <msup class="reference"> 268 <mn>X</mn> 269 <mn>X</mn> 270 </msup> 271 </math> 272 <math> 273 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 274 <msup data-name="msup" style="height: 10em"> 275 <mn>X</mn> 276 <mn>X</mn> 277 </msup> 278 </math> 279 <math> 280 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 281 <msup data-name="msup (vertical overflow)" style="height: 1em"> 282 <mn>X</mn> 283 <mn>X</mn> 284 </msup> 285 </math> 286 </div> 287 288 <div class="test"> 289 <math> 290 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 291 <msubsup class="reference"> 292 <mn>X</mn> 293 <mn>X</mn> 294 <mn>X</mn> 295 </msubsup> 296 </math> 297 <math> 298 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 299 <msubsup data-name="msubsup" style="height: 10em"> 300 <mn>X</mn> 301 <mn>X</mn> 302 <mn>X</mn> 303 </msubsup> 304 </math> 305 <math> 306 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 307 <msubsup data-name="msubsup (vertical overflow)" style="height: 1em"> 308 <mn>X</mn> 309 <mn>X</mn> 310 <mn>X</mn> 311 </msubsup> 312 </math> 313 </div> 314 315 <div class="test"> 316 <math> 317 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 318 <mmultiscripts class="reference"> 319 <mn>X</mn> 320 <mn>X</mn> 321 <mn>X</mn> 322 <mprescripts/> 323 <mn>X</mn> 324 <mn>X</mn> 325 </mmultiscripts> 326 </math> 327 <math> 328 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 329 <mmultiscripts data-name="mmultiscripts" style="height: 10em"> 330 <mn>X</mn> 331 <mn>X</mn> 332 <mn>X</mn> 333 <mprescripts/> 334 <mn>X</mn> 335 <mn>X</mn> 336 </mmultiscripts> 337 </math> 338 <math> 339 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 340 <mmultiscripts data-name="mmultiscripts (vertical overflow)" style="height: 1em"> 341 <mn>X</mn> 342 <mn>X</mn> 343 <mn>X</mn> 344 <mprescripts/> 345 <mn>X</mn> 346 <mn>X</mn> 347 </mmultiscripts> 348 </math> 349 </div> 350 351 <div class="test"> 352 <math> 353 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 354 <mtext class="reference"> 355 <span class="text">X</span class="text"> 356 <span class="text">X</span class="text"> 357 <span class="text">X</span class="text"> 358 </mtext> 359 </math> 360 <math> 361 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 362 <mtext data-name="mtext" style="height: 10em"> 363 <span class="text">X</span class="text"> 364 <span class="text">X</span class="text"> 365 <span class="text">X</span class="text"> 366 </mtext> 367 </math> 368 <math> 369 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 370 <mtext data-name="mtext (vertical overflow)" style="height: 1em"> 371 <span class="text">X</span class="text"> 372 <span class="text">X</span class="text"> 373 <span class="text">X</span class="text"> 374 </mtext> 375 </math> 376 </div> 377 378 <div class="test"> 379 <math> 380 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 381 <menclose class="reference"> 382 <mn>X</mn> 383 <mn>X</mn> 384 <mn>X</mn> 385 </menclose> 386 </math> 387 <math> 388 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 389 <menclose data-name="legacy menclose" style="height: 10em"> 390 <mn>X</mn> 391 <mn>X</mn> 392 <mn>X</mn> 393 </menclose> 394 </math> 395 <math> 396 <mspace class="baseline" width="1em" height="1px" style="background: black"/> 397 <menclose data-name="legacy menclose (vertical overflow)" style="height: 1em"> 398 <mn>X</mn> 399 <mn>X</mn> 400 <mn>X</mn> 401 </menclose> 402 </math> 403 </div> 404 405 </body> 406 </html>