Bug 1349216 - Fix NaN shown in the Box Model's positions. r=pbro

devtools/client/inspector/boxmodel/components/BoxModelMain.js

@@ -99,11 +99,22 @@ module.exports = createClass({
 
   getPositionValue(property) {
     let { layout } = this.props.boxModel;
+    let value = "-";
 
-    if (layout.position === "static") {
-      return "-";
+    if (!layout[property]) {
+      return value;
     }
-    return layout[property] ? parseFloat(layout[property]) : "-";
+
+    let parsedValue = parseFloat(layout[property]);
+
+    if (Number.isNaN(parsedValue)) {
+      // Not a number. We use the raw string.
+      value = layout[property];
+    } else {
+      value = parsedValue;
+    }
+
+    return value;
   },
 
   /**

devtools/client/inspector/boxmodel/test/browser.ini

@@ -23,6 +23,7 @@ support-files =
 [browser_boxmodel_navigation.js]
 skip-if = true # Bug 1336198
 [browser_boxmodel_offsetparent.js]
+[browser_boxmodel_positions.js]
 [browser_boxmodel_properties.js]
 [browser_boxmodel_pseudo-element.js]
 [browser_boxmodel_rotate-labels-on-sides.js]

devtools/client/inspector/boxmodel/test/browser_boxmodel.js

@@ -21,6 +21,14 @@ var res1 = [
     selector: ".boxmodel-size > .boxmodel-height",
     value: "100.117"
   },
+  {
+    selector: ".boxmodel-position.boxmodel-top > span",
+    value: 42
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-left > span",
+    value: 42
+  },
   {
     selector: ".boxmodel-margin.boxmodel-top > span",
     value: 30
@@ -84,6 +92,14 @@ var res2 = [
     selector: ".boxmodel-size > .boxmodel-height",
     value: "150"
   },
+  {
+    selector: ".boxmodel-position.boxmodel-top > span",
+    value: 50
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-left > span",
+    value: 42
+  },
   {
     selector: ".boxmodel-margin.boxmodel-top > span",
     value: 30
@@ -165,7 +181,7 @@ function* testChangingValues(inspector, view, testActor) {
 
   let onUpdated = waitForUpdate(inspector);
   yield testActor.setAttribute("div", "style",
-                               "height:150px;padding-right:50px;");
+                               "height:150px;padding-right:50px;top:50px");
   yield onUpdated;
 
   for (let i = 0; i < res2.length; i++) {

devtools/client/inspector/boxmodel/test/browser_boxmodel_positions.js

@@ -0,0 +1,66 @@
+/* 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 for positions.
+
+const TEST_URI = `
+  <style type='text/css'>
+    div {
+      position: absolute;
+      left: 0;
+      margin: 0;
+      padding: 0;
+      display: none;
+      height: 100px;
+      width: 100px;
+      border: 10px solid black;
+    }
+  </style>
+  <div>Test Node</div>
+`;
+
+// Expected values:
+const res1 = [
+  {
+    selector: ".boxmodel-position.boxmodel-top > span",
+    value: "auto"
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-right > span",
+    value: "auto"
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-bottom > span",
+    value: "auto"
+  },
+  {
+    selector: ".boxmodel-position.boxmodel-left > span",
+    value: 0
+  },
+];
+
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view, testActor} = yield openBoxModelView();
+  let node = yield getNodeFront("div", inspector);
+  let children = yield inspector.markup.walker.children(node);
+  let beforeElement = children.nodes[0];
+
+  yield selectNode(beforeElement, inspector);
+  yield testPositionValues(inspector, view);
+});
+
+function* testPositionValues(inspector, view) {
+  info("Test that the position values of the box model 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.");
+  }
+}