Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Errors
- This test failed 1 times in the preceding 30 days. quicksearch this test
- Manifest: devtools/client/inspector/markup/test/browser.toml
/* Any copyright is dedicated to the Public Domain.
"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:
});
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:
});
}
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 ' '",
});
}