| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Space</title> |
| <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#space-mspace"> |
| <meta name="assert" content="Verify mspace metrics 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) { |
| var box = document.getElementById(aId).getBoundingClientRect(); |
| box.middle = (box.bottom + box.top) / 2; |
| box.center = (box.left + box.right) / 2; |
| return box; |
| } |
| |
| setup({ explicit_done: true }); |
| window.addEventListener("load", runTests); |
| |
| function runTests() { |
| test(function() { |
| var empty = getBox("empty"); |
| assert_equals(empty.width, 0, "zero width"); |
| assert_approx_equals(getBox("baseline").bottom - empty.top, 0, epsilon, "zero depth"); |
| assert_approx_equals(empty.bottom - getBox("baseline").bottom, 0, epsilon, "zero depth"); |
| }, "Empty mspace"); |
| |
| test(function() { |
| for (var i = 0; i <= 2; i++) { |
| var space = getBox("width" + i); |
| assert_approx_equals(space.width, 25*(i+1), epsilon, "width " + i); |
| assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i); |
| assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); |
| } |
| }, "Different widths"); |
| |
| test(function() { |
| for (var i = 0; i <= 2; i++) { |
| var space = getBox("height" + i); |
| assert_equals(space.width, 0, "width" + i); |
| assert_approx_equals(getBox("baseline").bottom - space.top, 25*(i+1), epsilon, "height" + i); |
| assert_approx_equals(space.bottom - getBox("baseline").bottom, 0, epsilon, "depth" + i); |
| } |
| }, "Different heights"); |
| |
| test(function() { |
| for (var i = 0; i <= 2; i++) { |
| var space = getBox("depth" + i); |
| assert_equals(space.width, 0, "width" + i); |
| assert_approx_equals(getBox("baseline").bottom - space.top, 0, epsilon, "height" + i); |
| assert_approx_equals(space.bottom - getBox("baseline").bottom, 25*(i+1), epsilon, "depth" + i); |
| } |
| }, "Different depths"); |
| |
| test(function() { |
| for (var i = 0; i <= 2; i++) { |
| var space = getBox("mspace" + i); |
| assert_approx_equals(space.width, 25*(1+i%3), epsilon, "width" + i); |
| assert_approx_equals(getBox("baseline").bottom - space.top, 25*(1+(i+1)%3), epsilon, "height" + i); |
| assert_approx_equals(space.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 mspace = container.getElementsByTagName("mspace")[0]; |
| var containerWidth = container.getBoundingClientRect().width; |
| var mspaceWidth = mspace.getBoundingClientRect().width; |
| assert_approx_equals(containerWidth, mspaceWidth, 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> |
| <mspace id="empty"/> |
| <mspace id="width0" width="25px"/> |
| <mspace id="width1" width="50px"/> |
| <mspace id="width2" width="75px"/> |
| <mspace id="height0" height="25px"/> |
| <mspace id="height1" height="50px"/> |
| <mspace id="height2" height="75px"/> |
| <mspace id="depth0" depth="25px"/> |
| <mspace id="depth1" depth="50px"/> |
| <mspace id="depth2" depth="75px"/> |
| <mspace id="mspace0" width="25px" height="50px" depth="75px" style="background: green"/> |
| <mspace id="mspace1" width="50px" height="75px" depth="25px" style="background: blue"/> |
| <mspace id="mspace2" width="75px" height="25px" depth="50px" style="background: green"/> |
| </math> |
| </p> |
| <div> |
| <div id="containerForPreferredWidth" class="shrink-wrap"> |
| <math><mspace 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> |
| <mspace id="dynamic-attach" style="background: lightgreen"/> |
| <mspace id="dynamic-remove" width="10px" height="20px" depth="30px" style="background: lightyellow"/> |
| <mspace id="dynamic-modify" width="100px" height="200px" depth="300px" style="background: pink"/> |
| </math> |
| </p> |
| </body> |
| </html> |