1 files changed, 56 insertions, 0 deletions
diff --git a/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
new file mode 100644
index 0000000000..f43a5fd487
--- /dev/null
+++ b/devtools/client/inspector/rules/test/browser_rules_class_panel_edit.js
@@ -0,0 +1,56 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that classes can be toggled in the class panel
+
+add_task(async function () {
+  await addTab("data:text/html;charset=utf-8,<body class='class1 class2'>");
+  const { view } = await openRuleView();
+
+  info("Open the class panel");
+  view.showClassPanel();
+
+  info(
+    "Click on class1 and check that the checkbox is unchecked and the DOM is updated"
+  );
+  await toggleClassPanelCheckBox(view, "class1");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: true },
+  ]);
+  let newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "class2", "The class attribute has been updated in the DOM");
+
+  info("Click on class2 and check the same thing");
+  await toggleClassPanelCheckBox(view, "class2");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: false },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "", "The class attribute has been updated in the DOM");
+
+  info("Click on class2 and checks that the class is added again");
+  await toggleClassPanelCheckBox(view, "class2");
+  checkClassPanelContent(view, [
+    { name: "class1", state: false },
+    { name: "class2", state: true },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(newClassName, "class2", "The class attribute has been updated in the DOM");
+
+  info("And finally, click on class1 again and checks it is added again");
+  await toggleClassPanelCheckBox(view, "class1");
+  checkClassPanelContent(view, [
+    { name: "class1", state: true },
+    { name: "class2", state: true },
+  ]);
+  newClassName = await getContentPageElementAttribute("body", "class");
+  is(
+    newClassName,
+    "class1 class2",
+    "The class attribute has been updated in the DOM"
+  );
+});