1 files changed, 51 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js
new file mode 100644
index 0000000000..f30bc23de4
--- /dev/null
+++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_long-classname.js
@@ -0,0 +1,51 @@
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that editing long classnames shows the whole class attribute without scrollbars.
+
+const classname =
+  "this-long-class-attribute-should-be-displayed " +
+  "without-overflow-when-switching-to-edit-mode " +
+  "AAAAAAAAAAAA-BBBBBBBBBBBBB-CCCCCCCCCCCCC-DDDDDDDDDDDDDD-EEEEEEEEEEEEE";
+const TEST_URL = `data:text/html;charset=utf8, <div class="${classname}"></div>`;
+
+add_task(async function () {
+  const { inspector } = await openInspectorForURL(TEST_URL);
+
+  await selectNode("div", inspector);
+  await clickContainer("div", inspector);
+
+  const container = await focusNode("div", inspector);
+  ok(container && container.editor, "The markup-container was found");
+
+  info("Listening for the markupmutation event");
+  const nodeMutated = inspector.once("markupmutation");
+  const attr = container.editor.attrElements
+    .get("class")
+    .querySelector(".editable");
+
+  attr.focus();
+  EventUtils.sendKey("return", inspector.panelWin);
+  const input = inplaceEditor(attr).input;
+  ok(input, "Found editable field for class attribute");
+
+  is(
+    input.scrollHeight,
+    input.clientHeight,
+    "input should not have vertical scrollbars"
+  );
+  is(
+    input.scrollWidth,
+    input.clientWidth,
+    "input should not have horizontal scrollbars"
+  );
+  input.value = 'class="other value"';
+
+  info("Commit the new class value");
+  EventUtils.sendKey("return", inspector.panelWin);
+
+  info("Wait for the markup-mutation event");
+  await nodeMutated;
+});