Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

/* Any copyright is dedicated to the Public Domain.
"use strict";
// Test that the computed values of a style (the shorthand expansion) are
// properly updated after the style is changed.
const TEST_URI = `
<style type="text/css">
#testid {
padding: 10px;
}
</style>
<div id="testid">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 editAndCheck(view);
});
async function editAndCheck(view) {
const prop = getTextProperty(view, 1, { padding: "10px" });
const propEditor = prop.editor;
const newPaddingValue = "20px";
info("Focusing the inplace editor field");
const editor = await focusEditableField(view, propEditor.valueSpan);
is(
inplaceEditor(propEditor.valueSpan),
editor,
"Focused editor should be the value span."
);
const onPropertyChange = waitForComputedStyleProperty(
"#testid",
null,
"padding-top",
newPaddingValue
);
const onRefreshAfterPreview = once(view, "ruleview-changed");
info("Entering a new value");
EventUtils.sendString(newPaddingValue, view.styleWindow);
info(
"Waiting for the debounced previewValue to apply the " +
"changes to document"
);
view.debounce.flush();
await onPropertyChange;
info("Waiting for ruleview-refreshed after previewValue was applied.");
await onRefreshAfterPreview;
const onBlur = once(editor.input, "blur");
info("Entering the commit key and finishing edit");
EventUtils.synthesizeKey("KEY_Enter");
info("Waiting for blur on the field");
await onBlur;
info("Waiting for the style changes to be applied");
await once(view, "ruleview-changed");
const computed = prop.computed;
const propNames = [
"padding-top",
"padding-right",
"padding-bottom",
"padding-left",
];
is(computed.length, propNames.length, "There should be 4 computed values");
propNames.forEach((propName, i) => {
is(
computed[i].name,
propName,
"Computed property #" + i + " has name " + propName
);
is(
computed[i].value,
newPaddingValue,
"Computed value of " + propName + " is as expected"
);
});
propEditor.expander.click();
const computedDom = propEditor.computed;
is(
computedDom.children.length,
propNames.length,
"There should be 4 nodes in the DOM"
);
propNames.forEach((propName, i) => {
is(
computedDom.getElementsByClassName("ruleview-propertyvalue")[i]
.textContent,
newPaddingValue,
"Computed value of " + propName + " in DOM is as expected"
);
});
}