1 files changed, 150 insertions, 0 deletions
diff --git a/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js
new file mode 100644
index 0000000000..1d8488a468
--- /dev/null
+++ b/devtools/client/inspector/compatibility/test/browser/browser_compatibility_dynamic_js-dom-change.js
@@ -0,0 +1,150 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const {
+  COMPATIBILITY_ISSUE_TYPE,
+} = require("resource://devtools/shared/constants.js");
+
+const {
+  COMPATIBILITY_APPEND_NODE_COMPLETE,
+  COMPATIBILITY_CLEAR_DESTROYED_NODES,
+} = require("resource://devtools/client/inspector/compatibility/actions/index.js");
+
+// Test the behavior rules are dynamically added
+
+const ISSUE_OUTLINE_RADIUS = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY,
+  property: "-moz-user-input",
+  url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input",
+  deprecated: true,
+  experimental: false,
+};
+
+const ISSUE_HYPHENS = {
+  type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES,
+  aliases: ["hyphens"],
+  property: "hyphens",
+  url: "https://developer.mozilla.org/docs/Web/CSS/hyphens",
+  deprecated: false,
+  experimental: false,
+};
+
+const TEST_URI = `
+  <style>
+    .child {
+      -moz-user-input: none;
+    }
+  </style>
+  <body></body>
+`;
+
+add_task(async function () {
+  info("Testing dynamic DOM mutation using JavaScript");
+  const tab = await addTab(
+    "data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI)
+  );
+
+  const { allElementsPane, inspector, selectedElementPane } =
+    await openCompatibilityView();
+
+  info("Check initial issues");
+  await assertIssueList(selectedElementPane, []);
+  await assertIssueList(allElementsPane, []);
+
+  info("Append nodes dynamically using JavaScript");
+  await testNodeMutation(
+    ".child",
+    COMPATIBILITY_APPEND_NODE_COMPLETE,
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_OUTLINE_RADIUS],
+    [ISSUE_HYPHENS, ISSUE_OUTLINE_RADIUS],
+    async function () {
+      const doc = content.document;
+      const parent = doc.querySelector("body");
+
+      const newElementWithIssue = doc.createElement("div");
+      newElementWithIssue.style.hyphens = "none";
+
+      const parentOfIssueElement = doc.createElement("div");
+      parentOfIssueElement.classList.add("parent");
+      const child = doc.createElement("div");
+      child.classList.add("child");
+      parentOfIssueElement.appendChild(child);
+
+      parent.appendChild(newElementWithIssue);
+      parent.appendChild(parentOfIssueElement);
+    }
+  );
+
+  info("Remove node whose child has compatibility issue");
+  await testNodeMutation(
+    "div",
+    COMPATIBILITY_CLEAR_DESTROYED_NODES,
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [ISSUE_HYPHENS],
+    [ISSUE_HYPHENS],
+    async function () {
+      const doc = content.document;
+      const parent = doc.querySelector(".parent");
+      parent.remove();
+    }
+  );
+
+  info("Remove node which has compatibility issue");
+  await testNodeMutation(
+    "body",
+    COMPATIBILITY_CLEAR_DESTROYED_NODES,
+    tab,
+    inspector,
+    selectedElementPane,
+    allElementsPane,
+    [],
+    [],
+    async function () {
+      const doc = content.document;
+      const issueElement = doc.querySelector("div");
+      issueElement.remove();
+    }
+  );
+
+  await removeTab(tab);
+});
+
+async function testNodeMutation(
+  selector,
+  action,
+  tab,
+  inspector,
+  selectedElementPane,
+  allElementsPane,
+  expectedSelectedElementIssues,
+  expectedAllElementsIssues,
+  contentTaskFunction
+) {
+  let onPanelUpdate = Promise.all([
+    inspector.once("markupmutation"),
+    waitForDispatch(inspector.store, action),
+  ]);
+  info("Add a new node with issue and another node whose child has the issue");
+  await ContentTask.spawn(tab.linkedBrowser, {}, contentTaskFunction);
+  info("Wait for changes");
+  await onPanelUpdate;
+
+  onPanelUpdate = waitForUpdateSelectedNodeAction(inspector.store);
+  await selectNode(selector, inspector);
+  await onPanelUpdate;
+
+  info("Check element issues");
+  await assertIssueList(selectedElementPane, expectedSelectedElementIssues);
+
+  info("Check all issues");
+  await assertIssueList(allElementsPane, expectedAllElementsIssues);
+}