1 files changed, 46 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
new file mode 100644
index 0000000000..f86617fdf0
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_02.js
@@ -0,0 +1,46 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Tests that an existing attribute can be modified
+
+const TEST_URL = `data:text/html,
+                  <div id='test-div'>Test modifying my ID attribute</div>`;
+
+add_task(async function () {
+  info("Opening the inspector on the test page");
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  info("Selecting the test node");
+  await focusNode("#test-div", inspector);
+
+  info("Verify attributes, only ID should be there for now");
+  await assertAttributes("#test-div", {
+    id: "test-div",
+  });
+
+  info("Focus the ID attribute and change its content");
+  const { editor } = await getContainerForSelector("#test-div", inspector);
+  const attr = editor.attrElements.get("id").querySelector(".editable");
+  const mutated = inspector.once("markupmutation");
+  setEditableFieldValue(
+    attr,
+    attr.textContent + ' class="newclass" style="color:green"',
+    inspector
+  );
+  await mutated;
+
+  info("Verify attributes, should have ID, class and style");
+  await assertAttributes("#test-div", {
+    id: "test-div",
+    class: "newclass",
+    style: "color:green",
+  });
+
+  info("Trying to undo the change");
+  await undoChange(inspector);
+  await assertAttributes("#test-div", {
+    id: "test-div",
+  });
+});