Add MathML tests for mpadded (#23977)
diff --git a/mathml/presentation-markup/mpadded/mpadded-001.html b/mathml/presentation-markup/mpadded/mpadded-001.html
new file mode 100644
index 0000000..edb2954
--- /dev/null
+++ b/mathml/presentation-markup/mpadded/mpadded-001.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mpadded</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<meta name="assert" content="Verify metrics of empty mpadded element for different values of height, depth and width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ var epsilon = 1;
+ function getBox(aId) {
+ return document.getElementById(aId).getBoundingClientRect();
+ }
+
+ setup({ explicit_done: true });
+ window.addEventListener("load", runTests);
+
+ function runTests() {
+ test(function() {
+ var none = getBox("none");
+ assert_equals(none.width, 0, "zero width");
+ assert_approx_equals(getBox("baseline").bottom - none.top, 0, epsilon, "zero depth");
+ assert_approx_equals(none.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth");
+ }, "mpadded (no attributes)");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("width" + i);
+ assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i);
+ }
+ }, "Different widths");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("height" + i);
+ assert_equals(mpadded.width, 0, "width" + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i);
+ }
+ }, "Different heights");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("depth" + i);
+ assert_equals(mpadded.width, 0, "width" + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, 0, epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i);
+ }
+ }, "Different depths");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("mpadded" + i);
+ assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i);
+ }
+ }, "Various combinations of height, depth and width.");
+
+ test(function() {
+ var container = document.getElementById("containerForPreferredWidth");
+ var mpadded = container.getElementsByTagName("mpadded")[0];
+ var containerWidth = container.getBoundingClientRect().width;
+ var mpaddedWidth = mpadded.getBoundingClientRect().width;
+ assert_approx_equals(containerWidth, mpaddedWidth, epsilon);
+ }, "Preferred width");
+
+ // Dynamically set attributes.
+ ["width", "height", "depth"].forEach(function (name, index) {
+ document.getElementById("dynamic-remove").removeAttribute(name);
+ let length = `${50 + index * 10}px`;
+ document.getElementById("dynamic-attach").setAttribute(name, length);
+ document.getElementById("dynamic-modify").setAttribute(name, length);
+ });
+ let baseline = getBox("baseline2").bottom;
+
+ test(function() {
+ let remove = getBox("dynamic-remove");
+ assert_approx_equals(remove.width, 0, epsilon);
+ assert_approx_equals(remove.height, 0, epsilon);
+ assert_approx_equals(remove.top, baseline, epsilon);
+ }, "dynamic attributes (remove)");
+
+ test(function() {
+ let attach = getBox("dynamic-attach");
+ assert_approx_equals(attach.width, 50, epsilon);
+ assert_approx_equals(attach.height, 60 + 70, epsilon);
+ assert_approx_equals(baseline - attach.top, 60, epsilon);
+ }, "dynamic attributes (attach)");
+
+ test(function() {
+ let modify = getBox("dynamic-modify");
+ assert_approx_equals(modify.width, 50, epsilon);
+ assert_approx_equals(modify.height, 60 + 70, epsilon);
+ assert_approx_equals(baseline - modify.top, 60, epsilon);
+ }, "dynamic attributes (modify)");
+
+ done();
+ }
+</script>
+<style>
+div.shrink-wrap {
+ background: yellow;
+ display: inline-block;
+ margin-top: 5px;
+ padding-top: 5px;
+}
+</style>
+</head>
+<body>
+ <div id="log"></div>
+ <p>
+ <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+ <math>
+ <mpadded id="none"/>
+ <mpadded id="width0" width="25px"/>
+ <mpadded id="width1" width="50px"/>
+ <mpadded id="width2" width="75px"/>
+ <mpadded id="height0" height="25px"/>
+ <mpadded id="height1" height="50px"/>
+ <mpadded id="height2" height="75px"/>
+ <mpadded id="depth0" depth="25px"/>
+ <mpadded id="depth1" depth="50px"/>
+ <mpadded id="depth2" depth="75px"/>
+ <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"/>
+ <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"/>
+ <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"/>
+ </math>
+ </p>
+ <div>
+ <div id="containerForPreferredWidth" class="shrink-wrap">
+ <math><mpadded width="75px" height="25px" depth="50px" style="background: green"/></math>
+ </div>
+ </div>
+ <p>
+ <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+ <math>
+ <mpadded id="dynamic-attach" style="background: lightgreen"/>
+ <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"/>
+ <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"/>
+ </math>
+ </p>
+</body>
+</html>
diff --git a/mathml/presentation-markup/mpadded/mpadded-002.html b/mathml/presentation-markup/mpadded/mpadded-002.html
new file mode 100644
index 0000000..c3cbf7c
--- /dev/null
+++ b/mathml/presentation-markup/mpadded/mpadded-002.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mpadded</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<meta name="assert" content="Verify metrics of nonempty mpadded element for different values of height, depth and width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ var epsilon = 1;
+ function getBox(aId) {
+ return document.getElementById(aId).getBoundingClientRect();
+ }
+
+ setup({ explicit_done: true });
+ window.addEventListener("load", runTests);
+
+ function runTests() {
+ const contentWidth = 100;
+ const contentDepth = 125;
+ const contentHeight = 150;
+
+ test(function() {
+ var none = getBox("none");
+ assert_equals(none.width, contentWidth, "content width");
+ assert_approx_equals(getBox("baseline").bottom - none.top, contentHeight, epsilon, "content height");
+ assert_approx_equals(none.bottom - getBox("baseline").bottom, contentDepth, epsilon, "content height");
+ }, "mpadded with no attributes");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("width" + i);
+ assert_approx_equals(mpadded.width, 25*(i+1), epsilon, "width " + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i);
+ }
+ }, "Different widths");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("height" + i);
+ assert_equals(mpadded.width, contentWidth, "width" + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(i+1), epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, contentDepth, epsilon, "depth" + i);
+ }
+ }, "Different heights");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("depth" + i);
+ assert_equals(mpadded.width, contentWidth, "width" + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, contentHeight, epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i);
+ }
+ }, "Different depths");
+
+ test(function() {
+ for (var i = 0; i <= 2; i++) {
+ var mpadded = getBox("mpadded" + i);
+ assert_approx_equals(mpadded.width, 25*(1+i%3), epsilon, "width" + i);
+ assert_approx_equals(getBox("baseline").bottom - mpadded.top, 25*(1+(i+1)%3), epsilon, "height" + i);
+ assert_approx_equals(mpadded.bottom - getBox("baseline").bottom, 25*(1+(i+2)%3), epsilon, "depth" + i);
+ }
+ }, "Various combinations of height, depth and width.");
+
+ test(function() {
+ var container = document.getElementById("containerForPreferredWidth");
+ var mpadded = container.getElementsByTagName("mpadded")[0];
+ var containerWidth = container.getBoundingClientRect().width;
+ var mpaddedWidth = mpadded.getBoundingClientRect().width;
+ assert_approx_equals(containerWidth, mpaddedWidth, epsilon);
+ }, "Preferred width");
+
+ // Dynamically set attributes.
+ ["width", "height", "depth"].forEach(function (name, index) {
+ document.getElementById("dynamic-remove").removeAttribute(name);
+ let length = `${50 + index * 10}px`;
+ document.getElementById("dynamic-attach").setAttribute(name, length);
+ document.getElementById("dynamic-modify").setAttribute(name, length);
+ });
+ let baseline = getBox("baseline2").bottom;
+
+ test(function() {
+ let remove = getBox("dynamic-remove");
+ assert_approx_equals(remove.width, contentWidth, epsilon);
+ assert_approx_equals(remove.height, contentHeight + contentDepth, epsilon);
+ assert_approx_equals(baseline - remove.top, contentHeight, epsilon);
+ }, "dynamic attributes (remove)");
+
+ test(function() {
+ let attach = getBox("dynamic-attach");
+ assert_approx_equals(attach.width, 50, epsilon);
+ assert_approx_equals(attach.height, 60 + 70, epsilon);
+ assert_approx_equals(baseline - attach.top, 60, epsilon);
+ }, "dynamic attributes (attach)");
+
+ test(function() {
+ let modify = getBox("dynamic-modify");
+ assert_approx_equals(modify.width, 50, epsilon);
+ assert_approx_equals(modify.height, 60 + 70, epsilon);
+ assert_approx_equals(baseline - modify.top, 60, epsilon);
+ }, "dynamic attributes (modify)");
+
+ done();
+ }
+</script>
+<style>
+div.shrink-wrap {
+ background: yellow;
+ display: inline-block;
+ margin-top: 5px;
+ padding-top: 5px;
+}
+</style>
+</head>
+<body>
+ <div id="log"></div>
+ <p>
+ <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+ <math>
+ <mpadded id="none"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="width0" width="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="width1" width="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="width2" width="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="height0" height="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="height1" height="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="height2" height="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="depth0" depth="25px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="depth1" depth="50px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="depth2" depth="75px"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="mpadded0" width="25px" height="50px" depth="75px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="mpadded1" width="50px" height="75px" depth="25px" style="background: blue"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="mpadded2" width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ </math>
+ </p>
+ <div>
+ <div id="containerForPreferredWidth" class="shrink-wrap">
+ <math><mpadded width="75px" height="25px" depth="50px" style="background: green"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded></math>
+ </div>
+ </div>
+ <p>
+ <span id="baseline2" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+ <math>
+ <mpadded id="dynamic-attach" style="background: lightgreen"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ <mpadded id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"><mspace width="100px" depth="125px" height="150px" style="background: black; opacity: .5"/></mpadded>
+ </math>
+ </p>
+</body>
+</html>
diff --git a/mathml/presentation-markup/mpadded/mpadded-003.html b/mathml/presentation-markup/mpadded/mpadded-003.html
new file mode 100644
index 0000000..4df55b9
--- /dev/null
+++ b/mathml/presentation-markup/mpadded/mpadded-003.html
@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>mpadded</title>
+<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#adjust-space-around-content-mpadded">
+<meta name="assert" content="Verify metrics of mpadded element with voffset and lspace">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+ setup({ explicit_done: true });
+ window.addEventListener("load", runTests);
+
+ function runTests() {
+ const contentWidth = 10;
+ const contentDepth = 15;
+ const contentHeight = 20;
+ const epsilon = 1;
+
+ test(function() {
+ Array.from(document.getElementsByClassName("shrink-wrap")).forEach(container => {
+ assert_approx_equals(container.getBoundingClientRect().width, contentWidth, epsilon);
+ });
+ }, "lspace/voffset shifts don't affect mpadded preferred width");
+
+ function GetShifts(mpadded) {
+ let mpadded_box = mpadded.getBoundingClientRect();
+ let mspace_box = mpadded.firstElementChild.getBoundingClientRect();
+ return { lspace: mspace_box.left - mpadded_box.left,
+ voffset: mpadded_box.top - mspace_box.top };
+ }
+
+ let mpaddeds = document.getElementById("static_tests").getElementsByTagName("mpadded");
+ test(function() {
+ let baseline = document.getElementById("baseline").getBoundingClientRect().bottom;
+ Array.from(mpaddeds).forEach(e => {
+ let mpadded = e.getBoundingClientRect();
+ assert_approx_equals(mpadded.width, contentWidth, epsilon);
+ assert_approx_equals(baseline - mpadded.top, contentHeight, epsilon);
+ assert_approx_equals(mpadded.bottom - baseline, contentDepth, epsilon);
+
+ });
+ }, "lspace/voffset shifts don't affect mpadded size");
+
+
+ test(function() {
+ let shifts = GetShifts(mpaddeds[0]);
+ assert_approx_equals(shifts.lspace, 5, epsilon, "positive lspace");
+ assert_approx_equals(shifts.voffset, 0, epsilon);
+
+ shifts = GetShifts(mpaddeds[1]);
+ assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero");
+ assert_approx_equals(shifts.voffset, 0, epsilon);
+
+ shifts = GetShifts(mpaddeds[2]);
+ assert_approx_equals(shifts.lspace, 0, epsilon);
+ assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset");
+
+ shifts = GetShifts(mpaddeds[3]);
+ assert_approx_equals(shifts.lspace, 0, epsilon);
+ assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset");
+
+ shifts = GetShifts(mpaddeds[4]);
+ assert_approx_equals(shifts.lspace, 5, epsilon);
+ assert_approx_equals(shifts.voffset, 10, epsilon);
+
+ shifts = GetShifts(mpaddeds[5]);
+ assert_approx_equals(shifts.lspace, 5, epsilon);
+ assert_approx_equals(shifts.voffset, -10, epsilon);
+ }, "content is shifted by the specified lspace/voffset");
+
+ mpaddeds = document.getElementById("static_tests_rtl").getElementsByTagName("mpadded");
+ test(function() {
+ let shifts = GetShifts(mpaddeds[0]);
+ assert_approx_equals(shifts.lspace, -5, epsilon, "positive lspace");
+ assert_approx_equals(shifts.voffset, 0, epsilon);
+
+ shifts = GetShifts(mpaddeds[1]);
+ assert_approx_equals(shifts.lspace, 0, epsilon, "negative lspace is clmaped to zero");
+ assert_approx_equals(shifts.voffset, 0, epsilon);
+
+ shifts = GetShifts(mpaddeds[2]);
+ assert_approx_equals(shifts.lspace, 0, epsilon);
+ assert_approx_equals(shifts.voffset, 10, epsilon, "positive voffset");
+
+ shifts = GetShifts(mpaddeds[3]);
+ assert_approx_equals(shifts.lspace, 0, epsilon);
+ assert_approx_equals(shifts.voffset, -10, epsilon, "negative voffset");
+
+ shifts = GetShifts(mpaddeds[4]);
+ assert_approx_equals(shifts.lspace, -5, epsilon);
+ assert_approx_equals(shifts.voffset, 10, epsilon);
+
+ shifts = GetShifts(mpaddeds[5]);
+ assert_approx_equals(shifts.lspace, -5, epsilon);
+ assert_approx_equals(shifts.voffset, -10, epsilon);
+ }, "content is shifted by the specified lspace/voffset (RTL)");
+
+ mpaddeds = document.getElementById("dynamic_tests").getElementsByTagName("mpadded");
+ test(function() {
+ mpaddeds[0].setAttribute("lspace", "5px")
+ let shifts = GetShifts(mpaddeds[0]);
+ assert_approx_equals(shifts.lspace, 5, epsilon, "attach lspace");
+ assert_approx_equals(shifts.voffset, 0, epsilon);
+
+ mpaddeds[1].setAttribute("voffset", "10px")
+ shifts = GetShifts(mpaddeds[1]);
+ assert_approx_equals(shifts.lspace, 0, epsilon);
+ assert_approx_equals(shifts.voffset, 10, epsilon, "attach voffset");
+
+ mpaddeds[2].removeAttribute("lspace")
+ shifts = GetShifts(mpaddeds[2]);
+ assert_approx_equals(shifts.lspace, 0, epsilon, "remove lspace");
+ assert_approx_equals(shifts.voffset, 10, epsilon);
+
+ mpaddeds[3].removeAttribute("voffset")
+ shifts = GetShifts(mpaddeds[3]);
+ assert_approx_equals(shifts.lspace, 5, epsilon);
+ assert_approx_equals(shifts.voffset, 0, epsilon, "remove voffset");
+
+ mpaddeds[4].setAttribute("lspace", "15px")
+ shifts = GetShifts(mpaddeds[4]);
+ assert_approx_equals(shifts.lspace, 15, epsilon, "modify lspace");
+ assert_approx_equals(shifts.voffset, 10, epsilon);
+
+ mpaddeds[5].setAttribute("voffset", "-10px")
+ shifts = GetShifts(mpaddeds[5]);
+ assert_approx_equals(shifts.lspace, 5, epsilon);
+ assert_approx_equals(shifts.voffset, -10, epsilon, "modify voffset");
+ }, "dynamic changes of lspace/voffset");
+
+ done();
+ }
+</script>
+<style>
+div.shrink-wrap {
+ background: yellow;
+ display: inline-block;
+ margin-top: 5px;
+ padding-top: 5px;
+}
+</style>
+</head>
+<body>
+ <div id="log"></div>
+ <div id="static_tests">
+ <span id="baseline" style="display: inline-block; width: 30px; height: 5px; background: blue"></span>
+ <math>
+ <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div id="static_tests_rtl">
+ <math dir="rtl">
+ <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div id="dynamic_tests">
+ <math>
+ <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div>
+ <div class="shrink-wrap">
+ <math>
+ <mpadded lspace="5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div class="shrink-wrap">
+ <math>
+ <mpadded lspace="-5px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div class="shrink-wrap">
+ <math>
+ <mpadded voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div class="shrink-wrap">
+ <math>
+ <mpadded voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div class="shrink-wrap">
+ <math>
+ <mpadded lspace="5px" voffset="10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ <div class="shrink-wrap">
+ <math>
+ <mpadded lspace="5px" voffset="-10px" style="background: black"><mspace width="10px" depth="15px" height="20px" style="background: green; opacity: .5"/></mpadded>
+ </math>
+ </div>
+ </div>
+</body>
+</html>
