1 files changed, 111 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html b/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html
new file mode 100644
index 0000000000..028428cd75
--- /dev/null
+++ b/testing/web-platform/tests/mathml/relations/html5-tree/html-or-foreign-element-interfaces.tentative.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>MathML 'HTMLOrForeignElement` Mixin Tests</title>
+    <link rel="help" href="https://w3c.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>