Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /uievents/order-of-events/focus-events/focus-automated-blink-webkit.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<!-- Modified from Chris Rebert's manual version -->
<!-- This documents the behavior according to blink's implementation -->
<html>
<head>
<meta charset="utf-8">
<title>Focus-related events should fire in the correct order</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body id="body">
<input type="text" id="a" value="First">
<input type="text" id="b" value="Second">
<br>
<input type="text" id="c" value="Third">
<iframe id="iframe">
</iframe>
<br>
<script>
var test_id = 0;
var tests = ['normal', 'iframe']
function record(evt) {
if (done && (evt.type == 'focusin' || evt.type == 'focus') && (evt.target == c)) {
startNext();
}
if (!done) {
var activeElement = document.activeElement ?
(document.activeElement.tagName === 'IFRAME' ?
document.activeElement.contentDocument.activeElement.id :
document.activeElement.id) : null;
events[tests[test_id]].push(evt.type);
targets[tests[test_id]].push(evt.target.id);
focusedElements[tests[test_id]].push(activeElement);
relatedTargets[tests[test_id]].push(evt.relatedTarget ? evt.relatedTarget.id : null);
}
}
function startNext() {
done = false;
test_id++;
}
function finish() {
done = true;
}
var relevantEvents = [
'focus',
'blur',
'focusin',
'focusout'
];
var iframe = document.getElementById('iframe');
var a = document.getElementById('a');
var b = document.getElementById('b');
var c = document.getElementById('c');
var d = document.createElement('input');
d.setAttribute('id', 'd');
d.setAttribute('type', 'text');
d.setAttribute('value', 'Fourth');
var events = {'normal': [], 'iframe': []};
var targets = {'normal': [], 'iframe': []};
var focusedElements = {'normal': [], 'iframe': []};
var relatedTargets = {'normal': [], 'iframe': []};
var done = false;
var async_test_normal = async_test('Focus-related events should fire in the correct order (same DocumentOwner)');
var async_test_iframe_static = async_test('Focus-related events should fire in the correct order (different DocumentOwner)');
window.onload = function(evt) {
iframe.contentDocument.body.appendChild(d);
var inputs = [a, b, c, d];
for (var i = 0; i < inputs.length; i++) {
for (var k = 0; k < relevantEvents.length; k++) {
inputs[i].addEventListener(relevantEvents[k], record, false);
}
}
a.addEventListener('focusin', function() { b.focus(); }, false);
b.addEventListener('focusin', function() {
async_test_normal.step( function() {
assert_array_equals(
events['normal'],
['focus', 'focusin', 'blur', 'focusout', 'focus', 'focusin'],
'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus'
);
assert_array_equals(
targets['normal'],
[ 'a', 'a', 'a', 'a', 'b', 'b'],
'Focus-related events should fire at the correct targets'
);
assert_array_equals(
relatedTargets['normal'],
[ null, null, 'b', 'b', 'a', 'a'],
'Focus-related events should reference correct relatedTargets'
);
assert_array_equals(
focusedElements['normal'],
[ 'a', 'a', 'body', 'body', 'b', 'b'],
'Focus-related events should fire at the correct time relative to actual focus changes'
);
async_test_normal.done();
});
b.addEventListener('focusout', function() { finish(); c.focus(); });
b.blur();
}, false);
c.addEventListener('focusin', function() {d.focus();});
d.addEventListener('focusin', function() {
async_test_iframe_static.step(function() {
assert_array_equals(
events['iframe'],
['focus', 'focusin', 'blur', 'focusout', 'focus', 'focusin'],
'Focus-related events should fire in this order: focusin, focus, focusout, focusin, blur, focus'
);
assert_array_equals(
targets['iframe'],
[ 'c', 'c', 'c', 'c', 'd', 'd'],
'Focus-related events should fire at the correct targets'
);
assert_array_equals(
relatedTargets['iframe'],
[ null, null, null, null, null, null],
'Focus-related events should reference correct relatedTargets'
);
assert_array_equals(
focusedElements['iframe'],
[ 'c', 'c', 'body', 'body', 'd', 'd'],
'Focus-related events should fire at the correct time relative to actual focus changes'
);
async_test_iframe_static.done();
});
d.addEventListener('focusout', function() { finish();});
}, false);
a.focus();
}
</script>
</body>
</html>