<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Operator dictionary (combining char)</title>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<link rel="help" href="https://w3c.github.io/mathml-core/#operator-fence-separator-or-accent-mo">
<link rel="help" href="https://w3c.github.io/mathml-core/#dictionary-based-attributes">
<link rel="help" href="https://w3c.github.io/mathml-core/#operator-dictionary">
<link rel="help" href="https://w3c.github.io/mathml-core/#layout-of-mrow">
<link rel="stylesheet" href="./support/operator-dictionary-tests.css"/>
<meta name="assert" content="Verify special handling of 2-char operator with a combining character">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/mathml/support/feature-detection.js"></script>
<style>
  mo {
      color: blue;
  }
  mn {
      background: black;
  }
</style>
<script>
  setup({ explicit_done: true });
  window.addEventListener("load", runTests);

  function spaceBetween(element, i, j) {
      return element.children[j].getBoundingClientRect().left -
          element.children[i].getBoundingClientRect().right;
  }
  function runTests() {
      var epsilon = 1;
      var emToPx = 25;

      [
          "equal",
          "vertical_bar",
          "left_normal_factor_semidirect_product",
          "there_exists",
      ].forEach(id => {
          var div = document.getElementById(id);
          var ref = div.getElementsByClassName("reference")[0];
          var totalSpaceRef = spaceBetween(ref, 0, 2);
          var lspaceRef = spaceBetween(ref, 0, 1);
          var rspaceRef = spaceBetween(ref, 1, 2);
          Array.from(div.getElementsByClassName("combining")).forEach(element => {
              test(function() {
                  assert_true(MathMLFeatureDetection.has_operator_spacing());
                  var totalSpace = spaceBetween(element, 0, 2);
                  var lspace = spaceBetween(element, 0, 1);
                  var rspace = spaceBetween(element, 1, 2);
                  assert_approx_equals(totalSpace, totalSpaceRef, epsilon);
                  assert_approx_equals(rspace, rspaceRef, epsilon);
                  assert_approx_equals(lspace, lspaceRef, epsilon);
              }, `Spacing around ${element.children[1].textContent}`);
          });
      });

      done();
  }
</script>
</head>
<body>
  <div id="log"></div>
  <div id="equal">
    <p>
      <math class="reference">
        <mn>&nbsp;</mn>
        <mo>=</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo>=&#x338;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo>=&#x20D2;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
  </div>
  <div id="vertical_bar">
    <p>
      <math class="reference">
        <mn>&nbsp;</mn>
        <mo stretchy="false">|</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo stretchy="false">|&#x338;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo stretchy="false">|&#x20D2;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
  </div>
  <div id="left_normal_factor_semidirect_product">
    <p>
      <math class="reference">
        <mn>&nbsp;</mn>
        <mo stretchy="false">⋉</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo stretchy="false">⋉&#x338;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo stretchy="false">⋉&#x20D2;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
  </div>
  <div id="there_exists">
    <p>
      <math class="reference">
        <mn>&nbsp;</mn>
        <mo stretchy="false">∃</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo stretchy="false">∃&#x338;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
    <p>
      <math class="combining">
        <mn>&nbsp;</mn>
        <mo stretchy="false">∃&#x20D2;</mo>
        <mn>&nbsp;</mn>
      </math>
    </p>
  </div>
</body>
</html>
