<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }

@media only screen and (min-width: 0px) {
    body > div {
        display: block;
        width: 100%;
        text-align: center;
    }
}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    let nodeStyles;
    let suite = InspectorTest.createAsyncSuite("CSS.generateCSSRuleString");

    function validateSelectors()
    {
        suite.addTestCase({
            name: "InlineStyleString",
            description: "Check the formatting of the generated inline style string.",
            test(resolve, reject) {
                InspectorTest.log(nodeStyles.inlineStyle.generateCSSRuleString());
                resolve();
            }
        });

        for (let i = 0; i < nodeStyles.matchedRules.length; ++i) {
            let rule = nodeStyles.matchedRules[i];
            suite.addTestCase({
                name: "CSSRuleString" + i,
                description: "Check the formatting of the generated string for the matched CSS rule.",
                test(resolve, reject) {
                    InspectorTest.log(rule.style.generateCSSRuleString());
                    resolve();
                }
            });
        }

        suite.runTestCasesAndFinish();
    }

    WI.domTreeManager.requestDocument((documentNode) => {
        WI.domTreeManager.querySelector(documentNode.id, "#test-node", (contentNodeId) => {
            if (!contentNodeId) {
                InspectorTest.log("DOM node not found.");
                InspectorTest.completeTest();
                return;
            }

            let domNode = WI.domTreeManager.nodeForId(contentNodeId);
            nodeStyles = WI.cssStyleManager.stylesForNode(domNode);
            if (nodeStyles.needsRefresh) {
                nodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed)
                .then(validateSelectors);
            } else
                validateSelectors();
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that generated CSS rule strings have proper formatting.</p>

    <div id="test-node" style="background-color: red;"></div>
</body>
</html>