1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<!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>
<link rel="help" href="https://w3c.github.io/uievents/#events-focusevent-event-order">
<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>
|
