1 files changed, 47 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
new file mode 100644
index 0000000000..a196fcca40
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_inactive_css_display-justify.js
@@ -0,0 +1,47 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that a declaration's inactive state doesn't linger on its previous state when
+// the declaration it depends on changes. Bug 1593944
+
+const TEST_URI = `
+<style>
+  div {
+    justify-content: center;
+    /*! display: flex */
+  }
+</style>
+<div>`;
+
+add_task(async function () {
+  await pushPref("devtools.inspector.inactive.css.enabled", true);
+  await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  const { inspector, view } = await openRuleView();
+
+  await selectNode("div", inspector);
+
+  const justifyContent = { "justify-content": "center" };
+  const justifyItems = { "justify-items": "center" };
+  const displayFlex = { display: "flex" };
+  const displayGrid = { display: "grid" };
+
+  info("Enable display:flex and check that justify-content becomes active");
+  await checkDeclarationIsInactive(view, 1, justifyContent);
+  await toggleDeclaration(view, 1, displayFlex);
+  await checkDeclarationIsActive(view, 1, justifyContent);
+
+  info(
+    "Rename justify-content to justify-items and check that it becomes inactive"
+  );
+  await updateDeclaration(view, 1, justifyContent, justifyItems);
+  await checkDeclarationIsInactive(view, 1, justifyItems);
+
+  info(
+    "Rename display:flex to display:grid and check that justify-items becomes active"
+  );
+  await updateDeclaration(view, 1, displayFlex, displayGrid);
+  await checkDeclarationIsActive(view, 1, justifyItems);
+});