--- a/devtools/client/inspector/boxmodel/test/browser.ini
+++ b/devtools/client/inspector/boxmodel/test/browser.ini
@@ -17,16 +17,17 @@ support-files =
 # [browser_boxmodel_editablemodel_allproperties.js]
 # Disabled for too many intermittent failures (bug 1009322)
 [browser_boxmodel_editablemodel_bluronclick.js]
 [browser_boxmodel_editablemodel_border.js]
 [browser_boxmodel_editablemodel_stylerules.js]
 [browser_boxmodel_guides.js]
 [browser_boxmodel_navigation.js]
 skip-if = true # Bug 1336198
+[browser_boxmodel_position.js]
 [browser_boxmodel_rotate-labels-on-sides.js]
 [browser_boxmodel_sync.js]
 [browser_boxmodel_tooltips.js]
 skip-if = true # Bug 1336198
 [browser_boxmodel_update-after-navigation.js]
 [browser_boxmodel_update-after-reload.js]
 # [browser_boxmodel_update-in-iframes.js]
 # Bug 1020038 boxmodel-view updates for iframe elements changes

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_position.js
@@ -0,0 +1,124 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model displays the right values and that it updates when
+// the node's style is changed
+
+const positionValueSelector = ".boxmodel-legend[data-box=\"position\"]";
+const positionTopSelector = ".boxmodel-position.boxmodel-top > span";
+const positionRightSelector = ".boxmodel-position.boxmodel-right > span";
+const positionBottomSelector = ".boxmodel-position.boxmodel-bottom > span";
+const positionLeftSelector = ".boxmodel-position.boxmodel-left > span";
+
+// Expected values:
+var res1 = [
+  {
+    selector: positionValueSelector,
+    value: "position: absolute"
+  },
+  {
+    selector: positionTopSelector,
+    value: 20
+  },
+  {
+    selector: positionRightSelector,
+    value: 20
+  },
+];
+
+var res2 = [
+  {
+    selector: positionBottomSelector,
+    value: 20
+  },
+  {
+    selector: positionLeftSelector,
+    value: 20
+  },
+];
+
+// Issue with waiting for inspector update on position change
+// var res3 = [
+//   {
+//     selector: positionBottomSelector,
+//     value: 40
+//   },
+// ];
+
+add_task(function* () {
+  Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
+  let html = `
+    <style>
+      div {
+        height: 100px;
+        width: 100px;
+        border: 10px solid black;
+
+        position: absolute;
+        top: 20px;
+        right: 20px;
+      }
+    </style>
+    <div></div>
+  `;
+
+  yield addTab("data:text/html," + encodeURIComponent(html));
+  let {inspector, view, testActor} = yield openBoxModelLayoutView();
+  yield selectNode("div", inspector);
+
+  yield testInitialValues(inspector, view);
+  yield testChangingValues(inspector, view, testActor);
+  yield testEditableValues(inspector, view);
+});
+
+function* testInitialValues(inspector, view) {
+  info("Test that the initial values of the box model position are correct");
+  let viewdoc = view.document;
+
+  for (let i = 0; i < res1.length; i++) {
+    let elt = viewdoc.querySelector(res1[i].selector);
+    is(elt.textContent, res1[i].value,
+       res1[i].selector + " has the right value.");
+  }
+}
+
+function* testChangingValues(inspector, view, testActor) {
+  info("Test that changing the document updates the box model position");
+  let viewdoc = view.document;
+
+  let onUpdated = waitForUpdate(inspector);
+  yield testActor.setAttribute("div", "style",
+                               "right:initial;left:20px;top:initial;bottom:20px;");
+  yield onUpdated;
+
+  for (let i = 0; i < res2.length; i++) {
+    let elt = viewdoc.querySelector(res2[i].selector);
+    is(elt.textContent, res2[i].value,
+       res2[i].selector + " has the right value after style update.");
+  }
+}
+
+function* testEditableValues(inspector, view) {
+  // Issue with waiting for inspector update on position change
+  // info("Test that changing the editable field updates the box model position");
+  // let viewdoc = view.document;
+
+  // let span = viewdoc.querySelector(positionBottomSelector);
+  // EventUtils.synthesizeMouseAtCenter(span, {}, view.document.defaultView);
+
+  // let onUpdated = waitForUpdate(inspector);
+
+  // EventUtils.synthesizeKey("40", {}, view.document.defaultView);
+  // EventUtils.synthesizeKey("VK_RETURN", {}, view.document.defaultView);
+
+  // yield onUpdated;
+
+  // for (let i = 0; i < res3.length; i++) {
+  //   let elt = viewdoc.querySelector(res3[i].selector);
+  //   is(elt.textContent, res3[i].value,
+  //      res3[i].selector + " has the right value after editable field update.");
+  // }
+}

--- a/devtools/client/inspector/boxmodel/test/head.js
+++ b/devtools/client/inspector/boxmodel/test/head.js
@@ -62,16 +62,46 @@ function openBoxModelView() {
       inspector: data.inspector,
       view: data.inspector.computedview,
       testActor: data.testActor
     };
   });
 }
 
 /**
+ * Open the toolbox, with the inspector tool visible, and the layout view
+ * sidebar tab selected to display the box model view with properties.
+ *
+ * @return {Promise} a promise that resolves when the inspector is ready and the box model
+ *         view is visible and ready.
+ */
+function openBoxModelLayoutView() {
+  return openInspectorSidebarTab("layoutview").then(data => {
+    // The actual highligher show/hide methods are mocked in box model tests.
+    // The highlighter is tested in devtools/inspector/test.
+    function mockHighlighter({highlighter}) {
+      highlighter.showBoxModel = function () {
+        return promise.resolve();
+      };
+      highlighter.hideBoxModel = function () {
+        return promise.resolve();
+      };
+    }
+    mockHighlighter(data.toolbox);
+
+    return {
+      toolbox: data.toolbox,
+      inspector: data.inspector,
+      view: data.inspector.computedview,
+      testActor: data.testActor
+    };
+  });
+}
+
+/**
  * Wait for the boxmodel-view-updated event.
  *
  * @param  {InspectorPanel} inspector
  *         The instance of InspectorPanel currently loaded in the toolbox.
  * @param  {Boolean} waitForSelectionUpdate
  *         Should the boxmodel-view-updated event come from a new selection.
  * @return {Promise} a promise
  */