--- a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
@@ -33,20 +33,29 @@ add_task(function* () {
 
   info("Selecting the test node");
   yield selectNode("h1", inspector);
 
   info("Focusing the property editable field");
   let rule = getRuleViewRuleEditor(view, 1).rule;
   let prop = rule.textProps[0];
 
-  info("Focusing the css property editable value");
+  // Calculate offsets to click in the middle of the first box quad.
   let rect = prop.editor.valueSpan.getBoundingClientRect();
-  let editor = yield focusEditableField(view, prop.editor.valueSpan,
-    rect.width / 2, rect.height / 2);
+  let firstQuad = prop.editor.valueSpan.getBoxQuads()[0];
+  // For a multiline value, the first quad left edge is not aligned with the
+  // bounding rect left edge. The offsets expected by focusEditableField are
+  // relative to the bouding rectangle, so we need to translate the x-offset.
+  let x = firstQuad.bounds.left - rect.left + firstQuad.bounds.width / 2;
+  // The first quad top edge is aligned with the bounding top edge, no
+  // translation needed here.
+  let y = firstQuad.bounds.height / 2;
+
+  info("Focusing the css property editable value");
+  let editor = yield focusEditableField(view, prop.editor.valueSpan, x, y);
 
   info("Moving the caret next to a number");
   let pos = editor.input.value.indexOf("0deg") + 1;
   editor.input.setSelectionRange(pos, pos);
   is(editor.input.value[editor.input.selectionStart - 1], "0",
     "Input caret is after a 0");
 
   info("Check that UP/DOWN navigates in the input, even when next to a number");