1 /* Any copyright is dedicated to the Public Domain.
2 http://creativecommons.org/publicdomain/zero/1.0/ */
3 /* import-globals-from helper_inplace_editor.js */
7 loadHelperScript("helper_inplace_editor.js");
9 // Test the inplace-editor behavior with focusEditableFieldAfterApply
10 // and focusEditableFieldContainerSelector options
12 add_task(async function () {
14 "data:text/html;charset=utf-8,inline editor focusEditableFieldAfterApply"
16 const { host, doc } = await createHost();
18 testFocusNavigationWithMultipleEditor(doc);
19 testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(doc);
20 testMissingFocusEditableFieldContainerSelector(doc);
23 gBrowser.removeCurrentTab();
26 function testFocusNavigationWithMultipleEditor(doc) {
27 // For some reason <button> or <input> are not rendered, so let's use divs with
28 // tabindex attribute to make them focusable.
29 doc.body.innerHTML = `
32 <div role=button tabindex=0 id="header-button">HEADER</div>
35 <span id="span-1" tabindex=0>SPAN 1</span>
36 <div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
38 <span id="span-2" tabindex=0>SPAN 2</span>
39 <div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
41 <span id="span-3" tabindex=0>SPAN 3</span>
42 <div role=button tabindex=0 id="section-button-3">BUTTON 3</div>
45 <div role=button tabindex=0 id="sidebar-button">SIDEBAR</div>
49 const span1 = doc.getElementById("span-1");
50 const span2 = doc.getElementById("span-2");
51 const span3 = doc.getElementById("span-3");
53 info("Create 3 editable fields for the 3 spans inside the main element");
55 focusEditableFieldAfterApply: true,
56 focusEditableFieldContainerSelector: "main",
74 doc.activeElement.inplaceEditor.elt.id,
76 "Visible editable field is the one associated with span-1"
78 assertFocusedElementInplaceEditorInput(doc);
80 EventUtils.sendKey("Tab");
83 doc.activeElement.inplaceEditor.elt.id,
85 "Using Tab moved focus to span-2 editable field"
87 assertFocusedElementInplaceEditorInput(doc);
89 EventUtils.sendKey("Tab");
92 doc.activeElement.inplaceEditor.elt.id,
94 "Using Tab moved focus to span-3 editable field"
96 assertFocusedElementInplaceEditorInput(doc);
98 EventUtils.sendKey("Tab");
101 doc.activeElement.id,
103 "Using Tab moved focus outside of <main>"
107 function testFocusNavigationWithNonMatchingFocusEditableFieldContainerSelector(
110 // For some reason <button> or <input> are not rendered, so let's use divs with
111 // tabindex attribute to make them focusable.
112 doc.body.innerHTML = `
114 <span id="span-1" tabindex=0>SPAN 1</span>
115 <div role=button tabindex=0 id="section-button-1">BUTTON 1</div>
116 <span id="span-2" tabindex=0>SPAN 2</span>
117 <div role=button tabindex=0 id="section-button-2">BUTTON 2</div>
120 const span1 = doc.getElementById("span-1");
121 const span2 = doc.getElementById("span-2");
124 "Create editable fields for the 2 spans, but pass a focusEditableFieldContainerSelector that does not match any element"
127 focusEditableFieldAfterApply: true,
128 focusEditableFieldContainerSelector: ".does-not-exist",
142 doc.activeElement.inplaceEditor.elt.id,
144 "Visible editable field is the one associated with span-1"
146 assertFocusedElementInplaceEditorInput(doc);
148 EventUtils.sendKey("Tab");
151 doc.activeElement.id,
153 "Using Tab moved focus to section-button-1, non-editable field"
155 ok(!doc.querySelector("input"), "There's no editable input displayed");
158 function testMissingFocusEditableFieldContainerSelector(doc) {
159 doc.body.innerHTML = "";
160 const element = createSpan(doc);
163 focusEditableFieldAfterApply: true,
168 element.style.display,
170 "The original <span> was not hidden"
172 ok(!doc.querySelector("input"), "No input was created");
175 function assertFocusedElementInplaceEditorInput(doc) {
177 doc.activeElement.matches("input.styleinspector-propertyeditor"),
178 "inplace editor input is focused"