1 files changed, 108 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
new file mode 100644
index 0000000000..cbcbc506fe
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property-computed.js
@@ -0,0 +1,108 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the computed values of a style (the shorthand expansion) are
+// properly updated after the style is changed.
+
+const TEST_URI = `
+  <style type="text/css">
+    #testid {
+      padding: 10px;
+    }
+  </style>
+  <div id="testid">Styled Node</div>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+  await editAndCheck(view);
+});
+
+async function editAndCheck(view) {
+  const prop = getTextProperty(view, 1, { padding: "10px" });
+  const propEditor = prop.editor;
+  const newPaddingValue = "20px";
+
+  info("Focusing the inplace editor field");
+  const editor = await focusEditableField(view, propEditor.valueSpan);
+  is(
+    inplaceEditor(propEditor.valueSpan),
+    editor,
+    "Focused editor should be the value span."
+  );
+
+  const onPropertyChange = waitForComputedStyleProperty(
+    "#testid",
+    null,
+    "padding-top",
+    newPaddingValue
+  );
+  const onRefreshAfterPreview = once(view, "ruleview-changed");
+
+  info("Entering a new value");
+  EventUtils.sendString(newPaddingValue, view.styleWindow);
+
+  info(
+    "Waiting for the debounced previewValue to apply the " +
+      "changes to document"
+  );
+
+  view.debounce.flush();
+  await onPropertyChange;
+
+  info("Waiting for ruleview-refreshed after previewValue was applied.");
+  await onRefreshAfterPreview;
+
+  const onBlur = once(editor.input, "blur");
+
+  info("Entering the commit key and finishing edit");
+  EventUtils.synthesizeKey("KEY_Enter");
+
+  info("Waiting for blur on the field");
+  await onBlur;
+
+  info("Waiting for the style changes to be applied");
+  await once(view, "ruleview-changed");
+
+  const computed = prop.computed;
+  const propNames = [
+    "padding-top",
+    "padding-right",
+    "padding-bottom",
+    "padding-left",
+  ];
+
+  is(computed.length, propNames.length, "There should be 4 computed values");
+  propNames.forEach((propName, i) => {
+    is(
+      computed[i].name,
+      propName,
+      "Computed property #" + i + " has name " + propName
+    );
+    is(
+      computed[i].value,
+      newPaddingValue,
+      "Computed value of " + propName + " is as expected"
+    );
+  });
+
+  propEditor.expander.click();
+  const computedDom = propEditor.computed;
+  is(
+    computedDom.children.length,
+    propNames.length,
+    "There should be 4 nodes in the DOM"
+  );
+  propNames.forEach((propName, i) => {
+    is(
+      computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
+        .textContent,
+      newPaddingValue,
+      "Computed value of " + propName + " in DOM is as expected"
+    );
+  });
+}