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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
/* import-globals-from helper_inplace_editor.js */
"use strict";
loadHelperScript("helper_inplace_editor.js");
// Test the inplace-editor behavior with focusEditableFieldAfterApply
// and focusEditableFieldContainerSelector options
add_task(async function () {
await addTab(
"data:text/html;charset=utf-8,inline editor focusEditableFieldAfterApply"
);
const { host, doc } = await createHost();
testFocusNavigationWithMultipleEditor(doc);
testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(doc);
testMissingFocusEditableFieldContainerSelector(doc);
host.destroy();
gBrowser.removeCurrentTab();
});
function testFocusNavigationWithMultipleEditor(doc) {
// For some reason <button> or <input> are not rendered, so let's use divs with
// tabindex attribute to make them focusable.
doc.body.innerHTML = `
<main>
<header>
<div role=button tabindex=0 id="header-button">HEADER</div>
</header>
<section>
<span id="span-1" tabindex=0>SPAN 1</span>
<div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
<p>
<span id="span-2" tabindex=0>SPAN 2</span>
<div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
</p>
<span id="span-3" tabindex=0>SPAN 3</span>
<div role=button tabindex=0 id="section-button-3">BUTTON 3</div>
</section>
<sidebar>
<div role=button tabindex=0 id="sidebar-button">SIDEBAR</div>
</sidebar>
<main>`;
const span1 = doc.getElementById("span-1");
const span2 = doc.getElementById("span-2");
const span3 = doc.getElementById("span-3");
info("Create 3 editable fields for the 3 spans inside the main element");
const options = {
focusEditableFieldAfterApply: true,
focusEditableFieldContainerSelector: "main",
};
editableField({
element: span1,
...options,
});
editableField({
element: span2,
...options,
});
editableField({
element: span3,
...options,
});
span1.click();
is(
doc.activeElement.inplaceEditor.elt.id,
"span-1",
"Visible editable field is the one associated with span-1"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.inplaceEditor.elt.id,
"span-2",
"Using Tab moved focus to span-2 editable field"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.inplaceEditor.elt.id,
"span-3",
"Using Tab moved focus to span-3 editable field"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.id,
"sidebar-button",
"Using Tab moved focus outside of <main>"
);
}
function testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(
doc
) {
// For some reason <button> or <input> are not rendered, so let's use divs with
// tabindex attribute to make them focusable.
doc.body.innerHTML = `
<main>
<span id="span-1" tabindex=0>SPAN 1</span>
<div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
<span id="span-2" tabindex=0>SPAN 2</span>
<div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
<main>`;
const span1 = doc.getElementById("span-1");
const span2 = doc.getElementById("span-2");
info(
"Create editable fields for the 2 spans, but pass a focusEditableFieldContainerSelector that does not match any element"
);
const options = {
focusEditableFieldAfterApply: true,
focusEditableFieldContainerSelector: ".does-not-exist",
};
editableField({
element: span1,
...options,
});
editableField({
element: span2,
...options,
});
span1.click();
is(
doc.activeElement.inplaceEditor.elt.id,
"span-1",
"Visible editable field is the one associated with span-1"
);
assertFocusedElementInplaceEditorInput(doc);
EventUtils.sendKey("Tab");
is(
doc.activeElement.id,
"section-button-1",
"Using Tab moved focus to section-button-1, non-editable field"
);
ok(!doc.querySelector("input"), "There's no editable input displayed");
}
function testMissingFocusEditableFieldContainerSelector(doc) {
doc.body.innerHTML = "";
const element = createSpan(doc);
editableField({
element,
focusEditableFieldAfterApply: true,
});
element.click();
is(
element.style.display,
"inline-block",
"The original <span> was not hidden"
);
ok(!doc.querySelector("input"), "No input was created");
}
function assertFocusedElementInplaceEditorInput(doc) {
ok(
doc.activeElement.matches("input.styleinspector-propertyeditor"),
"inplace editor input is focused"
);
}
|
