<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test() {
    let nodeStyles = null;
    let suite = InspectorTest.createAsyncSuite("AddCSSProperty");

    function getMatchedStyle(selector, resolve) {
        for (let rule of nodeStyles.matchedRules) {
            if (rule.selectorText === selector)
                return rule.style;
        }

        InspectorTest.fail(`No style found for selector "${selector}"`);
        resolve();
    }

    suite.addTestCase({
        name: "AddCSSProperty.AppendAfterMissingSemicolon",
        test(resolve, reject) {
            let styleDeclaration = getMatchedStyle(".rule-a", resolve);
            styleDeclaration.locked = true;
            let newProperty = styleDeclaration.newBlankProperty(1);
            newProperty.name = "color";
            newProperty.rawValue = "green";

            InspectorTest.expectEqual(styleDeclaration.text, `\n    font-size: 14px;\n    color: green;\n`, "`color: green` property should be appended.");

            styleDeclaration.locked = false;
            resolve();
        }
    });

    suite.addTestCase({
        name: "AddCSSProperty.InsertBeforeAndAfter",
        test(resolve, reject) {
            let styleDeclaration = getMatchedStyle(".rule-b", resolve);
            styleDeclaration.locked = true;
            let newProperty = styleDeclaration.newBlankProperty(0);
            newProperty.name = "color";
            newProperty.rawValue = "green";

            let expected = `\n    color: green;\n    outline: 2px solid brown;\n`;
            InspectorTest.expectEqual(styleDeclaration.text, expected, "`color: green` property should be inserted before the first property.");

            styleDeclaration = getMatchedStyle(".rule-b", resolve);
            newProperty = styleDeclaration.newBlankProperty(2);
            newProperty.name = "display";
            newProperty.rawValue = "block";

            expected = `\n    color: green;\n    outline: 2px solid brown;\n    display: block;\n`;
            InspectorTest.expectEqual(styleDeclaration.text, expected, "`display: block` property should be appended at the end.");

            styleDeclaration.locked = false;
            resolve();
        }
    });

    suite.addTestCase({
        name: "AddCSSProperty.InsertBetween",
        test(resolve, reject) {
            let styleDeclaration = getMatchedStyle(".rule-c", resolve);
            styleDeclaration.locked = true;
            let newProperty = styleDeclaration.newBlankProperty(1);
            newProperty.name = "font-family";
            newProperty.rawValue = "fantasy";

            let expected = `\n    background-color: peachpuff;\n    font-family: fantasy;\n    color: burlywood;\n`;
            InspectorTest.expectEqual(styleDeclaration.text, expected, "`font-family: fantasy` property should be inserted after the first property.");

            styleDeclaration.locked = false;
            resolve();
        }
    });

    suite.addTestCase({
        name: "AddCSSProperty.AppendAfterCommentedOutProperty",
        test(resolve, reject) {
            let styleDeclaration = getMatchedStyle(".rule-d", resolve);
            styleDeclaration.locked = true;
            let newProperty = styleDeclaration.newBlankProperty(2);
            newProperty.name = "display";
            newProperty.rawValue = "inline";

            const expected = `\n    font-size: 14px;\n    /* color: red; */\n    display: inline;\n`;
            InspectorTest.expectEqual(styleDeclaration.text, expected, "`display: inline` property should be appended.");

            styleDeclaration.locked = false;
            resolve();
        }
    });

    suite.addTestCase({
        name: "AddCSSProperty.AppendAfterCommentedOutPropertyWithoutSemicolon",
        test(resolve, reject) {
            let styleDeclaration = getMatchedStyle(".rule-e", resolve);
            styleDeclaration.locked = true;
            let newProperty = styleDeclaration.newBlankProperty(2);
            newProperty.name = "display";
            newProperty.rawValue = "inline";

            const expected = `\n    font-size: 14px;\n    /* color: red; */\n    display: inline;\n`;
            InspectorTest.expectEqual(styleDeclaration.text, expected, "`display: inline` property should be appended.");

            styleDeclaration.locked = false;
            resolve();
        }
    });

    function addTestCaseForCommentingOutAndAppendingProperty({subtestName, description, ruleSelector, newPropertyName, newPropertyValue})
    {
        suite.addTestCase({
            name: `AddCSSProperty.CommentOutAndThenAppendAfterCommentedOutProperty.${subtestName}`,
            description,
            async test() {
                let styleDeclaration = getMatchedStyle(ruleSelector);

                const commentOut = true;
                styleDeclaration.properties[1].commentOut(commentOut);

                const expectedAfterCommentOut = `\n    font-size: 14px;\n    /* color: red; */\n`;
                InspectorTest.expectEqual(styleDeclaration.text, expectedAfterCommentOut, "'color: red' property should be commented out.");

                let newProperty = styleDeclaration.newBlankProperty(2);
                styleDeclaration.locked = true;
                newProperty.name = newPropertyName;
                const expectedAfterAddingName = `\n    font-size: 14px;\n    /* color: red; */\n    ${newPropertyName}: ;\n`;
                InspectorTest.expectEqual(styleDeclaration.text, expectedAfterAddingName, `'${newPropertyName}:' part of new property should be appended.`);


                newProperty.rawValue = newPropertyValue;
                const expectedafterAddingValue = `\n    font-size: 14px;\n    /* color: red; */\n    ${newPropertyName}: ${newPropertyValue};\n`;
                InspectorTest.expectEqual(styleDeclaration.text, expectedafterAddingValue, `'${newPropertyName}: ${newPropertyValue}' property should be fully appended.`);

                styleDeclaration.locked = false;
            },
        });
    }

    addTestCaseForCommentingOutAndAppendingProperty({
        subtestName: "DifferentPropertyName",
        description: "Ensure that commenting out a property and then appending a new property below it behaves as intended.",
        ruleSelector: ".rule-f",
        newPropertyName: "display",
        newPropertyValue: "flex",
    });

    addTestCaseForCommentingOutAndAppendingProperty({
        subtestName: "ExistingPropertyName",
        description: "Ensure that commenting out a property and then appending a new property with the same name below it behaves as intended.",
        ruleSelector: ".rule-g",
        newPropertyName: "color",
        newPropertyValue: "rebeccapurple",
    });

    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 CSSStyleDeclaration updates after inserting new CSS properties.</p>

<style>
.rule-a {font-size: 14px}
.rule-b {
    outline: 2px solid brown;
}
.rule-c {
    background-color: peachpuff;
    color: burlywood
}
.rule-d {
    font-size: 14px;
    /* color: red; */
}
.rule-e {
    font-size: 14px;
    /* color: red */
}
.rule-f {
    font-size: 14px;
    color: red;
}
.rule-g {
    font-size: 14px;
    color: red;
}
</style>
<div id="x" class="rule-a rule-b rule-c rule-d rule-e rule-f rule-g" style="width: 100px"></div>
</body>
</html>