Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /uievents/focusevents/blur-relatedTarget.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>relatedTarget on blur()</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<input id="input1">
<input id="input2">
<script>
"use strict";
const input1 = document.getElementById("input1");
const input2 = document.getElementById("input2");
promise_test(async t => {
// Wait for the test window to gain focus before observing blur events.
await new Promise(resolve => {
input1.addEventListener("focus", resolve, { once: true });
input1.focus();
});
let blurCount = 0;
let focusoutCount = 0;
let focusCount = 0;
let focusinCount = 0;
const watchEvent = t.step_func(evt => {
const { relatedTarget, target, type } = evt;
if (type === "blur") {
assert_equals(target, input1, "blur target is input1");
assert_equals(relatedTarget, null, "blur relatedTarget is null");
blurCount++;
} else if (type === "focusout") {
assert_equals(target, input1, "focusout target is input1");
assert_equals(relatedTarget, null, "focusout relatedTarget is null");
focusoutCount++;
} else if (type === "focus") {
focusCount++;
} else if (type === "focusin") {
focusinCount++;
}
});
document.addEventListener("blur", watchEvent, true);
document.addEventListener("focusout", watchEvent, true);
document.addEventListener("focus", watchEvent, true);
document.addEventListener("focusin", watchEvent, true);
t.add_cleanup(() => {
document.removeEventListener("blur", watchEvent, true);
document.removeEventListener("focusout", watchEvent, true);
document.removeEventListener("focus", watchEvent, true);
document.removeEventListener("focusin", watchEvent, true);
input1.blur();
input2.blur();
});
input1.blur();
assert_equals(blurCount, 1, "blur fired once");
assert_equals(focusoutCount, 1, "focusout fired once");
assert_equals(focusCount, 0, "focus not fired");
assert_equals(focusinCount, 0, "focusin not fired");
assert_equals(document.activeElement, document.body, "activeElement is body");
}, "relatedTarget on self blur");
promise_test(async t => {
// Wait for the test window to gain focus before observing blur events.
await new Promise(resolve => {
input1.addEventListener("focus", resolve, { once: true });
input1.focus();
});
let blurCount = 0;
let focusoutCount = 0;
let focusCount = 0;
let focusinCount = 0;
const watchEvent = t.step_func(evt => {
const { relatedTarget, target, type } = evt;
if (type === "blur") {
assert_equals(target, input1, "blur target is input1");
assert_equals(relatedTarget, input2, "blur relatedTarget is input2");
blurCount++;
} else if (type === "focusout") {
assert_equals(target, input1, "focusout target is input1");
assert_equals(relatedTarget, input2, "focusout relatedTarget is input2");
focusoutCount++;
} else if (type === "focus") {
assert_equals(target, input2, "focus target is input2");
assert_equals(relatedTarget, input1, "focus relatedTarget is input1");
focusCount++;
} else if (type === "focusin") {
assert_equals(target, input2, "focusin target is input2");
assert_equals(relatedTarget, input1, "focusin relatedTarget is input1");
focusinCount++;
}
});
document.addEventListener("blur", watchEvent, true);
document.addEventListener("focusout", watchEvent, true);
document.addEventListener("focus", watchEvent, true);
document.addEventListener("focusin", watchEvent, true);
t.add_cleanup(() => {
document.removeEventListener("blur", watchEvent, true);
document.removeEventListener("focusout", watchEvent, true);
document.removeEventListener("focus", watchEvent, true);
document.removeEventListener("focusin", watchEvent, true);
input1.blur();
input2.blur();
});
input2.focus();
assert_equals(blurCount, 1, "blur fired once");
assert_equals(focusoutCount, 1, "focusout fired once");
assert_equals(focusCount, 1, "focus fired once");
assert_equals(focusinCount, 1, "focusin fired once");
assert_equals(document.activeElement, input2, "activeElement is input2");
}, "relatedTarget for blur when focusing on another element");
</script>