1 files changed, 79 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js
new file mode 100644
index 0000000000..9edd910fa6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_07.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that adding multiple values will enable the property even if the
+// property does not change, and that the extra values are added correctly.
+
+const STYLE = "#testid { background-color: #f00 }";
+
+const TEST_URI_INLINE_SHEET = `
+  <style>${STYLE}</style>
+  <div id='testid'>Styled Node</div>
+`;
+
+const TEST_URI_CONSTRUCTED_SHEET = `
+  <div id='testid'>Styled Node</div>
+  <script>
+    let sheet = new CSSStyleSheet();
+    sheet.replaceSync("${STYLE}");
+    document.adoptedStyleSheets.push(sheet);
+  </script>
+`;
+
+async function runTest(testUri) {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(testUri));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  const rule = getRuleViewRuleEditor(view, 1).rule;
+  const prop = rule.textProps[0];
+
+  info("Disabling red background color property");
+  await togglePropStatus(view, prop);
+  ok(!prop.enabled, "red background-color property is disabled.");
+
+  const editor = await focusEditableField(view, prop.editor.valueSpan);
+  const onDone = view.once("ruleview-changed");
+  editor.input.value = "red; color: red;";
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onDone;
+
+  is(
+    prop.editor.valueSpan.textContent,
+    "red",
+    "'red' property value is correctly set."
+  );
+  ok(prop.enabled, "red background-color property is enabled.");
+  is(
+    await getComputedStyleProperty("#testid", null, "background-color"),
+    "rgb(255, 0, 0)",
+    "red background color is set."
+  );
+
+  const propEditor = rule.textProps[1].editor;
+  is(
+    propEditor.nameSpan.textContent,
+    "color",
+    "new 'color' property name is correctly set."
+  );
+  is(
+    propEditor.valueSpan.textContent,
+    "red",
+    "new 'red' property value is correctly set."
+  );
+  is(
+    await getComputedStyleProperty("#testid", null, "color"),
+    "rgb(255, 0, 0)",
+    "red color is set."
+  );
+}
+
+add_task(async function test_inline_sheet() {
+  await runTest(TEST_URI_INLINE_SHEET);
+});
+
+add_task(async function test_constructed_sheet() {
+  await runTest(TEST_URI_CONSTRUCTED_SHEET);
+});