<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MathML 'HTMLOrForeignElement` Mixin Tests</title>
    <link rel="help" href="https://mathml-refresh.github.io/mathml-core/#dom-and-javascript"/>
    <style>
      mi {
        background-color: red;
      }
      :focus {
        background-color: rgb(0, 255, 0);
      }
    </style>
    <meta
      name="assert"
      content="MathMLElements incorporate a functional HTMLOrForeignElement interface"
    />
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
  </head>
  <body tabindex="-1">
    <span tabindex="-1"
      >This tests the presence and functionality of features of
      `HTMLOrForeignElement` (currently `HTMLOrSVGElement`)</span>
    <math tabindex="-1">
      <mi>E</mi>
    </math>
  </body>
  <script>
    // spot check the functionality of several interfaces
    let el = document.querySelector("mi");
    let mathEl = document.querySelector("math");

    // this really belongs in
    // https://github.com/web-platform-tests/wpt/blob/master/html/dom/elements/global-attributes/dataset.html
    // it is here tentatively
    test(function() {
      var mathml = document.createElementNS(
        "http://www.w3.org/1998/Math/MathML",
        "math"
      );
      assert_true(mathml.dataset instanceof DOMStringMap);
    }, "MathML elements should have a .dataset");

    // exercise some basic tests on .dataset
    test(function() {
      assert_equals(
        Object.keys(el.dataset).toString(),
        "",
        "The .dataset property should be present"
      );

      el.setAttribute("data-one", "x");
      el.setAttribute("data-two", "y");

      assert_equals(
        el.dataset.one,
        "x",
        '.one should be "x" after setting the data-one attribute'
      );
      assert_equals(
        el.dataset.two,
        "y",
        '.one should be "y" after setting the data-two attribute'
      );

      el.dataset.one = "o";
      assert_equals(
        el.getAttribute("data-one"),
        "o",
        'the data-one attribute should reflect a change to dataset.one and contain "o"'
      );
    }, "The dataset property should be present and be functional.");

    test(function() {
      assert_equals(mathEl.tabIndex, -1);
    }, "MathML elements should have a tabIndex property");

    promise_test(function() {
      function focus() {
        mathEl.focus();
        return Promise.resolve();
      }

      return focus().then(() => {
        assert_equals(
          getComputedStyle(mathEl).backgroundColor,
          "rgb(0, 255, 0)",
          "MathML elements with tabindex=-1 should be programmatically focusable and apply :focus"
        );
      });
    }, "MathML elements should work with focus predictably");

    promise_test(function() {
      function blur() {
        mathEl.blur();
        return Promise.resolve();
      }

      return blur().then(() => {
        assert_equals(
          getComputedStyle(mathEl).backgroundColor,
          "rgba(0, 0, 0, 0)",
          "MathML elements with tabindex=-1 be programmatically blur() able"
        );
      });
    }, "MathML elements should work with blur predictably");
  </script>
</html>