Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: devtools/client/shared/test/browser.toml
/* Any copyright is dedicated to the Public Domain.
/* import-globals-from helper_inplace_editor.js */
"use strict";
const AutocompletePopup = require("resource://devtools/client/shared/autocomplete-popup.js");
const {
InplaceEditor,
} = require("resource://devtools/client/shared/inplace-editor.js");
loadHelperScript("helper_inplace_editor.js");
// Test the inplace-editor autocomplete popup for the `anchor()` function.
const MOCK_ANCHORS = ["--a", "--b", "--my-anchor", "--my-other-anchor"];
const ANCHOR_SIDES = [
"bottom",
"center",
"end",
"inside",
"left",
"outside",
"right",
"self-end",
"self-start",
"start",
"top",
];
add_task(async function testAutocompleteAnchorFunction() {
await addTab(
"data:text/html;charset=utf-8,inplace editor CSS anchor() autocomplete"
);
const { host, doc } = await createHost();
await checkAutocomplete({
doc,
initialText: "anchor(",
inputValueAfterSuggest: "anchor(--a",
popupItems: [...MOCK_ANCHORS, ...ANCHOR_SIDES],
});
await checkAutocomplete({
doc,
initialText: "anchor(--",
inputValueAfterSuggest: "anchor(--a",
popupItems: MOCK_ANCHORS,
});
await checkAutocomplete({
doc,
initialText: "anchor(--m",
inputValueAfterSuggest: "anchor(--my-anchor",
popupItems: ["--my-anchor", "--my-other-anchor"],
});
await checkAutocomplete({
doc,
initialText: "anchor(--a",
inputValueAfterSuggest: "anchor(--a",
popupItems: [],
});
await checkAutocomplete({
doc,
initialText: "anchor(--a ",
inputValueAfterSuggest: "anchor(--a bottom",
popupItems: ANCHOR_SIDES,
});
await checkAutocomplete({
doc,
initialText: "anchor(--a s",
inputValueAfterSuggest: "anchor(--a self-end",
popupItems: ["self-end", "self-start", "start"],
});
await checkAutocomplete({
doc,
initialText: "anchor(s",
inputValueAfterSuggest: "anchor(self-end",
popupItems: ["self-end", "self-start", "start"],
});
await checkAutocomplete({
doc,
initialText: "anchor(self-start ",
inputValueAfterSuggest: "anchor(self-start --a",
popupItems: MOCK_ANCHORS,
});
await checkAutocomplete({
doc,
initialText: "anchor(self-start --my",
inputValueAfterSuggest: "anchor(self-start --my-anchor",
popupItems: ["--my-anchor", "--my-other-anchor"],
});
await checkAutocomplete({
doc,
initialText: "anchor(self-start --my-anchor,",
inputValueAfterSuggest: "anchor(self-start --my-anchor,",
// no more autocomplete after the comma
popupItems: [],
});
await checkAutocomplete({
doc,
initialText: "anchor(self-start --my-anchor, ",
inputValueAfterSuggest: "anchor(self-start --my-anchor, ",
// no more autocomplete after the comma
popupItems: [],
});
await checkAutocomplete({
doc,
initialText: "anchor(self-start,",
inputValueAfterSuggest: "anchor(self-start,",
// no more autocomplete after the comma
popupItems: [],
});
host.destroy();
gBrowser.removeCurrentTab();
});
async function checkAutocomplete({
doc,
initialText,
inputValueAfterSuggest,
popupItems,
}) {
const popup = new AutocompletePopup(doc, { autoSelect: true });
await new Promise(resolve => {
createInplaceEditorAndClick(
{
initial: initialText,
start: async editor => {
await waitFor(() => editor.anchorNames);
const global = editor.input.defaultView;
// The content is selected at first, hit the Right key so the cursor is at
// the end of the input
EventUtils.synthesizeKey("VK_RIGHT", {}, global);
// Check the suggestion
await testCompletion(
[
// Hit Ctrl+Space to trigger suggestion
{
key: " ",
ctrlKey: true,
},
inputValueAfterSuggest,
popupItems.length ? 0 : -1,
popupItems,
],
editor
);
EventUtils.synthesizeKey("VK_RETURN", {}, global);
},
contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
property: {
name: "inset",
},
getCssAnchors: () => MOCK_ANCHORS,
done: resolve,
popup,
},
doc
);
});
popup.destroy();
}