width-height-005.html (13363B)
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 inline-start of the children of the 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 runTests() { 30 Array.from(document.getElementsByClassName("test")).forEach(div => { 31 const reference = div.getElementsByClassName("reference")[0]; 32 Array.from(div.querySelectorAll("[data-name]")).forEach(element => { 33 test(() => { 34 const rtl = getComputedStyle(element).direction == 'ltr'; 35 const referenceBox = reference.getBoundingClientRect(); 36 const elementBox = element.getBoundingClientRect(); 37 const epsilon = 1; 38 assert_greater_than(Math.abs(elementBox.width - referenceBox.width), epsilon, `width is modified`); 39 assert_approx_equals(elementBox.height, referenceBox.height, epsilon, `height is preserved`); 40 for (let i = 0; i < element.children.length; i++) { 41 const referenceChildBox = reference.children[i].getBoundingClientRect(); 42 const childBox = element.children[i].getBoundingClientRect(); 43 const description = `horizontal position of child ${i}`; 44 if (rtl) { 45 assert_approx_equals(childBox.left - elementBox.left, referenceChildBox.left - referenceBox.left, epsilon, description); 46 } else { 47 assert_approx_equals(childBox.right - elementBox.right, referenceChildBox.right - referenceBox.right, epsilon, description); 48 } 49 } 50 }, element.dataset.name); 51 }); 52 }); 53 done(); 54 } 55 </script> 56 </head> 57 <body> 58 <div id="log"></div> 59 60 <div class="test"> 61 <math> 62 <mrow class="reference"> 63 <mn>X</mn> 64 <mn>X</mn> 65 <mn>X</mn> 66 </mrow> 67 </math> 68 <math> 69 <mrow data-name="mrow" style="width: 10em"> 70 <mn>X</mn> 71 <mn>X</mn> 72 <mn>X</mn> 73 </mrow> 74 </math> 75 <math> 76 <mrow data-name="mrow (horizontal overflow)" style="width: 1em"> 77 <mn>X</mn> 78 <mn>X</mn> 79 <mn>X</mn> 80 </mrow> 81 </math> 82 </div> 83 84 <div class="test" dir="rtl"> 85 <math dir="rtl"> 86 <mrow class="reference"> 87 <mn>X</mn> 88 <mn>X</mn> 89 <mn>X</mn> 90 </mrow> 91 </math> 92 <math dir="rtl"> 93 <mrow data-name="RTL mrow" style="width: 10em"> 94 <mn>X</mn> 95 <mn>X</mn> 96 <mn>X</mn> 97 </mrow> 98 </math> 99 <math dir="rtl"> 100 <mrow data-name="RTL mrow (horizontal overflow)" style="width: 1em"> 101 <mn>X</mn> 102 <mn>X</mn> 103 <mn>X</mn> 104 </mrow> 105 </math> 106 </div> 107 108 <div class="test"> 109 <math> 110 <mpadded lspace=".5em" voffset="-1em" class="reference"> 111 <mn>X</mn> 112 <mn>X</mn> 113 <mn>X</mn> 114 </mpadded> 115 </math> 116 <math> 117 <mpadded lspace=".5em" voffset="-1em" data-name="mpadded" style="width: 10em"> 118 <mn>X</mn> 119 <mn>X</mn> 120 <mn>X</mn> 121 </mpadded> 122 </math> 123 <math> 124 <mpadded lspace=".5em" voffset="-1em" data-name="mpadded (horizontal overflow)" style="width: 1em"> 125 <mn>X</mn> 126 <mn>X</mn> 127 <mn>X</mn> 128 </mpadded> 129 </math> 130 </div> 131 132 <div class="test" dir="rtl"> 133 <math dir="rtl"> 134 <mpadded lspace=".5em" voffset="-1em" class="reference"> 135 <mn>X</mn> 136 <mn>X</mn> 137 <mn>X</mn> 138 </mpadded> 139 </math> 140 <math dir="rtl"> 141 <mpadded lspace=".5em" voffset="-1em" data-name="RTL mpadded" style="width: 10em"> 142 <mn>X</mn> 143 <mn>X</mn> 144 <mn>X</mn> 145 </mpadded> 146 </math> 147 <math dir="rtl"> 148 <mpadded lspace=".5em" voffset="-1em" data-name="RTL mpadded (horizontal overflow)" style="width: 1em"> 149 <mn>X</mn> 150 <mn>X</mn> 151 <mn>X</mn> 152 </mpadded> 153 </math> 154 </div> 155 156 <div class="test"> 157 <math> 158 <msqrt class="reference"> 159 <mn>X</mn> 160 <mn>X</mn> 161 <mn>X</mn> 162 </msqrt> 163 </math> 164 <math> 165 <msqrt data-name="msqrt" style="width: 10em"> 166 <mn>X</mn> 167 <mn>X</mn> 168 <mn>X</mn> 169 </msqrt> 170 </math> 171 <math> 172 <msqrt data-name="msqrt (horizontal overflow)" style="width: 1em"> 173 <mn>X</mn> 174 <mn>X</mn> 175 <mn>X</mn> 176 </msqrt> 177 </math> 178 </div> 179 180 <div class="test" dir="rtl"> 181 <math dir="rtl"> 182 <msqrt class="reference"> 183 <mn>X</mn> 184 <mn>X</mn> 185 <mn>X</mn> 186 </msqrt> 187 </math> 188 <math dir="rtl"> 189 <msqrt data-name="RTL msqrt" style="width: 10em"> 190 <mn>X</mn> 191 <mn>X</mn> 192 <mn>X</mn> 193 </msqrt> 194 </math> 195 <math dir="rtl"> 196 <msqrt data-name="RTL msqrt (horizontal overflow)" style="width: 1em"> 197 <mn>X</mn> 198 <mn>X</mn> 199 <mn>X</mn> 200 </msqrt> 201 </math> 202 </div> 203 204 <div class="test"> 205 <math> 206 <mroot class="reference"> 207 <mn>X</mn> 208 <mn>X</mn> 209 </mroot> 210 </math> 211 <math> 212 <mroot data-name="mroot" style="width: 10em"> 213 <mn>X</mn> 214 <mn>X</mn> 215 </mroot> 216 </math> 217 <math> 218 <mroot data-name="mroot (horizontal overflow)" style="width: 1em"> 219 <mn>X</mn> 220 <mn>X</mn> 221 </mroot> 222 </math> 223 </div> 224 225 <div class="test" dir="rtl"> 226 <math dir="rtl"> 227 <mroot class="reference"> 228 <mn>X</mn> 229 <mn>X</mn> 230 </mroot> 231 </math> 232 <math dir="rtl"> 233 <mroot data-name="RTL mroot" style="width: 10em"> 234 <mn>X</mn> 235 <mn>X</mn> 236 </mroot> 237 </math> 238 <math dir="rtl"> 239 <mroot data-name="RTL mroot (horizontal overflow)" style="width: 1em"> 240 <mn>X</mn> 241 <mn>X</mn> 242 </mroot> 243 </math> 244 </div> 245 246 <div class="test"> 247 <math> 248 <msub class="reference"> 249 <mn>X</mn> 250 <mn>X</mn> 251 </msub> 252 </math> 253 <math> 254 <msub data-name="msub" style="width: 10em"> 255 <mn>X</mn> 256 <mn>X</mn> 257 </msub> 258 </math> 259 <math> 260 <msub data-name="msub (horizontal overflow)" style="width: 1em"> 261 <mn>X</mn> 262 <mn>X</mn> 263 </msub> 264 </math> 265 </div> 266 267 <div class="test" dir="rtl"> 268 <math dir="rtl"> 269 <msub class="reference"> 270 <mn>X</mn> 271 <mn>X</mn> 272 </msub> 273 </math> 274 <math dir="rtl"> 275 <msub data-name="RTL msub" style="width: 10em"> 276 <mn>X</mn> 277 <mn>X</mn> 278 </msub> 279 </math> 280 <math dir="rtl"> 281 <msub data-name="RTL msub (horizontal overflow)" style="width: 1em"> 282 <mn>X</mn> 283 <mn>X</mn> 284 </msub> 285 </math> 286 </div> 287 288 <div class="test"> 289 <math> 290 <msup class="reference"> 291 <mn>X</mn> 292 <mn>X</mn> 293 </msup> 294 </math> 295 <math> 296 <msup data-name="msup" style="width: 10em"> 297 <mn>X</mn> 298 <mn>X</mn> 299 </msup> 300 </math> 301 <math> 302 <msup data-name="msup (horizontal overflow)" style="width: 1em"> 303 <mn>X</mn> 304 <mn>X</mn> 305 </msup> 306 </math> 307 </div> 308 309 <div class="test" dir="rtl"> 310 <math dir="rtl"> 311 <msup class="reference"> 312 <mn>X</mn> 313 <mn>X</mn> 314 </msup> 315 </math> 316 <math dir="rtl"> 317 <msup data-name="RTL msup" style="width: 10em"> 318 <mn>X</mn> 319 <mn>X</mn> 320 </msup> 321 </math> 322 <math dir="rtl"> 323 <msup data-name="RTL msup (horizontal overflow)" style="width: 1em"> 324 <mn>X</mn> 325 <mn>X</mn> 326 </msup> 327 </math> 328 </div> 329 330 <div class="test"> 331 <math> 332 <msubsup class="reference"> 333 <mn>X</mn> 334 <mn>X</mn> 335 <mn>X</mn> 336 </msubsup> 337 </math> 338 <math> 339 <msubsup data-name="msubsup" style="width: 10em"> 340 <mn>X</mn> 341 <mn>X</mn> 342 <mn>X</mn> 343 </msubsup> 344 </math> 345 <math> 346 <msubsup data-name="msubsup (horizontal overflow)" style="width: 1em"> 347 <mn>X</mn> 348 <mn>X</mn> 349 <mn>X</mn> 350 </msubsup> 351 </math> 352 </div> 353 354 <div class="test" dir="rtl"> 355 <math dir="rtl"> 356 <msubsup class="reference"> 357 <mn>X</mn> 358 <mn>X</mn> 359 <mn>X</mn> 360 </msubsup> 361 </math> 362 <math dir="rtl"> 363 <msubsup data-name="RTL msubsup" style="width: 10em"> 364 <mn>X</mn> 365 <mn>X</mn> 366 <mn>X</mn> 367 </msubsup> 368 </math> 369 <math dir="rtl"> 370 <msubsup data-name="RTL msubsup (horizontal overflow)" style="width: 1em"> 371 <mn>X</mn> 372 <mn>X</mn> 373 <mn>X</mn> 374 </msubsup> 375 </math> 376 </div> 377 378 <div class="test"> 379 <math> 380 <mmultiscripts class="reference"> 381 <mn>X</mn> 382 <mn>X</mn> 383 <mn>X</mn> 384 <mprescripts/> 385 <mn>X</mn> 386 <mn>X</mn> 387 </mmultiscripts> 388 </math> 389 <math> 390 <mmultiscripts data-name="mmultiscripts" style="width: 10em"> 391 <mn>X</mn> 392 <mn>X</mn> 393 <mn>X</mn> 394 <mprescripts/> 395 <mn>X</mn> 396 <mn>X</mn> 397 </mmultiscripts> 398 </math> 399 <math> 400 <mmultiscripts data-name="mmultiscripts (horizontal overflow)" style="width: 1em"> 401 <mn>X</mn> 402 <mn>X</mn> 403 <mn>X</mn> 404 <mprescripts/> 405 <mn>X</mn> 406 <mn>X</mn> 407 </mmultiscripts> 408 </math> 409 </div> 410 411 <div class="test" dir="rtl"> 412 <math dir="rtl"> 413 <mmultiscripts class="reference"> 414 <mn>X</mn> 415 <mn>X</mn> 416 <mn>X</mn> 417 <mprescripts/> 418 <mn>X</mn> 419 <mn>X</mn> 420 </mmultiscripts> 421 </math> 422 <math dir="rtl"> 423 <mmultiscripts data-name="RTL mmultiscripts" style="width: 10em"> 424 <mn>X</mn> 425 <mn>X</mn> 426 <mn>X</mn> 427 <mprescripts/> 428 <mn>X</mn> 429 <mn>X</mn> 430 </mmultiscripts> 431 </math> 432 <math dir="rtl"> 433 <mmultiscripts data-name="RTL mmultiscripts (horizontal overflow)" style="width: 1em"> 434 <mn>X</mn> 435 <mn>X</mn> 436 <mn>X</mn> 437 <mprescripts/> 438 <mn>X</mn> 439 <mn>X</mn> 440 </mmultiscripts> 441 </math> 442 </div> 443 444 <div class="test"> 445 <math> 446 <mtext class="reference"> 447 <span class="text">X</span class="text"> 448 <span class="text">X</span class="text"> 449 <span class="text">X</span class="text"> 450 </mtext> 451 </math> 452 <math> 453 <mtext data-name="mtext" style="width: 10em"> 454 <span class="text">X</span class="text"> 455 <span class="text">X</span class="text"> 456 <span class="text">X</span class="text"> 457 </mtext> 458 </math> 459 <math> 460 <mtext data-name="mtext (horizontal overflow)" style="width: 1em"> 461 <span class="text">X</span class="text"> 462 <span class="text">X</span class="text"> 463 <span class="text">X</span class="text"> 464 </mtext> 465 </math> 466 </div> 467 468 <div class="test" dir="rtl"> 469 <math dir="rtl"> 470 <mtext class="reference"> 471 <span class="text">X</span class="text"> 472 <span class="text">X</span class="text"> 473 <span class="text">X</span class="text"> 474 </mtext> 475 </math> 476 <math dir="rtl"> 477 <mtext data-name="RTL mtext" style="width: 10em"> 478 <span class="text">X</span class="text"> 479 <span class="text">X</span class="text"> 480 <span class="text">X</span class="text"> 481 </mtext> 482 </math> 483 <math dir="rtl"> 484 <mtext data-name="RTL mtext (horizontal overflow)" style="width: 1em"> 485 <span class="text">X</span class="text"> 486 <span class="text">X</span class="text"> 487 <span class="text">X</span class="text"> 488 </mtext> 489 </math> 490 </div> 491 492 <div class="test"> 493 <math> 494 <menclose class="reference"> 495 <mn>X</mn> 496 <mn>X</mn> 497 <mn>X</mn> 498 </menclose> 499 </math> 500 <math> 501 <menclose data-name="legacy menclose" style="width: 10em"> 502 <mn>X</mn> 503 <mn>X</mn> 504 <mn>X</mn> 505 </menclose> 506 </math> 507 <math> 508 <menclose data-name="legacy menclose (horizontal overflow)" style="width: 1em"> 509 <mn>X</mn> 510 <mn>X</mn> 511 <mn>X</mn> 512 </menclose> 513 </math> 514 </div> 515 516 <div class="test" dir="rtl"> 517 <math dir="rtl"> 518 <menclose class="reference"> 519 <mn>X</mn> 520 <mn>X</mn> 521 <mn>X</mn> 522 </menclose> 523 </math> 524 <math dir="rtl"> 525 <menclose data-name="RTL legacy menclose" style="width: 10em"> 526 <mn>X</mn> 527 <mn>X</mn> 528 <mn>X</mn> 529 </menclose> 530 </math> 531 <math dir="rtl"> 532 <menclose data-name="RTL legacy menclose (horizontal overflow)" style="width: 1em"> 533 <mn>X</mn> 534 <mn>X</mn> 535 <mn>X</mn> 536 </menclose> 537 </math> 538 </div> 539 540 </body> 541 </html>