<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mo axis height</title>
<link rel="help" href="https://mathml-refresh.github.io/mathml-core/#tokenmo">
<meta name="assert" content="Element mo correctly uses the axis height parameter from the MATH table.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
  math, mspace {
    font-size: 10px;
  }
  @font-face {
    font-family: axisheight5000-verticalarrow14000;
    src: url("/fonts/math/axisheight5000-verticalarrow14000.woff");
  }
</style>
<script>
  var emToPx = 10 / 1000; // font-size: 10px, font.em = 1000
  var epsilon = 5;

  function getBox(aId) {
    return document.getElementById(aId).getBoundingClientRect();
  }

  setup({ explicit_done: true });
  window.addEventListener("load", function() {
    // Delay the check to workaround WebKit's bug https://webkit.org/b/174030.
    requestAnimationFrame(() => { document.fonts.ready.then(runTests); });
  });

  function runTests() {
    test(function() {
      var v1 = 5000 * emToPx;
      var moMiddle = (getBox("mo1").bottom + getBox("mo1").top) / 2;
      assert_approx_equals(getBox("mo1").height,
                           14000 * emToPx, epsilon, "mo: size");
      assert_approx_equals(getBox("baseline1").bottom - moMiddle,
                           v1, epsilon, "mo: axis height");
    }, "AxisHeight (size variant)");

    test(function() {
      var v1 = 5000 * emToPx;
      var moMiddle = (getBox("mo2").bottom + getBox("mo2").top) / 2;
      assert_approx_equals(getBox("mo2").height,
                           2 * (getBox("target2").height - v1),
                           epsilon, "mo: size");
      assert_approx_equals(getBox("baseline2").bottom - moMiddle,
                           v1, epsilon, "mo: axis height");
    }, "AxisHeight (glyph assembly)");

    done();
  }
</script>
</head>
<body>
  <div id="log"></div>
  <p>
    <math style="font-family: axisheight5000-verticalarrow14000;">
      <mrow>
        <mspace id="baseline1" style="background: blue" width="50px" height="1px"/>
        <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded>
        <mo id="mo1" symmetric="true" style="color: green">&#x21A8;</mo>
        <mspace style="background: gray" width="10px" height="50px"/>
      </mrow>
    </math>
    <math style="font-family: axisheight5000-verticalarrow14000;">
      <mrow>
        <mspace id="baseline2" style="background: blue" width="50px" height="1px"/>
        <mpadded voffset="50px"><mspace style="background: cyan" width="50px" height="1px"/></mpadded>
        <mo id="mo2" symmetric="true" style="color: green">&#x21A8;</mo>
        <mspace id="target2" style="background: gray" width="10px" height="200px"/>
      </mrow>
    </math>
</body>
</html>