Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Focus-related events (including legacy events) should fire in the correct order</title>
<meta name="flags" content="interact">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<ol>
<li>Click into the first text input.</li>
<li>Click into the second text input.</li>
<li>Click the "Done" button.</li>
</ol>
<input type="text" id="a" value="First">
<br>
<input type="text" id="b" value="Second">
<br>
<button type="button" id="done">Done</button>
<script>
setup({explicit_timeout: true});
var done = false;
var events = [];
var targets = [];
function record(e) {
if (done) {
return;
}
events.push(e.type);
targets.push(e.target.id);
}
function finish() {
done = true;
}
var relevantEvents = [
'focus',
'blur',
'focusin',
'focusout',
'DOMFocusIn',
'DOMFocusOut'
];
window.onload = function () {
var a = document.getElementById('a');
var b = document.getElementById('b');
var inputs = [a, b];
b.addEventListener('blur', finish, false);
b.addEventListener('focusout', finish, false);
b.addEventListener('DOMFocusOut', finish, false);
for (var i = 0; i < inputs.length; i++) {
for (var k = 0; k < relevantEvents.length; k++) {
inputs[i].addEventListener(relevantEvents[k], record, false);
}
}
async_test(function(t) {
document.getElementById('done').addEventListener('click', function () {
finish();
t.step(function () {
assert_array_equals(
events,
['focusin', 'focus', 'DOMFocusIn', 'focusout', 'focusin', 'blur', 'DOMFocusOut', 'focus', 'DOMFocusIn'],
'Focus-related events should fire in this order: focusin, focus, DOMFocusIn, focusout, focusin, blur, DOMFocusOut, focus, DOMFocusIn'
);
assert_array_equals(
targets,
[ 'a', 'a', 'a', 'a', 'b', 'a', 'a', 'b', 'b'],
'Focus-related events should fire at the correct targets'
);
t.done();
});
}, false);
}, 'Focus-related events should fire in the correct order');
};
</script>
</body>
</html>