Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that changes are previewed when editing a property value.
const TEST_URI = `
<style type="text/css">
#testid {
display:block;
}
</style>
<div id="testid">Styled Node</div><span>inline element</span>
`;
// Format
// {
// value : what to type in the field
// expected : expected computed style on the targeted element
// }
const TEST_DATA = [
{ value: "inline", expected: "inline" },
{ value: "inline-block", expected: "inline-block" },
// Invalid property values should not apply, and should fall back to default
{ value: "red", expected: "block" },
{ value: "something", expected: "block" },
{ escape: true, value: "inline", expected: "block" },
];
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#testid", inspector);
for (const data of TEST_DATA) {
await testLivePreviewData(data, view, "#testid");
}
});
async function testLivePreviewData(data, ruleView, selector) {
const rule = getRuleViewRuleEditor(ruleView, 1).rule;
const propEditor = rule.textProps[0].editor;
info("Focusing the property value inplace-editor");
const editor = await focusEditableField(ruleView, propEditor.valueSpan);
is(
inplaceEditor(propEditor.valueSpan),
editor,
"The focused editor is the value"
);
info("Entering value in the editor: " + data.value);
const onPreviewDone = ruleView.once("ruleview-changed");
EventUtils.sendString(data.value, ruleView.styleWindow);
ruleView.debounce.flush();
await onPreviewDone;
const onValueDone = ruleView.once("ruleview-changed");
if (data.escape) {
// First, close the popup
await waitFor(() => ruleView.popup && ruleView.popup.isOpen);
ok(true, "Popup was opened");
const onPopupClosed = once(ruleView.popup, "popup-closed");
EventUtils.synthesizeKey("VK_ESCAPE", {}, ruleView.styleWindow);
await onPopupClosed;
ok(true, "Popup was closed");
// Then hit escape a second time to cancel the change
EventUtils.synthesizeKey("KEY_Escape");
} else {
EventUtils.synthesizeKey("KEY_Enter");
}
await onValueDone;
// While the editor is still focused in, the display should have
// changed already
is(
await getComputedStyleProperty(selector, null, "display"),
data.expected,
"Element should be previewed as " + data.expected
);
}