new file mode 100644
--- /dev/null
+++ b/devtools/client/shared/test/browser_inplace-editor_autocomplete_css_variables.js
@@ -0,0 +1,83 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+/* import-globals-from helper_inplace_editor.js */
+
+"use strict";
+
+const AutocompletePopup = require("devtools/client/shared/autocomplete-popup");
+const { InplaceEditor } = require("devtools/client/shared/inplace-editor");
+loadHelperScript("helper_inplace_editor.js");
+
+// Test that the inplace editor autocompletes css variables for CSS_VALUE autocompletes.
+
+// format :
+// [
+// what key to press,
+// expected input box value after keypress,
+// selected suggestion index (-1 if popup is hidden),
+// number of suggestions in the popup (0 if popup is hidden),
+// ]
+const testData = [
+ ["v", "v", -1, 0],
+ ["a", "va", -1, 0],
+ ["r", "var", -1, 0],
+ ["(", "var(", -1, 0],
+ // Autocomplete popup appears with the first "-".
+ ["-", "var(--other", 0, 4],
+ ["-", "var(--other", 0, 4],
+ // The --other entry will be filtered out as the user types "t".
+ ["t", "var(--test-1", 0, 3],
+ // Loop through remaining entries.
+ ["VK_DOWN", "var(--test-2", 1, 3],
+ ["VK_DOWN", "var(--test-3", 2, 3],
+ // Select the entry by pressing RIGHT arrow.
+ ["VK_RIGHT", "var(--test-3", -1, 0],
+ [")", "var(--test-3)", -1, 0],
+];
+
+// Map of css variables that will be available for autocompletion
+const cssVariables = new Map([
+ ["--test-1", "red"],
+ ["--test-2", "green"],
+ ["--test-3", "blue"],
+ ["--other", "yellow"],
+]);
+
+add_task(async function () {
+ await addTab(`data:text/html;charset=utf-8,
+ inplace editor CSS Variables autocompletion`);
+
+ let [host, win, doc] = await createHost();
+
+ let xulDocument = win.top.document;
+ let popup = new AutocompletePopup(xulDocument, { autoSelect: true });
+
+ await new Promise(resolve => {
+ createInplaceEditorAndClick({
+ start: runAutocompletionTest,
+ contentType: InplaceEditor.CONTENT_TYPES.CSS_VALUE,
+ cssVariables,
+ property: {
+ name: "color"
+ },
+ done: resolve,
+ popup: popup,
+ }, doc);
+ });
+
+ popup.destroy();
+ host.destroy();
+ gBrowser.removeCurrentTab();
+});
+
+let runAutocompletionTest = Task.async(function* (editor) {
+ info("Starting to test for css variables completion");
+ editor._getCSSValuesForPropertyName = () => [];
+
+ for (let data of testData) {
+ yield testCompletion(data, editor);
+ }
+
+ EventUtils.synthesizeKey("VK_RETURN", {}, editor.input.defaultView);
+});