--- a/devtools/client/shared/test/browser.ini
+++ b/devtools/client/shared/test/browser.ini
@@ -142,16 +142,17 @@ skip-if = e10s # Bug 1221911, bug 122228
 [browser_html_tooltip_rtl.js]
 [browser_html_tooltip_variable-height.js]
 [browser_html_tooltip_width-auto.js]
 [browser_html_tooltip_xul-wrapper.js]
 [browser_inplace-editor-01.js]
 [browser_inplace-editor-02.js]
 [browser_inplace-editor_autocomplete_01.js]
 [browser_inplace-editor_autocomplete_02.js]
+[browser_inplace-editor_autocomplete_css_variables.js]
 [browser_inplace-editor_autocomplete_offset.js]
 [browser_inplace-editor_maxwidth.js]
 [browser_keycodes.js]
 [browser_key_shortcuts.js]
 [browser_layoutHelpers.js]
 skip-if = e10s # Layouthelpers test should not run in a content page.
 [browser_layoutHelpers-getBoxQuads.js]
 [browser_num-l10n.js]

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);
+});