<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function setContainerWidth(width)
{
    document.getElementById("container").style.width = `${width}px`;
}

function test()
{
    let suite = InspectorTest.createAsyncSuite("CSS.getMatchedStyleForNode.ContainerGrouping");

    function expectRuleAtIndex(rules, index, {selectorText, colorPropertyValue, file, lineNumber, groupings})
    {
        InspectorTest.log(`- Testing rule #${index}`);

        let rule = rules[index];
        InspectorTest.expectEqual(rule.selectorText, selectorText, `Selector text should be "${selectorText}".`);
        InspectorTest.expectEqual(rule.style.propertyForName("color").value, colorPropertyValue, `"color" property value should be "${colorPropertyValue}".`);
        InspectorTest.expectEqual(rule.sourceCodeLocation?.sourceCode.urlComponents.lastPathComponent, file, `Source code for rule should be in file named "${file}".`);

        if (!groupings) {
            InspectorTest.expectEmpty(rule.groupings, "Rule should have no groupings.");
            return;
        }

        InspectorTest.expectEqual(rule.groupings.length, groupings.length, `Rule should have ${groupings.length} grouping(s).`);

        for (let i = 0; i < groupings.length; ++i) {
            InspectorTest.expectEqual(rule.groupings[i].type, groupings[i].type, `Grouping ${i} should have a type of "${groupings[i].type}".`);

            if (groupings[i].text)
                InspectorTest.expectEqual(rule.groupings[i].text, groupings[i].text, `Grouping ${i} should have a text of "${groupings[i].text}".`);
            else
                InspectorTest.expectNull(rule.groupings[i].text, `Grouping ${i} should not have any text.`);
        }
    }

    function addTestCase({name, description, containerWidth, expectedAuthoredRuleCount, authoredRulesHandler})
    {
        suite.addTestCase({
            name,
            description,
            async test() {

                await InspectorTest.evaluateInPage(`setContainerWidth(${containerWidth})`);

                let documentNode = await WI.domManager.requestDocument();
                let nodeId = await documentNode.querySelector("#item");
                let domNode = WI.domManager.nodeForId(nodeId);
                InspectorTest.assert(domNode, `Should find DOM Node for selector '#item'.`);

                let domNodeStyles = WI.cssManager.stylesForNode(domNode);
                InspectorTest.assert(domNodeStyles, `Should find CSS Styles for DOM Node.`);
                await domNodeStyles.refresh();

                let authoredRules = domNodeStyles.matchedRules.filter((rule) => rule.type === WI.CSSStyleSheet.Type.Author);
                InspectorTest.expectEqual(authoredRules.length, expectedAuthoredRuleCount, `Should have ${expectedAuthoredRuleCount} authored rules.`);
                authoredRulesHandler(authoredRules);
            },
        });
    }

    addTestCase({
        name: "CSS.getMatchedStyleForNode.ContainerGrouping.Narrow",
        description: "No `@container` queries should apply to the item in a 100px wide container.",
        containerWidth: 100,
        expectedAuthoredRuleCount: 1,
        authoredRulesHandler(rules) {
            expectRuleAtIndex(rules, 0, {
                selectorText: "#item",
                colorPropertyValue: "peachpuff",
                file: "getMatchedStylesForNodeContainerGrouping.html",
            });
        }
    });

    addTestCase({
        name: "CSS.getMatchedStyleForNode.ContainerGrouping.Medium",
        description: "Only one `@container` query should apply to the item in a 200px wide container.",
        containerWidth: 200,
        expectedAuthoredRuleCount: 2,
        authoredRulesHandler(rules) {
            expectRuleAtIndex(rules, 0, {
                selectorText: "#item",
                colorPropertyValue: "lemonchiffon",
                file: "getMatchedStylesForNodeContainerGrouping.html",
                groupings: [
                    {type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
                    {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
                ],
            });
            expectRuleAtIndex(rules, 1, {
                selectorText: "#item",
                colorPropertyValue: "peachpuff",
                file: "getMatchedStylesForNodeContainerGrouping.html",
            });
        }
    });

    addTestCase({
        name: "CSS.getMatchedStyleForNode.ContainerGrouping.Wide",
        description: "Two `@container` queries should apply to the item in a 300px wide container.",
        containerWidth: 300,
        expectedAuthoredRuleCount: 3,
        authoredRulesHandler(rules) {
            expectRuleAtIndex(rules, 0, {
                selectorText: "#item",
                colorPropertyValue: "thistle",
                file: "getMatchedStylesForNodeContainerGrouping.html",
                groupings: [
                    {type: WI.CSSGrouping.Type.ContainerRule, text: "(width >= 300px)"},
                ],
            });
            expectRuleAtIndex(rules, 1, {
                selectorText: "#item",
                colorPropertyValue: "lemonchiffon",
                file: "getMatchedStylesForNodeContainerGrouping.html",
                groupings: [
                    {type: WI.CSSGrouping.Type.ContainerRule, text: "usedName (width >= 200px)"},
                    {type: WI.CSSGrouping.Type.SupportsRule, text: "(color: red)"},
                ],
            });
            expectRuleAtIndex(rules, 2, {
                selectorText: "#item",
                colorPropertyValue: "peachpuff",
                file: "getMatchedStylesForNodeContainerGrouping.html",
            });
        }
    });

    suite.runTestCasesAndFinish();
}
</script>
<style>
    #container {
        container-type: size;
        container-name: usedName;
    }

    #item {
        color: peachpuff;
    }

    @supports(color: red) {
        @container usedName (width >= 200px) {
            #item {
                color: lemonchiffon;
            }
        }
    }

    @container notUsedName (width >= 200px) {
        #item {
            color: PaleVioletRed;
        }
    }

    @container (width >= 300px) {
        #item {
            color: thistle;
        }
    }
</style>
</head>
<body onload="runTest()">
    <p>Tests for the CSS.getMatchedStyleForNode command and container rule groups.</p>
    <div id="container">
        <div id="item"></div>
    </div>
</body>
</html>