| <!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."); |
| |
| done(); |
| } |
| </script> |
| </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> |
| </body> |
| </html> |
