1 files changed, 64 insertions, 0 deletions
diff --git a/testing/web-platform/tests/mathml/presentation-markup/operators/largeop-hit-testing.html b/testing/web-platform/tests/mathml/presentation-markup/operators/largeop-hit-testing.html
new file mode 100644
index 0000000000..2b81eb692a
--- /dev/null
+++ b/testing/web-platform/tests/mathml/presentation-markup/operators/largeop-hit-testing.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>Test hit testing on large operators</title>
+<meta name="assert" content="Verify that hit testing works on large operators.">
+<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/largeop-displayoperatorminheight5000.woff");
+  }
+  mo  {
+    font-family: TestFont;
+    font-size: 16px;
+  }
+</style>
+<script>
+  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_operator_spacing());
+
+      let bbox = getBox("largeop");
+      let hit = document.getElementById("largeop");
+      let reference = getBox("reference");
+      assert_true(bbox.height > reference.height, "height of large op is bigger than the equivalent normal operator");
+      assert_equals(hit, document.elementFromPoint(bbox.left + 1, bbox.top + 1), "hit testing top-left corner of large op works");
+      assert_equals(hit, document.elementFromPoint(bbox.right - 1, bbox.bottom - 1), "hit testing bottom-right corner of large op works");
+    }, "Large op hit testing");
+
+    done();
+  }
+</script>
+</head>
+<body>
+  <math>
+    <mtable>
+      <mtr>
+        <mtd>
+          <mstyle displaystyle="false">
+            <mo id="reference">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+        <mtd>
+          <mstyle displaystyle="true">
+            <mo id="largeop">&#x2AFF;</mo>
+          </mstyle>
+        </mtd>
+      </mtr>
+    </mtable>
+  </math>
+</body>
+</html>