1 files changed, 179 insertions, 0 deletions
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js
new file mode 100644
index 0000000000..91b29b488b
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_event_rule-change.js
@@ -0,0 +1,179 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test whether the content of the issue list will be changed when the rules are changed
+// on the rule view.
+
+const TEST_URI = `
+  <style>
+  .test-class {
+    ruby-align: center;
+  }
+  div {
+    scrollbar-width: thin;
+  }
+  </style>
+  <div class="test-class">test class</div>
+  <div>test</div>
+`;
+
+const TEST_DATA_SELECTED = {
+  fullRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: [],
+      },
+      {
+        property: "scrollbar-width",
+        nodes: [],
+      },
+    ],
+  },
+  classRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: [],
+      },
+    ],
+  },
+  elementRule: {
+    expectedProperties: [
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "scrollbar-width",
+        nodes: [],
+      },
+    ],
+  },
+};
+
+const TEST_DATA_ALL = {
+  fullRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: ["div.test-class"],
+      },
+      {
+        property: "scrollbar-width",
+        nodes: ["div.test-class", "div"],
+      },
+    ],
+  },
+  classRule: {
+    expectedProperties: [
+      {
+        property: "ruby-align",
+        url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "ruby-align",
+        nodes: ["div.test-class"],
+      },
+    ],
+  },
+  elementRule: {
+    expectedProperties: [
+      {
+        property: "scrollbar-width",
+        url: "https://developer.mozilla.org/docs/Web/CSS/scrollbar-width",
+      },
+    ],
+    expectedNodes: [
+      {
+        property: "scrollbar-width",
+        nodes: ["div.test-class", "div"],
+      },
+    ],
+  },
+};
+
+const {
+  COMPATIBILITY_UPDATE_NODES_COMPLETE,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+add_task(async function () {
+  info("Enable 3 pane mode");
+  await pushPref("devtools.inspector.three-pane-enabled", true);
+
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+  await selectNode(".test-class", inspector);
+
+  info("Check the initial issue");
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.fullRule);
+
+  info("Check the issue after unchecking class rule");
+  await _togglePropStatus(inspector, 1, 0);
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.elementRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.elementRule);
+
+  info("Check the issue after unchecking div rule");
+  await _togglePropStatus(inspector, 2, 0);
+  await assertIssueList(selectedElementPane, []);
+  await assertIssueList(allElementsPane, []);
+
+  info("Check the issue after reverting class rule");
+  await _togglePropStatus(inspector, 1, 0);
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.classRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.classRule);
+
+  info("Check the issue after reverting div rule");
+  await _togglePropStatus(inspector, 2, 0);
+  await assertAll(selectedElementPane, TEST_DATA_SELECTED.fullRule);
+  await assertAll(allElementsPane, TEST_DATA_ALL.fullRule);
+});
+
+async function assertAll(pane, { expectedProperties, expectedNodes }) {
+  await assertIssueList(pane, expectedProperties);
+  await assertNodeList(pane, expectedNodes);
+}
+
+async function _togglePropStatus(inspector, ruleIndex, propIndex) {
+  const onNodesUpdated = waitForDispatch(
+    inspector.store,
+    COMPATIBILITY_UPDATE_NODES_COMPLETE
+  );
+  await togglePropStatusOnRuleView(inspector, ruleIndex, propIndex);
+  await onNodesUpdated;
+}