--- a/devtools/client/inspector/markup/test/browser.ini
+++ b/devtools/client/inspector/markup/test/browser.ini
@@ -59,16 +59,17 @@ skip-if = os == "mac" # Full keyboard na
 [browser_markup_anonymous_02.js]
 skip-if = e10s # scratchpad.xul is not loading in e10s window
 [browser_markup_anonymous_03.js]
 [browser_markup_anonymous_04.js]
 [browser_markup_copy_image_data.js]
 subsuite = clipboard
 [browser_markup_css_completion_style_attribute_01.js]
 [browser_markup_css_completion_style_attribute_02.js]
+[browser_markup_css_completion_style_attribute_03.js]
 [browser_markup_dragdrop_autoscroll.js]
 [browser_markup_dragdrop_distance.js]
 [browser_markup_dragdrop_draggable.js]
 [browser_markup_dragdrop_dragRootNode.js]
 [browser_markup_dragdrop_escapeKeyPress.js]
 [browser_markup_dragdrop_invalidNodes.js]
 [browser_markup_dragdrop_reorder.js]
 [browser_markup_dragdrop_tooltip.js]

--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_01.js
@@ -65,13 +65,12 @@ const TEST_DATA = [
    45, 55, false],
   ["VK_RIGHT", "style=\"display:  inherit; color :chartreuse !important; ",
    55, 55, false],
   ["VK_RETURN", "style=\"display:  inherit; color :chartreuse !important;\"",
    -1, -1, false]
 ];
 
 add_task(function* () {
-  info("Opening the inspector on the test URL");
   let {inspector} = yield openInspectorForURL(TEST_URL);
 
   yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
 });

--- a/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_02.js
@@ -93,15 +93,14 @@ const TEST_DATA_INNER = [
   ["c", "style=\"background:url('1'); color", 29, 33, true],
   ["VK_RIGHT", "style=\"background:url('1'); color", 33, 33, false],
   [":", "style=\"background:url('1'); color:aliceblue", 34, 43, true],
   ["b", "style=\"background:url('1'); color:beige", 35, 39, true],
   ["VK_RETURN", "style=\"background:url('1'); color:beige\"", -1, -1, false]
 ];
 
 add_task(function* () {
-  info("Opening the inspector on the test URL");
   let {inspector} = yield openInspectorForURL(TEST_URL);
 
   yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA_DOUBLE);
   yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA_SINGLE);
   yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA_INNER);
 });

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_css_completion_style_attribute_03.js
@@ -0,0 +1,54 @@
+/* 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_style_attr_test_runner.js */
+
+"use strict";
+
+// Test CSS autocompletion of the style attribute can be triggered when the
+// caret is before a non-word character.
+
+loadHelperScript("helper_style_attr_test_runner.js");
+
+const TEST_URL = URL_ROOT + "doc_markup_edit.html";
+
+// test data format :
+//  [
+//    what key to press,
+//    expected input box value after keypress,
+//    expected input.selectionStart,
+//    expected input.selectionEnd,
+//    is popup expected to be open ?
+//  ]
+const TEST_DATA = [
+  ["s", "s", 1, 1, false],
+  ["t", "st", 2, 2, false],
+  ["y", "sty", 3, 3, false],
+  ["l", "styl", 4, 4, false],
+  ["e", "style", 5, 5, false],
+  ["=", "style=", 6, 6, false],
+  ["\"", "style=\"", 7, 7, false],
+  ["\"", "style=\"\"", 8, 8, false],
+  ["VK_LEFT", "style=\"\"", 7, 7, false],
+  ["c", "style=\"color\"", 8, 12, true],
+  ["o", "style=\"color\"", 9, 12, true],
+  ["VK_RIGHT", "style=\"color\"", 12, 12, false],
+  [":", "style=\"color:aliceblue\"", 13, 22, true],
+  ["b", "style=\"color:beige\"", 14, 18, true],
+  ["VK_RIGHT", "style=\"color:beige\"", 18, 18, false],
+  [";", "style=\"color:beige;\"", 19, 19, false],
+  [";", "style=\"color:beige;;\"", 20, 20, false],
+  ["VK_LEFT", "style=\"color:beige;;\"", 19, 19, false],
+  ["p", "style=\"color:beige;padding;\"", 20, 26, true],
+  ["VK_RIGHT", "style=\"color:beige;padding;\"", 26, 26, false],
+  [":", "style=\"color:beige;padding:calc;\"", 27, 31, true],
+  ["0", "style=\"color:beige;padding:0;\"", 28, 28, false],
+  ["VK_RETURN", "style=\"color:beige;padding:0;\"",
+   -1, -1, false]
+];
+
+add_task(function* () {
+  let {inspector} = yield openInspectorForURL(TEST_URL);
+
+  yield runStyleAttributeAutocompleteTests(inspector, TEST_DATA);
+});

--- a/devtools/client/shared/inplace-editor.js
+++ b/devtools/client/shared/inplace-editor.js
@@ -1292,24 +1292,28 @@ InplaceEditor.prototype = {
       if (input.value.length - preTimeoutQuery.length > 1) {
         return;
       }
       let query = input.value.slice(0, input.selectionStart);
       let startCheckQuery = query;
       if (query == null) {
         return;
       }
-      // If nothing is selected and there is a non-space character after the
-      // cursor, do not autocomplete.
+      // If nothing is selected and there is a word (\w) character after the cursor, do
+      // not autocomplete.
       if (input.selectionStart == input.selectionEnd &&
-          input.selectionStart < input.value.length &&
-          input.value.slice(input.selectionStart)[0] != " ") {
-        // This emit is mainly to make the test flow simpler.
-        this.emit("after-suggest", "nothing to autocomplete");
-        return;
+          input.selectionStart < input.value.length) {
+        let nextChar = input.value.slice(input.selectionStart)[0];
+        // Check if the next character is a valid word character, no suggestion should be
+        // provided when preceeding a word.
+        if (/[\w-]/.test(nextChar)) {
+          // This emit is mainly to make the test flow simpler.
+          this.emit("after-suggest", "nothing to autocomplete");
+          return;
+        }
       }
       let list = [];
       if (this.contentType == CONTENT_TYPES.CSS_PROPERTY) {
         list = this._getCSSPropertyList();
       } else if (this.contentType == CONTENT_TYPES.CSS_VALUE) {
         // Get the last query to be completed before the caret.
         let match = /([^\s,.\/]+$)/.exec(query);
         if (match) {