Bug 1348169 - Fix NaN shown in the Box Model's margins. r=pbro
MozReview-Commit-ID: 4MpPw0C4rOv
--- a/devtools/client/inspector/boxmodel/components/BoxModelMain.js
+++ b/devtools/client/inspector/boxmodel/components/BoxModelMain.js
@@ -75,19 +75,28 @@ module.exports = createClass({
},
getMarginValue(property, direction) {
let { layout } = this.props.boxModel;
let autoMargins = layout.autoMargins || {};
let value = "-";
if (direction in autoMargins) {
- value = "auto";
+ value = autoMargins[direction];
} else if (layout[property]) {
- value = parseFloat(layout[property]);
+ let parsedValue = parseFloat(layout[property]);
+
+ if (Number.isNaN(parsedValue)) {
+ // Not a number. We use the raw string.
+ // Useful for pseudo-elements with auto margins since they
+ // don't appear in autoMargins.
+ value = layout[property];
+ } else {
+ value = parsedValue;
+ }
}
return value;
},
getPositionValue(property) {
let { layout } = this.props.boxModel;
--- a/devtools/client/inspector/boxmodel/test/browser.ini
+++ b/devtools/client/inspector/boxmodel/test/browser.ini
@@ -19,16 +19,17 @@ support-files =
[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_offsetparent.js]
[browser_boxmodel_properties.js]
+[browser_boxmodel_pseudo-element.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_pseudo-element.js
@@ -0,0 +1,121 @@
+/* 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 a pseduo-element.
+
+const TEST_URI = `
+ <style type='text/css'>
+ 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;
+ }
+
+ div::before {
+ content: 'before';
+ display: block;
+ width: 32px;
+ height: 32px;
+ margin: 0 auto 6px;
+ }
+ </style>
+ <div>Test Node</div>
+`;
+
+// Expected values:
+const res1 = [
+ {
+ selector: ".boxmodel-element-size",
+ value: "32" + "\u00D7" + "32"
+ },
+ {
+ selector: ".boxmodel-size > .boxmodel-width",
+ value: "32"
+ },
+ {
+ selector: ".boxmodel-size > .boxmodel-height",
+ value: "32"
+ },
+ {
+ selector: ".boxmodel-margin.boxmodel-top > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-margin.boxmodel-left > span",
+ value: "auto"
+ },
+ {
+ selector: ".boxmodel-margin.boxmodel-bottom > span",
+ value: 6
+ },
+ {
+ selector: ".boxmodel-margin.boxmodel-right > span",
+ value: "auto"
+ },
+ {
+ selector: ".boxmodel-padding.boxmodel-top > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-padding.boxmodel-left > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-padding.boxmodel-bottom > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-padding.boxmodel-right > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-border.boxmodel-top > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-border.boxmodel-left > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-border.boxmodel-bottom > span",
+ value: 0
+ },
+ {
+ selector: ".boxmodel-border.boxmodel-right > 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 testInitialValues(inspector, view);
+});
+
+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(res1[i].selector);
+ is(elt.textContent, res1[i].value,
+ res1[i].selector + " has the right value.");
+ }
+}