1 files changed, 143 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js
new file mode 100644
index 0000000000..373f78eab6
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_edit-property_02.js
@@ -0,0 +1,143 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test several types of rule-view property edition
+
+const TEST_URI = `
+  <style type="text/css">
+  #testid {
+    background-color: blue;
+  }
+  .testclass, .unmatched {
+    background-color: green;
+  }
+  </style>
+  <div id="testid" class="testclass">Styled Node</div>
+  <div id="testid2">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 testEditProperty(inspector, view);
+  await testDisableProperty(inspector, view);
+  await testPropertyStillMarkedDirty(inspector, view);
+});
+
+async function testEditProperty(inspector, ruleView) {
+  const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
+  const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
+
+  let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
+  let input = editor.input;
+  is(
+    inplaceEditor(prop.editor.nameSpan),
+    editor,
+    "Next focused editor should be the name editor."
+  );
+
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  // Try clicking on the editor's input again, shouldn't cause trouble
+  // (see bug 761665).
+  EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
+  input.select();
+
+  info(
+    'Entering property name "border-color" followed by a colon to ' +
+      "focus the value"
+  );
+  const onNameDone = ruleView.once("ruleview-changed");
+  const onFocus = once(idRule.editor.element, "focus", true);
+  EventUtils.sendString("border-color:", ruleView.styleWindow);
+  await onFocus;
+  await onNameDone;
+
+  info("Verifying that the focused field is the valueSpan");
+  editor = inplaceEditor(ruleView.styleDocument.activeElement);
+  input = editor.input;
+  is(
+    inplaceEditor(prop.editor.valueSpan),
+    editor,
+    "Focus should have moved to the value."
+  );
+  ok(
+    input.selectionStart === 0 && input.selectionEnd === input.value.length,
+    "Editor contents are selected."
+  );
+
+  info("Entering a value following by a semi-colon to commit it");
+  const onBlur = once(editor.input, "blur");
+  // Use sendChar() to pass each character as a string so that we can test
+  // prop.editor.warning.hidden after each character.
+  for (const ch of "red;") {
+    const onPreviewDone = ruleView.once("ruleview-changed");
+    EventUtils.sendChar(ch, ruleView.styleWindow);
+    ruleView.debounce.flush();
+    await onPreviewDone;
+    is(
+      prop.editor.warning.hidden,
+      true,
+      "warning triangle is hidden or shown as appropriate"
+    );
+  }
+  await onBlur;
+
+  const newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "border-color should have been set.");
+
+  ruleView.styleDocument.activeElement.blur();
+  await addProperty(ruleView, 1, "color", "red", { commitValueWith: ";" });
+
+  const props = ruleView.element.querySelectorAll(".ruleview-property");
+  for (let i = 0; i < props.length; i++) {
+    is(
+      props[i].hasAttribute("dirty"),
+      i <= 1,
+      "props[" + i + "] marked dirty as appropriate"
+    );
+  }
+}
+
+async function testDisableProperty(inspector, ruleView) {
+  const prop = getTextProperty(ruleView, 1, {
+    "border-color": "red",
+    color: "red",
+  });
+
+  info("Disabling a property");
+  await togglePropStatus(ruleView, prop);
+
+  let newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "", "Border-color should have been unset.");
+
+  info("Enabling the property again");
+  await togglePropStatus(ruleView, prop);
+
+  newValue = await getRulePropertyValue(0, 0, "border-color");
+  is(newValue, "red", "Border-color should have been reset.");
+}
+
+async function testPropertyStillMarkedDirty(inspector, ruleView) {
+  // Select an unstyled node.
+  await selectNode("#testid2", inspector);
+
+  // Select the original node again.
+  await selectNode("#testid", inspector);
+
+  const props = ruleView.element.querySelectorAll(".ruleview-property");
+  for (let i = 0; i < props.length; i++) {
+    is(
+      props[i].hasAttribute("dirty"),
+      i <= 1,
+      "props[" + i + "] marked dirty as appropriate"
+    );
+  }
+}