gecko-dev/dom/events/test/test_bug687787.html
Kevin Wern 19f18efeac Bug 687787: support focusin/focusout based on webkit/blink r=smaug
Blink and webkit launch focusin after focus and focusout after blur. Despite
this contradiction with the spec, it is best to mirror this new way, as there
is little guidance or existing code to clarify implementation amiguities that
can arise from the spec.

If focus/blur is fired on a window or document, or the event triggers a change
of focus, do not fire the corresponding focusin/focusout. Otherwise, always
fire the corresponding event.

Additionally, add a mochitest and a w3c-platform-test.

MozReview-Commit-ID: AgQ8JBxKIqK
2016-10-06 21:39:53 -04:00

618 lines
21 KiB
HTML

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=687787
-->
<head>
<title>Test for Bug 687787</title>
<script type="text/javascript" src="/MochiKit/MochiKit.js"></script>
<script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=687787">Mozilla Bug 687787</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
<script class="testbody" type="text/javascript">
var content = document.getElementById('content');
var eventStack = [];
function _callback(e){
var event = {'type' : e.type, 'target' : e.target, 'relatedTarget' : e.relatedTarget }
eventStack.push(event);
}
function clearEventStack(){
eventStack = [];
}
window.addEventListener("focus", _callback, true);
window.addEventListener("focusin", _callback, true);
window.addEventListener("focusout", _callback, true);
window.addEventListener("blur", _callback, true);
function CompareEventToExpected(e, expected) {
if (expected == null || e == null)
return false;
if (e.type == expected.type && e.target == expected.target && e.relatedTarget == expected.relatedTarget)
return true;
return false;
}
function TestEventOrderNormal() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var input3 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
input3.setAttribute('id', 'input3');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input3.setAttribute('type', 'text');
content.appendChild(input1);
content.appendChild(input2);
content.appendChild(input3);
content.style.display = 'block'
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input2,
'relatedTarget' : input1},
{'type' : 'focusin',
'target' : input2,
'relatedTarget' : input1},
{'type' : 'blur',
'target' : input2,
'relatedTarget' : input3},
{'type' : 'focusout',
'target' : input2,
'relatedTarget' : input3},
{'type' : 'focus',
'target' : input3,
'relatedTarget' : input2},
{'type' : 'focusin',
'target' : input3,
'relatedTarget' : input2},
]
input1.focus();
clearEventStack();
input2.focus();
input3.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length ; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestEventOrderNormalFiresAtRightTime() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var input3 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
input3.setAttribute('id', 'input3');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input3.setAttribute('type', 'text');
input1.onblur = function(e)
{
ok(document.activeElement == document.body, 'input1: not focused when blur fires')
}
input1.addEventListener('focusout', function(e)
{
ok(document.activeElement == document.body, 'input1: not focused when focusout fires')
});
input2.onfocus = function(e)
{
ok(document.activeElement == input2, 'input2: focused when focus fires')
}
input2.addEventListener('focusin', function(e)
{
ok(document.activeElement == input2, 'input2: focused when focusin fires')
});
content.appendChild(input1);
content.appendChild(input2);
content.style.display = 'block'
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input2,
'relatedTarget' : input1},
{'type' : 'focusin',
'target' : input2,
'relatedTarget' : input1},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length ; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestFocusOutRedirectsFocus() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var input3 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
input3.setAttribute('id', 'input3');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input3.setAttribute('type', 'text');
input1.addEventListener('focusout', function () {
input3.focus();
});
content.appendChild(input1);
content.appendChild(input2);
content.appendChild(input3);
content.style.display = 'block'
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input3,
'relatedTarget' : null},
{'type' : 'focusin',
'target' : input3,
'relatedTarget' : null},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestFocusInRedirectsFocus() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var input3 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
input3.setAttribute('id', 'input3');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input3.setAttribute('type', 'text');
input2.addEventListener('focusin', function () {
input3.focus();
});
content.appendChild(input1);
content.appendChild(input2);
content.appendChild(input3);
content.style.display = 'block'
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input2,
'relatedTarget' : input1},
{'type' : 'focusin',
'target' : input2,
'relatedTarget' : input1},
{'type' : 'blur',
'target' : input2,
'relatedTarget' : input3},
{'type' : 'focusout',
'target' : input2,
'relatedTarget' : input3},
{'type' : 'focus',
'target' : input3,
'relatedTarget' : input2},
{'type' : 'focusin',
'target' : input3,
'relatedTarget' : input2},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestBlurRedirectsFocus() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var input3 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
input3.setAttribute('id', 'input3');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input3.setAttribute('type', 'text');
input1.onblur = function () {
input3.focus();
}
content.appendChild(input1);
content.appendChild(input2);
content.appendChild(input3);
content.style.display = 'block'
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input3,
'relatedTarget' : null},
{'type' : 'focusin',
'target' : input3,
'relatedTarget' : null},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestFocusRedirectsFocus() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var input3 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
input3.setAttribute('id', 'input3');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input3.setAttribute('type', 'text');
input2.onfocus = function () {
input3.focus();
}
content.appendChild(input1);
content.appendChild(input2);
content.appendChild(input3);
content.style.display = 'block'
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input2,
'relatedTarget' : input1},
{'type' : 'blur',
'target' : input2,
'relatedTarget' : input3},
{'type' : 'focusout',
'target' : input2,
'relatedTarget' : input3},
{'type' : 'focus',
'target' : input3,
'relatedTarget' : input2},
{'type' : 'focusin',
'target' : input3,
'relatedTarget' : input2},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestEventOrderDifferentDocument() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var iframe1 = document.createElement('iframe');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
iframe1.setAttribute('id', 'iframe1');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
content.appendChild(input1);
content.appendChild(iframe1);
iframe1.contentDocument.body.appendChild(input2);
content.style.display = 'block'
iframe1.contentDocument.addEventListener("focus", _callback, true);
iframe1.contentDocument.addEventListener("focusin", _callback, true);
iframe1.contentDocument.addEventListener("focusout", _callback, true);
iframe1.contentDocument.addEventListener("blur", _callback, true);
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : null},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : null},
{'type' : 'blur',
'target' : document,
'relatedTarget' : null},
{'type' : 'blur',
'target' : window,
'relatedTarget' : null},
{'type' : 'focus',
'target' : iframe1.contentDocument,
'relatedTarget' : null},
{'type' : 'focus',
'target' : input2,
'relatedTarget' : null},
{'type' : 'focusin',
'target' : input2,
'relatedTarget' : null},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestFocusOutMovesTarget() {
var input1 = document.createElement('input');
var input2 = document.createElement('input');
var iframe1 = document.createElement('iframe');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input2.setAttribute('id', 'input2');
iframe1.setAttribute('id', 'iframe1');
input1.setAttribute('type', 'text');
input2.setAttribute('type', 'text');
input1.addEventListener('focusout', function () {
iframe1.contentDocument.body.appendChild(input2);
});
content.appendChild(input1);
content.appendChild(input2);
content.appendChild(iframe1);
content.style.display = 'block'
iframe1.contentDocument.addEventListener("focus", _callback, true);
iframe1.contentDocument.addEventListener("focusin", _callback, true);
iframe1.contentDocument.addEventListener("focusout", _callback, true);
iframe1.contentDocument.addEventListener("blur", _callback, true);
expectedEventOrder = [
{'type' : 'blur',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focusout',
'target' : input1,
'relatedTarget' : input2},
{'type' : 'focus',
'target' : input2,
'relatedTarget' : null},
{'type' : 'focusin',
'target' : input2,
'relatedTarget' : null},
]
input1.focus();
clearEventStack();
input2.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
function TestBlurWindowAndRefocusInputOnlyFiresFocusInOnInput() {
var input1 = document.createElement('input');
var content = document.getElementById('content');
input1.setAttribute('id', 'input1');
input1.setAttribute('type', 'text');
content.appendChild(input1);
expectedEventOrder = [
{'type' : 'focus',
'target' : document,
'relatedTarget' : null},
{'type' : 'focus',
'target' : window,
'relatedTarget' : null},
{'type' : 'focus',
'target' : input1,
'relatedTarget' : null},
{'type' : 'focusin',
'target' : input1,
'relatedTarget' : null},
]
window.blur();
clearEventStack();
input1.focus();
for (var i = 0; i < expectedEventOrder.length || i < eventStack.length; i++) {
ok(CompareEventToExpected(expectedEventOrder[i], eventStack[i]), 'Normal event order is correct: Event ' + i + ': '
+ 'Expected ('
+ expectedEventOrder[i].type + ','
+ (expectedEventOrder[i].target ? expectedEventOrder[i].target.id : null) + ','
+ (expectedEventOrder[i].relatedTarget ? expectedEventOrder[i].relatedTarget.id : null) + '), '
+ 'Actual ('
+ eventStack[i].type + ','
+ (eventStack[i].target ? eventStack[i].target.id : null) + ','
+ (eventStack[i].relatedTarget ? eventStack[i].relatedTarget.id : null) + ')');
}
content.innerHTML = '';
}
TestEventOrderNormal();
TestEventOrderNormalFiresAtRightTime();
TestFocusOutRedirectsFocus();
TestFocusInRedirectsFocus();
TestBlurRedirectsFocus();
TestFocusRedirectsFocus();
TestFocusOutMovesTarget();
TestEventOrderDifferentDocument();
TestBlurWindowAndRefocusInputOnlyFiresFocusInOnInput();
</script>
</pre>
</body>
</html>