<!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>