<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MathML lengths</title>
<link rel="help" href="https://w3c.github.io/mathml-core/#css-styling">
<link rel="help" href="https://w3c.github.io/mathml-core/#types-for-mathml-attribute-values">
<link rel="help" href="https://w3c.github.io/mathml-core/#legacy-mathml-style-attributes">
<link rel="help" href="https://w3c.github.io/mathml-core/#space-mspace">
<meta name="assert" content="Verify various cases of the MathML length syntax.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<script src="/mathml/support/fonts.js"></script>
<style>
  @font-face {
    font-family: TestFont;
    src: url("/fonts/math/xheight500.woff");
  }
  math {
    font-family: TestFont;
    font-size: 10px;
  }
</style>
<script>
  var epsilon = .5;

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

  setup({ explicit_done: true });
  window.addEventListener("load", () => { loadAllFonts().then(runTests); });

  function runTests() {
    test(function() {
      assert_true(MathMLFeatureDetection.has_mspace());
      assert_equals(getBox("unitCm").width, 96, "cm");
      assert_equals(getBox("unitEm").width, 120, "em");
      assert_equals(getBox("unitEx").width, 500, "ex");
      assert_equals(getBox("unitIn").width, 288, "in");
      assert_equals(getBox("unitMm").width, 576, "mm");
      assert_equals(getBox("unitPc").width, 96, "pc");
      assert_equals(getBox("unitPercentage").width, 60, "%");
      assert_equals(getBox("unitPt").width, 96, "pt");
      assert_equals(getBox("unitPx").width, 123, "px");
    }, "Units");

    test(function() {
      assert_true(MathMLFeatureDetection.has_mspace());
      assert_equals(getBox("spaceCm").width, 96, "cm");
      assert_equals(getBox("spaceEm").width, 120, "em");
      assert_equals(getBox("spaceEx").width, 500, "ex");
      assert_equals(getBox("spaceIn").width, 288, "in");
      assert_equals(getBox("spaceMm").width, 576, "mm");
      assert_equals(getBox("spacePc").width, 96, "pc");
      assert_equals(getBox("spacePercentage").width, 60, "%");
      assert_equals(getBox("spacePt").width, 96, "pt");
      assert_equals(getBox("spacePx").width, 123, "px");
    }, "Trimming of space");

    test(function() {
      assert_true(MathMLFeatureDetection.has_mspace());
      assert_approx_equals(getBox("n0").width, 0, epsilon, "n0");
      assert_approx_equals(getBox("n1").width, 90, epsilon, "n1");
      assert_approx_equals(getBox("n2").width, 8, epsilon, "n2");
      assert_approx_equals(getBox("n4").width, 650, epsilon, "n4");
      assert_approx_equals(getBox("n5").width, 4320, epsilon, "n5");
      assert_approx_equals(getBox("n6").width, 1, epsilon, "n6");
      assert_approx_equals(getBox("n7").width, 8, epsilon, "n7");
      assert_approx_equals(getBox("n8").width, 65, epsilon, "n8");
      assert_approx_equals(getBox("n9").width, 432, epsilon, "n9");
      assert_approx_equals(getBox("n10").width, 123, epsilon, "n10");
    }, "Non-negative numbers");

    test(function() {
      assert_true(MathMLFeatureDetection.has_mspace());
      var topRef = getBox("ref").top;
      assert_approx_equals(getBox("N0").top - topRef, -0, epsilon, "N0");
      assert_approx_equals(topRef - getBox("N1").top, -90, epsilon, "N1");
      assert_approx_equals(topRef - getBox("N2").top, -8, epsilon, "N2");
      assert_approx_equals(topRef - getBox("N4").top, -650, epsilon, "N4");
      assert_approx_equals(topRef - getBox("N5").top, -4320, epsilon, "N5");
      assert_approx_equals(topRef - getBox("N6").top, -1, epsilon, "N6");
      assert_approx_equals(topRef - getBox("N7").top, -8, epsilon, "N7");
      assert_approx_equals(topRef - getBox("N8").top, -65, epsilon, "N8");
      assert_approx_equals(topRef - getBox("N9").top, -432, epsilon, "N9");
      assert_approx_equals(topRef - getBox("N10").top, -123, epsilon, "N10");
    }, "Non-positive numbers");

    test(function() {
      assert_true(MathMLFeatureDetection.has_mspace());
      // Namedspace values are invalid in MathML Core.
      ["veryverythinmathspace",
       "verythinmathspace",
       "thinmathspace",
       "mediummathspace",
       "thickmathspace",
       "verythickmathspace",
       "veryverythickmathspace",
       "negativeveryverythinmathspace",
       "negativeverythinmathspace",
       "negativethinmathspace",
       "negativemediummathspace",
       "negativethickmathspace",
       "negativeverythickmathspace",
       "negativeveryverythickmathspace"
      ].forEach(function(space) {
          var mrow = document.getElementById(space);
          var boxBefore = mrow.firstElementChild.getBoundingClientRect();
          var boxAfter = mrow.lastElementChild.getBoundingClientRect();
          assert_equals(boxAfter.left - boxBefore.right, 0, space);
      });
    }, "Legacy namedspaces");

    test(function() {
      assert_true(MathMLFeatureDetection.has_mspace());
      // These values are invalid in MathML Core.
      assert_equals(getBox("unitNone").width, 30, "Unitless");
      assert_approx_equals(getBox("n3").width, 0, epsilon, "n3");
      var topRef = getBox("ref").top;
      assert_approx_equals(topRef - getBox("N3").top, 0, epsilon, "N3");
    }, "Legacy numbers");

    done();
  }
