1 files changed, 76 insertions, 0 deletions
diff --git a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
new file mode 100644
index 0000000000..b2f96fc522
--- /dev/null
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_pseudo.js
@@ -0,0 +1,76 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that pseudo elements have no side effect on the box model widget for their
+// container. See bug 1350499.
+
+const TEST_URI = `<style>
+    .test::before {
+      content: 'before';
+      margin-top: 5px;
+      padding-top: 5px;
+      width: 5px;
+    }
+  </style>
+  <div style='width:200px;'>
+    <div class=test></div>
+  </div>`;
+
+add_task(async function () {
+  const tab = await addTab("data:text/html," + encodeURIComponent(TEST_URI));
+  const { inspector, boxmodel } = await openLayoutView();
+  const browser = tab.linkedBrowser;
+
+  await selectNode(".test", inspector);
+
+  // No margin-top defined.
+  info("Test that margins are not impacted by a pseudo element");
+  is(
+    await getStyle(browser, ".test", "margin-top"),
+    "",
+    "margin-top is correct"
+  );
+  await checkValueInBoxModel(
+    ".boxmodel-margin.boxmodel-top",
+    "0",
+    boxmodel.document
+  );
+
+  // No padding-top defined.
+  info("Test that paddings are not impacted by a pseudo element");
+  is(
+    await getStyle(browser, ".test", "padding-top"),
+    "",
+    "padding-top is correct"
+  );
+  await checkValueInBoxModel(
+    ".boxmodel-padding.boxmodel-top",
+    "0",
+    boxmodel.document
+  );
+
+  // Width should be driven by the parent div.
+  info("Test that dimensions are not impacted by a pseudo element");
+  is(await getStyle(browser, ".test", "width"), "", "width is correct");
+  await checkValueInBoxModel(
+    ".boxmodel-content.boxmodel-width",
+    "200",
+    boxmodel.document
+  );
+});
+
+async function checkValueInBoxModel(selector, expectedValue, doc) {
+  const span = doc.querySelector(selector + " > span");
+  await waitForElementTextContent(span, expectedValue);
+
+  EventUtils.synthesizeMouseAtCenter(span, {}, doc.defaultView);
+  const editor = doc.querySelector(".styleinspector-propertyeditor");
+  ok(editor, "Should have opened the editor.");
+  is(editor.value, expectedValue, "Should have the right value in the editor.");
+
+  const onBlur = once(editor, "blur");
+  EventUtils.synthesizeKey("VK_RETURN", {}, doc.defaultView);
+  await onBlur;
+}