Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test several types of rule-view property edition
const TEST_URI = `
<style type="text/css">
#testid {
background-color: blue;
}
.testclass, .unmatched {
background-color: green;
}
</style>
<div id="testid" class="testclass">Styled Node</div>
<div id="testid2">Styled Node</div>
`;
add_task(async function () {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { inspector, view } = await openRuleView();
await selectNode("#testid", inspector);
await testEditProperty(inspector, view);
await testDisableProperty(inspector, view);
await testPropertyStillMarkedDirty(inspector, view);
});
async function testEditProperty(inspector, ruleView) {
const idRule = getRuleViewRuleEditor(ruleView, 1).rule;
const prop = getTextProperty(ruleView, 1, { "background-color": "blue" });
let editor = await focusEditableField(ruleView, prop.editor.nameSpan);
let input = editor.input;
is(
inplaceEditor(prop.editor.nameSpan),
editor,
"Next focused editor should be the name editor."
);
ok(
input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected."
);
// Try clicking on the editor's input again, shouldn't cause trouble
EventUtils.synthesizeMouse(input, 1, 1, {}, ruleView.styleWindow);
input.select();
info(
'Entering property name "border-color" followed by a colon to ' +
"focus the value"
);
const onNameDone = ruleView.once("ruleview-changed");
const onFocus = once(idRule.editor.element, "focus", true);
EventUtils.sendString("border-color:", ruleView.styleWindow);
await onFocus;
await onNameDone;
info("Verifying that the focused field is the valueSpan");
editor = inplaceEditor(ruleView.styleDocument.activeElement);
input = editor.input;
is(
inplaceEditor(prop.editor.valueSpan),
editor,
"Focus should have moved to the value."
);
ok(
input.selectionStart === 0 && input.selectionEnd === input.value.length,
"Editor contents are selected."
);
info("Entering a value following by a semi-colon to commit it");
const onBlur = once(editor.input, "blur");
// Use sendChar() to pass each character as a string so that we can test
// prop.editor.warning.hidden after each character.
for (const ch of "red;") {
const onPreviewDone = ruleView.once("ruleview-changed");
EventUtils.sendChar(ch, ruleView.styleWindow);
ruleView.debounce.flush();
await onPreviewDone;
is(
prop.editor.warning.hidden,
true,
"warning triangle is hidden or shown as appropriate"
);
}
await onBlur;
const newValue = await getRulePropertyValue(0, 0, "border-color");
is(newValue, "red", "border-color should have been set.");
ruleView.styleDocument.activeElement.blur();
await addProperty(ruleView, 1, "color", "red", { commitValueWith: ";" });
const props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(
props[i].hasAttribute("dirty"),
i <= 1,
"props[" + i + "] marked dirty as appropriate"
);
}
}
async function testDisableProperty(inspector, ruleView) {
const prop = getTextProperty(ruleView, 1, {
"border-color": "red",
color: "red",
});
info("Disabling a property");
await togglePropStatus(ruleView, prop);
let newValue = await getRulePropertyValue(0, 0, "border-color");
is(newValue, "", "Border-color should have been unset.");
info("Enabling the property again");
await togglePropStatus(ruleView, prop);
newValue = await getRulePropertyValue(0, 0, "border-color");
is(newValue, "red", "Border-color should have been reset.");
}
async function testPropertyStillMarkedDirty(inspector, ruleView) {
// Select an unstyled node.
await selectNode("#testid2", inspector);
// Select the original node again.
await selectNode("#testid", inspector);
const props = ruleView.element.querySelectorAll(".ruleview-property");
for (let i = 0; i < props.length; i++) {
is(
props[i].hasAttribute("dirty"),
i <= 1,
"props[" + i + "] marked dirty as appropriate"
);
}
}