</script>
</head>
<body>
  <div id="log"></div>
  <p>
    <math>
      <mspace id="unitCm" width="2.54cm"/>
      <mspace id="unitEm" width="12em"/>
      <mspace id="unitEx" width="100ex"/>
      <mspace id="unitIn" width="3in"/>
      <mspace id="unitMm" width="152.4mm"/>
      <mspace id="unitPc" width="6pc"/>
      <mstyle mathsize="200%"><mspace id="unitPercentage" width="3em"/></mstyle>
      <mspace id="unitPt" width="72pt"/>
      <mspace id="unitPx" width="123px"/>
      <mstyle mathsize="5"><mspace id="unitNone" width="3em"/></mstyle>
    </math>
  </p>
  <p>
    <math>
      <mspace id="spaceCm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;2.54cm&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mspace id="spaceEm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;12em&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mspace id="spaceEx" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;100ex&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mspace id="spaceIn" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;3in&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mspace id="spaceMm" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;152.4mm&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mspace id="spacePc" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;6pc&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mstyle mathsize="200%"><mspace id="spacePercentage" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;3em&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/></mstyle>
      <mspace id="spacePt" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;72pt&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
      <mspace id="spacePx" width="&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;123px&#x20;&#x9;&#xA;&#xD;&#x20;&#x9;&#xA;&#xD;"/>
    </math>
  </p>
  <p>
    <math>
      <mspace id="n0" width="0em"/>
      <mspace id="n1" width="9em"/>
      <mspace id="n2" width=".8em"/>
      <mspace id="n3" width="7.em"/>
      <mspace id="n4" width="65em"/>
      <mspace id="n5" width="432em"/>
      <mspace id="n6" width=".10em"/>
      <mspace id="n7" width=".789em"/>
      <mspace id="n8" width="6.5em"/>
      <mspace id="n9" width="43.21em"/>
      <mspace id="n10" width="012.345em"/>
    </math>
  </p>
  <p>
    <math>
      <mspace id="ref"></mspace>
      <mpadded voffset="-0em"><mspace id="N0"/></mpadded>
      <mpadded voffset="-9em"><mspace id="N1"/></mpadded>
      <mpadded voffset="-.8em"><mspace id="N2"/></mpadded>
      <mpadded voffset="-7.em"><mspace id="N3"/></mpadded>
      <mpadded voffset="-65em"><mspace id="N4"/></mpadded>
      <mpadded voffset="-432em"><mspace id="N5"/></mpadded>
      <mpadded voffset="-.10em"><mspace id="N6"/></mpadded>
      <mpadded voffset="-.789em"><mspace id="N7"/></mpadded>
      <mpadded voffset="-6.5em"><mspace id="N8"/></mpadded>
      <mpadded voffset="-43.21em"><mspace id="N9"/></mpadded>
      <mpadded voffset="-012.345em"><mspace id="N10"/></mpadded>
    </math>
  </p>
  <p>
    <math>
      <mrow id="veryverythinmathspace">
        <mspace width="1em"/>
        <mspace width="veryverythinmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="verythinmathspace">
        <mspace width="1em"/>
        <mspace width="verythinmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="thinmathspace">
        <mspace width="1em"/>
        <mspace width="thinmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="mediummathspace">
        <mspace width="1em"/>
        <mspace width="mediummathspace"/>
        <mspace/>
      </mrow>
      <mrow id="thickmathspace">
        <mspace width="1em"/>
        <mspace width="thickmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="verythickmathspace">
        <mspace width="1em"/>
        <mspace width="verythickmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="veryverythickmathspace">
        <mspace width="1em"/>
        <mspace width="veryverythickmathspace"/>
        <mspace/>
      </mrow>
    </math>
    <math>
      <mrow id="negativeveryverythinmathspace">
        <mspace width="1em"/>
        <mspace width="veryverythinmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="negativeverythinmathspace">
        <mspace width="1em"/>
        <mspace width="verythinmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="negativethinmathspace">
        <mspace width="1em"/>
        <mspace width="thinmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="negativemediummathspace">
        <mspace width="1em"/>
        <mspace width="mediummathspace"/>
        <mspace/>
      </mrow>
      <mrow id="negativethickmathspace">
        <mspace width="1em"/>
        <mspace width="thickmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="negativeverythickmathspace">
        <mspace width="1em"/>
        <mspace width="verythickmathspace"/>
        <mspace/>
      </mrow>
      <mrow id="negativeveryverythickmathspace">
        <mspace width="1em"/>
        <mspace width="veryverythickmathspace"/>
        <mspace/>
      </mrow>
    </math>
  </p>
</body>
</html>
