<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>content position with width/height</title> <link rel="match" href="width-height-003-ref.html"> <link rel="help" href="https://w3c.github.io/mathml-core/#layout-algorithms"> <link rel="help" href="https://w3c.github.io/mathml-core/#underscripts-and-overscripts-munder-mover-munderover"> <meta name="assert" content="Verify the inline-start of the children of the munder, mover, munderover and mfrac layout algorithms."/> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> <script src="/mathml/support/fonts.js"></script> <style> .test, math { font: 25px/1 Ahem; color: black; } .test { margin: .5em; } [data-name] { width: 7em; height: 3em; border: 1px solid blue; } </style> <script> var epsilon = 1; function getMiddle(aElement) { let box = aElement.getBoundingClientRect(); return (box.left + box.right) / 2; } setup({ explicit_done: true }); window.addEventListener("load", () => { loadAllFonts().then(runTests); }); function runTests() { Array.from(document.querySelectorAll("[data-name]")).forEach(element => { test(() => { let elementMiddle = getMiddle(element); Array.from(element.children).forEach(child => { assert_approx_equals(getMiddle(child), elementMiddle, epsilon); }); }, element.dataset.name); }); done(); } </script> </head> <body> <div id="log"></div> <div class="test"> <math> <mfrac data-name="mfrac"> <mtext>X</mtext> <mtext>X</mtext> </mfrac> </math> <math dir="rtl"> <mfrac data-name="RTL mfrac"> <mtext>X</mtext> <mtext>X</mtext> </mfrac> </math> </div> <div class="test"> <math> <mfrac linethickness="0" data-name="mfrac without bar"> <mtext>X</mtext> <mtext>X</mtext> </mfrac> </math> <math dir="rtl"> <mfrac linethickness="0" data-name="RTL mfrac without bar"> <mtext>X</mtext> <mtext>X</mtext> </mfrac> </math> </div> <div class="test"> <math> <munder data-name="munder"> <mtext>X</mtext> <mtext>X</mtext> </munder> </math> <math dir="rtl"> <munder data-name="RTL munder"> <mtext>X</mtext> <mtext>X</mtext> </munder> </math> </div> <div class="test"> <math> <mover data-name="mover"> <mtext>X</mtext> <mtext>X</mtext> </mover> </math> <math dir="rtl"> <mover data-name="RTL mover"> <mtext>X</mtext> <mtext>X</mtext> </mover> </math> </div> <div class="test"> <math> <munderover data-name="munderover"> <mtext>X</mtext> <mtext>X</mtext> <mtext>X</mtext> </munderover> </math> <math dir="rtl"> <munderover data-name="RTL munderover"> <mtext>X</mtext> <mtext>X</mtext> <mtext>X</mtext> </munderover> </math> </div> </body> </htmL>