<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Space</title>
<link rel="help" href="https://w3c.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;

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

  function getMetrics(aId) {
      let baseline = document.getElementById("baseline").getBoundingClientRect();
      let mspace = document.getElementById(aId).getBoundingClientRect();
      return {
          width: mspace.width,
          height: mspace.height,
          line_ascent: (baseline.top + baseline.bottom)/2 - mspace.top
      };
  }

  function runTests() {
      test(function() {
          let metrics = getMetrics("widthAttributePlusWidthProperty");
          assert_approx_equals(metrics.width, 200, epsilon,
                               "mspace width overridden by inline style");
          assert_approx_equals(metrics.height, 200, epsilon,
                               "mspace height as specified by height attribute");
          assert_approx_equals(metrics.line_ascent, 200, epsilon,
                               "mspace line-ascent as specified by height attribute");
      }, "width attribute + width property");

      test(function() {
          let metrics = getMetrics("heightAndDepthAttributesPlusHeightProperty");
          assert_approx_equals(metrics.width, 200, epsilon,
                               "mspace width as specified by attribute");
          assert_approx_equals(metrics.height, 200, epsilon,
                               "mspace height overridden by inline style");
          assert_approx_equals(metrics.line_ascent, 100, epsilon,
                               "mspace line-ascent as specified by height attribute");
      }, "height/depth attributes + height property");

      test(function() {
          let metrics = getMetrics("heightAttributePlusHeightProperty");
          assert_approx_equals(metrics.width, 200, epsilon,
                               "mspace width as specified by attribute");
          assert_approx_equals(metrics.height, 200, epsilon,
                               "mspace height overridden by inline style");
          assert_approx_equals(metrics.line_ascent, 300, epsilon,
                               "mspace line-ascent as specified by height attribute");
      }, "height attribute + height property");

      test(function() {
          let metrics = getMetrics("depthAttributePlusHeightProperty");
          assert_approx_equals(metrics.width, 200, epsilon,
                               "mspace width as specified by attribute");
          assert_approx_equals(metrics.height, 200, epsilon,
                               "mspace height overridden by inline style");
          assert_approx_equals(metrics.line_ascent, 0, epsilon,
                               "mspace line-ascent defaults to 0");
      }, "depth attribute + height property");

      done();
  }
</script>
</head>
<body>
  <div id="log"></div>

    <math>
      <!-- Reference baseline -->
      <mspace id="baseline" style="background: black"
              width="10px" height="100px" depth="100px"/>

      <!-- width="500px" is a presentational hint
           setting the element's width property to the corresponding value,
           overridden by the inline style width: 200px.
           height="200px" sets the height/line-ascent to 200px. -->
      <mspace id="widthAttributePlusWidthProperty"
              width="500px" height="200px"
              style="width: 200px; background: green"/>

      <!-- height="100px" + depth="200px" are used as a presentational hint
           setting the element's height property to calc(100px + 200px),
           overridden by inline style height: 200px.
           height="100px" sets the line-ascent to 100px. -->
      <mspace id="heightAndDepthAttributesPlusHeightProperty"
              width="200px" height="100px" depth="200px"
              style="height: 200px; background: blue"/>

      <!-- height="300px" is used as a presentational hint
           setting the element's height property to the corresponding value,
           overridden by inline style height: 200px.
           height="300px" sets the line-ascent to 300px. -->
      <mspace id="heightAttributePlusHeightProperty"
              width="200px" height="300px"
              style="height: 200px; background: magenta"/>

      <!-- depth="300px" is used as a presentational hint
           setting the element's height property to the corresponding value,
           overridden by inline style height: 200px.
           The line-ascent defaults to 0. -->
      <mspace id="depthAttributePlusHeightProperty"
              width="200px" depth="300px"
              style="height: 200px; background: yellow"/>
    </math>

  </body>
</html>
