From 459526984fc4d66d1b8883fe1b974dc5b4bddd2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Wang=20N=C3=A9lar?= <fwang@igalia.com>
Date: Tue, 12 May 2026 14:17:06 +0200
Subject: [PATCH]  Add tests for focus()/blur() on MathML elements.

https://github.com/whatwg/html/pull/12416
---
 .../relations/html5-tree/focus-blur-001.html  | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 mathml/relations/html5-tree/focus-blur-001.html
diff --git a/mathml/relations/html5-tree/focus-blur-001.html b/mathml/relations/html5-tree/focus-blur-001.html
new file mode 100644
index 00000000000000..af619f6cdc5c4a
--- /dev/null
+++ b/mathml/relations/html5-tree/focus-blur-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<title>focus()/blur()</title>
+<script src="/mathml/support/mathml-fragments.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<style>
+  annotation, annotation-xml { display: initial; }
+  mphantom { visibility: visible; }
+  .element { background: rgb(0, 0, 255); padding: 50px; }
+  .element:focus { background-color: rgb(0, 255, 0); }
+</style>
+<div id="log"></div>
+<input id="input"></input>
+<div id="container"><math class="element" tabindex="1"></math></div>
+<script>
+  for (tag in MathMLFragments) {
+    container.insertAdjacentHTML("beforeend", `<math>${MathMLFragments[tag]}</math>`);
+    let element = FragmentHelper.element(container.lastElementChild);
+    element.tabIndex = 1;
+  }
+  Array.from(document.getElementsByClassName("element")).forEach(element => {
+    promise_test(async t => {
+      t.add_cleanup(_ => window.scrollTo(0, 0));
+
+      await new Promise(resolve => {
+        input.addEventListener("focus", resolve, {once: true});
+        input.focus({preventScroll: true});
+      });
+      assert_equals(document.activeElement, input, "input initally selected");
+
+      await new Promise(resolve => {
+        element.addEventListener("focus", resolve, {once: true});
+        element.focus();
+      });
+      assert_equals(document.activeElement, element, "element selected after focus()");
+      assert_equals(getComputedStyle(element).backgroundColor, "rgb(0, 255, 0)", ":focus applied on element after focus()");
+
+      await new Promise(resolve => {
+        element.addEventListener("blur", resolve, {once: true});
+        element.blur();
+      });
+      assert_equals(document.activeElement, document.body, "element unselected after blur()");
+      assert_equals(getComputedStyle(element).backgroundColor, "rgb(0, 0, 255)", ":focus not applied on element after blur()");
+    }, `focus()/blur() works on the ${element.tagName} element.`);
+  });
+</script>
