--- a/devtools/client/inspector/boxmodel/components/ComputedProperty.js
+++ b/devtools/client/inspector/boxmodel/components/ComputedProperty.js
@@ -23,16 +23,17 @@ module.exports = createClass({
   },
 
   render() {
     const { name, value } = this.props;
 
     return dom.div(
       {
         className: "property-view",
+        "data-property-name": name,
         tabIndex: "0",
         ref: container => {
           this.container = container;
         },
       },
       dom.div(
         {
           className: "property-name-container",

--- 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_properties.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_properties.js
@@ -0,0 +1,125 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the box model properties list displays the right values
+// and that it updates when the node's style is changed
+
+function getPropertySelector(propertyName) {
+  return `.boxmodel-properties-wrapper .property-view` +
+  `[data-property-name=${propertyName}] .property-value`;
+}
+
+// Expected values:
+var res1 = [
+  {
+    property: "box-sizing",
+    value: "border-box"
+  },
+  {
+    property: "display",
+    value: "block"
+  },
+  {
+    property: "float",
+    value: "left"
+  },
+  {
+    property: "line-height",
+    value: "20px"
+  },
+  {
+    property: "position",
+    value: "relative"
+  },
+  {
+    property: "z-index",
+    value: 2
+  },
+];
+
+var res2 = [
+  {
+    property: "box-sizing",
+    value: "content-box"
+  },
+  {
+    property: "display",
+    value: "block"
+  },
+  {
+    property: "float",
+    value: "right"
+  },
+  {
+    property: "line-height",
+    value: "10px"
+  },
+  {
+    property: "position",
+    value: "static"
+  },
+  {
+    property: "z-index",
+    value: 5
+  },
+];
+
+add_task(function* () {
+  Services.prefs.setBoolPref("devtools.layoutview.enabled", true);
+  let html = `
+    <style>
+      div {
+        box-sizing: border-box;
+        display: block;
+        float: left;
+        line-height: 20px;
+        position: relative;
+        z-index: 2;
+
+        height: 100px;
+        width: 100px;
+        border: 10px solid black;
+        padding: 20px;
+        margin: 30px auto;
+      }
+    </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);
+});
+
+function* testInitialValues(inspector, view) {
+  info("Test that the initial values of the box model are correct");
+  let viewdoc = view.document;
+
+  for (let i = 0; i < res1.length; i++) {
+    let elt = viewdoc.querySelector(getPropertySelector(res1[i].property));
+    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");
+  let viewdoc = view.document;
+
+  let onUpdated = waitForUpdate(inspector);
+  yield testActor.setAttribute("div", "style",
+                               "box-sizing:content-box;float:right;" +
+                               "line-height:10px;position:static;z-index:5;");
+  yield onUpdated;
+
+  for (let i = 0; i < res2.length; i++) {
+    let elt = viewdoc.querySelector(getPropertySelector(res2[i].property));
+    is(elt.textContent, res2[i].value,
+       res2[i].selector + " has the right value after style 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
  */