<!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("WI.CSSStyelDeclaration.prototype.generateFormattedText");

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

    suite.addTestCase({
        name: "CSS.generateFormattedText.InlineStyle.includeGroupingsAndSelectors",
        description: "Check the formatting of the generated inline style string (including groupings and selectors).",
        test() {
            InspectorTest.log(nodeStyles.inlineStyle.generateFormattedText({includeGroupingsAndSelectors: true}));
        }
    });

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

    suite.addTestCase({
        name: "CSS.generateFormattedText.InlineStyle.Multiline.includeGroupingsAndSelectors",
        description: "Check the formatting of the generated inline style string (multiline, and including groupings and selectors).",
        test() {
            InspectorTest.log(nodeStyles.inlineStyle.generateFormattedText({multiline: true, includeGroupingsAndSelectors: true}));
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.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.generateFormattedText());
        },
    });

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

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

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

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

    suite.addTestCase({
        name: "CSS.generateFormattedText.MatchedRules.includeGroupingsAndSelectors",
        description: "Check the formatting of the generated string (including groupings and selectors) for all matched CSS rules.",
        test() {
            for (let rule of nodeStyles.matchedRules) {
                if (!rule.style.editable)
                    continue;
                InspectorTest.log(rule.style.generateFormattedText({includeGroupingsAndSelectors: true}));
            }
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.MatchedRules.Multiline",
        description: "Check the formatting of the generated string (multiline) for all matched CSS rules.",
        test() {
            for (let rule of nodeStyles.matchedRules) {
                if (!rule.style.editable)
                    continue;
                InspectorTest.log(rule.style.generateFormattedText({multiline: true}));
            }
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.MatchedRules.includeGroupingsAndSelectors.Multiline",
        description: "Check the formatting of the generated string (multiline, and including groupings and selectors) for all matched CSS rules.",
        test() {
            for (let rule of nodeStyles.matchedRules) {
                if (!rule.style.editable)
                    continue;
                InspectorTest.log(rule.style.generateFormattedText({includeGroupingsAndSelectors: true, multiline: true}));
            }
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.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.generateFormattedText());
            }
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.MatchedRules.WithCommentedProperties.includeGroupingsAndSelectors",
        description: "Check the formatting of the generated string (including groupings and selectors) 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.generateFormattedText({includeGroupingsAndSelectors: true}));
            }
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.MatchedRules.WithCommentedProperties.Multiline",
        description: "Check the formatting of the generated string (multiline) 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.generateFormattedText({multiline: true}));
            }
        }
    });

    suite.addTestCase({
        name: "CSS.generateFormattedText.MatchedRules.WithCommentedProperties.includeGroupingsAndSelectors.Multiline",
        description: "Check the formatting of the generated string (multiline, and including groupings and selectors) 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.generateFormattedText({includeGroupingsAndSelectors: true, multiline: true}));
            }
        }
    });

    WI.domManager.requestDocument((documentNode) => {
        documentNode.querySelector("#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>