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/rules/test/browser_part2.toml
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that properties can be selected and copied from the rule view
const osString = Services.appinfo.OS;
const TEST_URI = `
<style type="text/css">
html {
color: #000000;
}
span {
font-variant: small-caps; color: #000000;
}
.nomatches {
color: #ff0000;
}
html {
body {
container-type: inline-size;
@container (1px < width) {
#nested {
background: tomato;
color: gold;
}
}
}
}
</style>
<div id="first" style="margin: 10em;
font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA">
<h1>Some header text</h1>
<p id="salutation" style="font-size: 12pt">hi.</p>
<p id="body" style="font-size: 12pt">I am a test-case. This text exists
solely to provide some things to <span style="color: yellow">
highlight</span> and <span style="font-weight: bold">count</span>
style list-items in the box at right. If you are reading this,
you should go do something else instead. Maybe read a book. Or better
yet, write some test-cases for another bit of code.
<span style="font-style: italic">some text</span></p>
<p id="closing">more text</p>
<p>even more text</p>
</div>
<section id=nested>Nested</section>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("div", inspector);
await checkCopySelection(view);
await checkSelectAll(view);
await checkCopyEditorValue(view);
await selectNode("#nested", inspector);
await checkCopyNestedRule(view);
});
async function checkCopySelection(view) {
info("Testing selection copy");
const contentDoc = view.styleDocument;
const win = view.styleWindow;
const prop = contentDoc.querySelector(".ruleview-property");
const values = contentDoc.querySelectorAll(
".ruleview-propertyvaluecontainer"
);
let range = contentDoc.createRange();
range.setStart(prop, 0);
range.setEnd(values[4], 2);
win.getSelection().addRange(range);
info("Checking that _Copy() returns the correct clipboard value");
const expectedPattern =
" margin: 10em;[\\r\\n]+" +
" font-size: 14pt;[\\r\\n]+" +
" font-family: helvetica, sans-serif;[\\r\\n]+" +
" color: #AAA;[\\r\\n]+" +
"}[\\r\\n]+" +
"html {[\\r\\n]+" +
" color: #000000;[\\r\\n]*";
const allMenuItems = openStyleContextMenuAndGetAllItems(view, prop);
const menuitemCopy = allMenuItems.find(
item =>
item.label ===
STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
);
ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
try {
await waitForClipboardPromise(
() => menuitemCopy.click(),
() => checkClipboardData(expectedPattern)
);
} catch (e) {
failedClipboard(expectedPattern);
}
info("Check copying from keyboard");
win.getSelection().removeRange(range);
// Selecting the declaration `margin: 10em;`
range = contentDoc.createRange();
range.setStart(prop, 0);
range.setEnd(prop, 1);
win.getSelection().addRange(range);
const declarationCheckbox = contentDoc.querySelector(
"input[type=checkbox].ruleview-enableproperty"
);
const copyEvent = new win.Event("copy", { bubbles: true });
await waitForClipboardPromise(
() => declarationCheckbox.dispatchEvent(copyEvent),
() => checkClipboardData("^ margin: 10em;$")
);
win.getSelection().removeRange(range);
}
async function checkSelectAll(view) {
info("Testing select-all copy");
const contentDoc = view.styleDocument;
const prop = contentDoc.querySelector(".ruleview-property");
info(
"Checking that _SelectAll() then copy returns the correct " +
"clipboard value"
);
view.contextMenu._onSelectAll();
const expectedPattern =
"element {[\\r\\n]+" +
" margin: 10em;[\\r\\n]+" +
" font-size: 14pt;[\\r\\n]+" +
" font-family: helvetica, sans-serif;[\\r\\n]+" +
" color: #AAA;[\\r\\n]+" +
"}[\\r\\n]+" +
"html {[\\r\\n]+" +
" color: #000000;[\\r\\n]+" +
"}[\\r\\n]*";
const allMenuItems = openStyleContextMenuAndGetAllItems(view, prop);
const menuitemCopy = allMenuItems.find(
item =>
item.label ===
STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
);
ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
try {
await waitForClipboardPromise(
() => menuitemCopy.click(),
() => checkClipboardData(expectedPattern)
);
} catch (e) {
failedClipboard(expectedPattern);
}
}
async function checkCopyEditorValue(view) {
info("Testing CSS property editor value copy");
const ruleEditor = getRuleViewRuleEditor(view, 0);
const propEditor = ruleEditor.rule.textProps[0].editor;
const editor = await focusEditableField(view, propEditor.valueSpan);
info(
"Checking that copying a css property value editor returns the correct" +
" clipboard value"
);
const expectedPattern = "10em";
const allMenuItems = openStyleContextMenuAndGetAllItems(view, editor.input);
const menuitemCopy = allMenuItems.find(
item =>
item.label ===
STYLE_INSPECTOR_L10N.getStr("styleinspector.contextmenu.copy")
);
ok(menuitemCopy.visible, "Copy menu item is displayed as expected");
try {
await waitForClipboardPromise(
() => menuitemCopy.click(),
() => checkClipboardData(expectedPattern)
);
} catch (e) {
failedClipboard(expectedPattern);
}
}
async function checkCopyNestedRule(view) {
info("Select nested rule");
const doc = view.styleDocument;
const range = doc.createRange();
const nestedRule = doc.querySelector(".ruleview-rule:nth-of-type(2)");
range.selectNode(nestedRule);
const win = view.styleWindow;
win.getSelection().addRange(range);
const copyEvent = new win.Event("copy", { bubbles: true });
const expectedNested = `html {
& body {
@container (1px < width) {
& #nested {
background: tomato;
color: gold;
}
}
}
}
`;
await waitForClipboardPromise(
() => nestedRule.dispatchEvent(copyEvent),
expectedNested
);
}
function checkClipboardData(expectedPattern) {
const actual = SpecialPowers.getClipboardData("text/plain");
const expectedRegExp = new RegExp(expectedPattern, "g");
return expectedRegExp.test(actual);
}
function failedClipboard(expectedPattern) {
// Format expected text for comparison
const terminator = osString == "WINNT" ? "\r\n" : "\n";
expectedPattern = expectedPattern.replace(/\[\\r\\n\][+*]/g, terminator);
expectedPattern = expectedPattern.replace(/\\\(/g, "(");
expectedPattern = expectedPattern.replace(/\\\)/g, ")");
let actual = SpecialPowers.getClipboardData("text/plain");
// Trim the right hand side of our strings. This is because expectedPattern
// accounts for windows sometimes adding a newline to our copied data.
expectedPattern = expectedPattern.trimRight();
actual = actual.trimRight();
dump(
"TEST-UNEXPECTED-FAIL | Clipboard text does not match expected ... " +
"results (escaped for accurate comparison):\n"
);
info("Actual: " + escape(actual));
info("Expected: " + escape(expectedPattern));
}