diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
tree | f435a8308119effd964b339f76abb83a57c29483 /devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js | |
parent | Initial commit. (diff) | |
download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to '')
-rw-r--r-- | devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js b/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js new file mode 100644 index 0000000000..9a6fef1db9 --- /dev/null +++ b/devtools/client/inspector/markup/test/browser_markup_tag_edit_08.js @@ -0,0 +1,140 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +// Test editing various markup-containers' attribute fields, in particular +// attributes with long values and quotes + +const TEST_URL = URL_ROOT + "doc_markup_edit.html"; +/*eslint-disable */ +const LONG_ATTRIBUTE = + "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +const LONG_ATTRIBUTE_COLLAPSED = + "ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEF\u2026UVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ-ABCDEFGHIJKLMNOPQRSTUVWXYZ"; +/* eslint-enable */ + +add_task(async function () { + const { inspector } = await openInspectorForURL(TEST_URL); + + await inspector.markup.expandAll(); + await testCollapsedLongAttribute(inspector); + await testModifyInlineStyleWithQuotes(inspector); + await testEditingAttributeWithMixedQuotes(inspector); +}); + +async function testCollapsedLongAttribute(inspector) { + info("Try to modify the collapsed long attribute, making sure it expands."); + + info("Adding test attributes to the node"); + let onMutation = inspector.once("markupmutation"); + await setContentPageElementAttribute("#node24", "class", ""); + await onMutation; + + onMutation = inspector.once("markupmutation"); + await setContentPageElementAttribute("#node24", "data-long", LONG_ATTRIBUTE); + await onMutation; + + await assertAttributes("#node24", { + id: "node24", + class: "", + "data-long": LONG_ATTRIBUTE, + }); + + const { editor } = await focusNode("#node24", inspector); + const attr = editor.attrElements.get("data-long").querySelector(".editable"); + + // Check to make sure it has expanded after focus + attr.focus(); + EventUtils.sendKey("return", inspector.panelWin); + const input = inplaceEditor(attr).input; + is(input.value, `data-long="${LONG_ATTRIBUTE}"`); + EventUtils.sendKey("escape", inspector.panelWin); + + setEditableFieldValue(attr, input.value + ' data-short="ABC"', inspector); + await inspector.once("markupmutation"); + + const visibleAttrText = editor.attrElements + .get("data-long") + .querySelector(".attr-value").textContent; + is(visibleAttrText, LONG_ATTRIBUTE_COLLAPSED); + + await assertAttributes("#node24", { + id: "node24", + class: "", + "data-long": LONG_ATTRIBUTE, + "data-short": "ABC", + }); +} + +async function testModifyInlineStyleWithQuotes(inspector) { + info('Modify inline style containing "'); + + await assertAttributes("#node26", { + id: "node26", + style: + 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F");', + }); + + const onMutated = inspector.once("markupmutation"); + const { editor } = await focusNode("#node26", inspector); + const attr = editor.attrElements.get("style").querySelector(".editable"); + + attr.focus(); + EventUtils.sendKey("return", inspector.panelWin); + + const input = inplaceEditor(attr).input; + let value = input.value; + + is( + value, + "style='background-image: url(\"moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.org%2F\");'", + "Value contains actual double quotes" + ); + + value = value.replace(/mozilla\.org/, "mozilla.com"); + input.value = value; + + EventUtils.sendKey("return", inspector.panelWin); + + await onMutated; + + await assertAttributes("#node26", { + id: "node26", + style: + 'background-image: url("moz-page-thumb://thumbnail?url=http%3A%2F%2Fwww.mozilla.com%2F");', + }); +} + +async function testEditingAttributeWithMixedQuotes(inspector) { + info("Modify class containing \" and '"); + + await assertAttributes("#node27", { + id: "node27", + class: "Double \" and single '", + }); + + const onMutated = inspector.once("markupmutation"); + const { editor } = await focusNode("#node27", inspector); + const attr = editor.attrElements.get("class").querySelector(".editable"); + + attr.focus(); + EventUtils.sendKey("return", inspector.panelWin); + + const input = inplaceEditor(attr).input; + let value = input.value; + + is(value, 'class="Double " and single \'"', "Value contains ""); + + value = value.replace(/Double/, """).replace(/single/, "'"); + input.value = value; + + EventUtils.sendKey("return", inspector.panelWin); + + await onMutated; + + await assertAttributes("#node27", { + id: "node27", + class: "\" \" and ' '", + }); +} |