1 files changed, 79 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
new file mode 100644
index 0000000000..0d1c8c8a45
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_search-filter_09.js
@@ -0,0 +1,79 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that the rule view search filter works properly for newly added
+// property.
+
+const SEARCH = "100%";
+
+const TEST_URI = `
+  <style type='text/css'>
+    #testid {
+      width: 100%;
+      height: 50%;
+    }
+  </style>
+  <h1 id='testid'>Styled Node</h1>
+`;
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+  await selectNode("#testid", inspector);
+
+  info("Enter the test value in the search filter");
+  await setSearchFilter(view, SEARCH);
+
+  info("Start entering a new property in the rule");
+  const ruleEditor = getRuleViewRuleEditor(view, 1);
+  const rule = ruleEditor.rule;
+  const prop = getTextProperty(view, 1, { width: "100%" });
+  let editor = await focusNewRuleViewProperty(ruleEditor);
+
+  info("Check that the correct rules are visible");
+  is(view.element.children.length, 2, "Should have 2 rules.");
+  is(rule.selectorText, "#testid", "Second rule is #testid.");
+  ok(
+    prop.editor.container.classList.contains("ruleview-highlight"),
+    "width text property is correctly highlighted."
+  );
+  ok(
+    !getTextProperty(view, 1, {
+      height: "50%",
+    }).editor.container.classList.contains("ruleview-highlight"),
+    "height text property is not highlighted."
+  );
+
+  info("Test creating a new property");
+
+  info("Entering margin-left in the property name editor");
+  // Changing the value doesn't cause a rule-view refresh, no need to wait for
+  // ruleview-changed here.
+  editor.input.value = "margin-left";
+
+  info("Pressing return to commit and focus the new value field");
+  let onRuleViewChanged = view.once("ruleview-changed");
+  EventUtils.synthesizeKey("VK_RETURN", {}, view.styleWindow);
+  await onRuleViewChanged;
+
+  // Getting the new value editor after focus
+  editor = inplaceEditor(view.styleDocument.activeElement);
+  const propEditor = ruleEditor.rule.textProps[2].editor;
+
+  info("Entering a value and bluring the field to expect a rule change");
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.value = "100%";
+  view.debounce.flush();
+  await onRuleViewChanged;
+
+  onRuleViewChanged = view.once("ruleview-changed");
+  editor.input.blur();
+  await onRuleViewChanged;
+
+  ok(
+    propEditor.container.classList.contains("ruleview-highlight"),
+    "margin-left text property is correctly highlighted."
+  );
+});