blob: ac7397ca268989f4995c48d57ea14201f757ed93 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
let nodeStyles = null;
WI.DOMNodeStyles.addEventListener(WI.DOMNodeStyles.Event.NeedsRefresh, function(event) {
// Normally, this would get called from views if the styles sidebar is visible.
// This doesn't work in tests.
event.target.refresh();
});
let suite = InspectorTest.createAsyncSuite("ModifyInlineStyle");
suite.addTestCase({
name: "ModifyInlineStyle.AddPropertyAndEdit",
test(resolve, reject) {
let getInlineStyleDeclaration = () => {
for (let styleDeclaration of nodeStyles.orderedStyles) {
if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline)
return styleDeclaration;
}
InspectorTest.fail("No declaration found.");
resolve();
};
let style = getInlineStyleDeclaration();
const fontPropertyIndex = 0;
let fontProperty = style.newBlankProperty(fontPropertyIndex);
fontProperty.name = "font";
fontProperty.rawValue = "12px normal sans-serif!important";
let colorProperty = null;
let cssPropertyChanged = (event) => {
if (event.target.ownerStyle && event.target.ownerStyle.type === WI.CSSStyleDeclaration.Type.Computed)
return;
if (!event.target.text)
return;
InspectorTest.log(`CSSProperty changed to "${event.target.text}".`);
InspectorTest.log(style.text + "\n");
};
WI.CSSProperty.addEventListener(WI.CSSProperty.Event.Changed, cssPropertyChanged);
fontProperty.awaitEvent(WI.CSSProperty.Event.Changed).then((event) => {
const colorPropertyIndex = 1;
colorProperty = style.newBlankProperty(colorPropertyIndex);
let promise = colorProperty.awaitEvent(WI.CSSProperty.Event.Changed);
colorProperty.name = "color";
colorProperty.rawValue = "red";
return promise;
}).then(() => {
let promise = fontProperty.awaitEvent(WI.CSSProperty.Event.Changed);
fontProperty.rawValue = "12px sans-serif";
return promise;
}).then(() => {
let promise = colorProperty.awaitEvent(WI.CSSProperty.Event.Changed);
colorProperty.rawValue = "invalid_c010r";
return promise;
}).then(() => {
WI.CSSProperty.removeEventListener(WI.CSSProperty.Event.Changed, cssPropertyChanged);
resolve();
return true;
});
}
});
WI.domManager.requestDocument((documentNode) => {
WI.domManager.querySelector(documentNode.id, "#x", (contentNodeId) => {
if (contentNodeId) {
let domNode = WI.domManager.nodeForId(contentNodeId);
nodeStyles = WI.cssManager.stylesForNode(domNode);
if (nodeStyles.needsRefresh) {
nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
suite.runTestCasesAndFinish()
});
} else
suite.runTestCasesAndFinish();
} else {
InspectorTest.fail("DOM node not found.");
InspectorTest.completeTest();
}
});
});
}
</script>
</head>
<body onload="runTest()">
<p>Testing that adding and editing CSS properties of inline styles works.</p>
<div id="x"></div>
</body>
</html>