<!DOCTYPE html>
<html>
<head>
<style>
*{a:1;b:2;c:3}
body>*{a:1;b:2;c:3}
@media all {body>div{a:1;b:2;c:3}}
@media only screen and (min-width:0px) {body>#test-node{a:1;b:2;c:3}}
@media only screen and (min-width:0px) {@media only screen and (min-height:0px) {body>div#test-node{a:1;b:2;c:3}}}
</style>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    let nodeStyles = null;

    let suite = InspectorTest.createSyncSuite("CSS.generateCSSRuleString");

    suite.addTestCase({
        name: "CSS.generateCSSRuleString.InlineStyle",
        description: "Check the formatting of the generated inline style string.",
        test() {
            InspectorTest.log(nodeStyles.inlineStyle.generateCSSRuleString());
        }
    });

    suite.addTestCase({
        name: "CSS.generateCSSRuleString.InlineStyle.WithCommentedProperty",
        description: "Check the formatting of the generated inline style string if a property is commented out.",
        test() {
            nodeStyles.inlineStyle.properties[1].commentOut(true);
            InspectorTest.log(nodeStyles.inlineStyle.generateCSSRuleString());
        },
    });

    suite.addTestCase({
        name: "CSS.generateCSSRuleString.MatchedRules",
        description: "Check the formatting of the generated string for all matched CSS rules.",
        test() {
            for (let rule of nodeStyles.matchedRules)
                InspectorTest.log(rule.style.generateCSSRuleString());
        }
    });

    suite.addTestCase({
        name: "CSS.generateCSSRuleString.MatchedRules.WithCommentedProperties",
        description: "Check the formatting of the generated string for all matched CSS rules if a property is commented out in each.",
        test() {
            for (let rule of nodeStyles.matchedRules) {
                if (!rule.style.editable)
                    continue;

                rule.style.properties[1].commentOut(true);
                InspectorTest.log(rule.style.generateCSSRuleString());
            }
        }
    });

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

            let domNode = WI.domManager.nodeForId(contentNodeId);
            nodeStyles = WI.cssManager.stylesForNode(domNode);
            if (nodeStyles.needsRefresh)
                await nodeStyles.awaitEvent(WI.DOMNodeStyles.Event.Refreshed);

            suite.runTestCasesAndFinish();
        });
    });
}
</script>
</head>
<body onload="runTest()">
    <p>Testing that generated CSS rule strings have proper formatting.</p>
    <div id="test-node" style="a:1;b:2;c:3"></div>
</body>
</html>