100 lines
3.7 KiB
HTML
100 lines
3.7 KiB
HTML
<!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) => {
|
|
documentNode.querySelector("#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>
|