<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>

function test()
{
    let suite = InspectorTest.createAsyncSuite("DOMNodeStyles.variableStylesByType");

    function addTestCase({name, description, selector, expected})
    {
        suite.addTestCase({
            name,
            description,
            async test() {
                let documentNode = await WI.domManager.requestDocument();
                let nodeId = await documentNode.querySelector(selector);
                let domNode = await WI.domManager.nodeForId(nodeId);
                InspectorTest.assert(domNode, `Should find DOM Node for selector '${selector}'.`);

                let cssStyles = WI.cssManager.stylesForNode(domNode);
                await cssStyles.refreshIfNeeded();

                let styleGroups = cssStyles.variableStylesByType;
                for (let {groupType, variables} of expected) {
                    let propertyNames = styleGroups.get(groupType).properties.map(property => property.name);
                    InspectorTest.expectTrue(styleGroups.has(groupType), `Should have "${groupType}" variables group.`);
                    InspectorTest.expectShallowEqual(propertyNames.sort(), variables.sort(), "Group should include all expected variables.");
                }
            },
        });
    }

    addTestCase({
        name: "DOMNodeStyles.variableStylesByType.Colors",
        description: "Check that variables with color values are correctly identified.",
        selector: "#colors",
        expected: [
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Colors,
                variables: ["--colorName", "--colorHEX", "--colorRGB", "--colorRGBA", "--colorHSL", "--colorHSLA"],
            },
        ],
    });

    addTestCase({
        name: "DOMNodeStyles.variableStylesByType.Dimensions",
        description: "Check that variables with dimension values are correctly identified.",
        selector: "#dimensions",
        expected: [
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Dimensions,
                variables: ["--dimensionPX", "--dimensionPercent", "--dimensionFloat", "--dimensionNegative", "--dimensionNegativeFloat"],
            },
        ],
    });

    addTestCase({
        name: "DOMNodeStyles.variableStylesByType.Numbers",
        description: "Check that variables with number values are correctly identified.",
        selector: "#numbers",
        expected: [
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Numbers,
                variables: ["--number", "--numberFloat", "--numberNegative", "--numberNegativeFloat"],
            },
        ],
    });

    addTestCase({
        name: "DOMNodeStyles.variableStylesByType.Other",
        description: "Check that variables with values with unmatched types are placed in the fallback group.",
        selector: "#other",
        expected: [
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Other,
                variables: ["--shadow", "--font-family", "--font-shorthand", "--keyword"],
            },
        ],
    });

    addTestCase({
        name: "DOMNodeStyles.variableStylesByType.Mixed",
        description: "Check that all type groups have variables allocated.",
        selector: "#mixed",
        expected: [
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Colors,
                variables: ["--color"],
            },
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Dimensions,
                variables: ["--dimension"],
            },
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Numbers,
                variables: ["--number"],
            },
            {
                groupType: WI.DOMNodeStyles.VariablesGroupType.Other,
                variables: ["--font-family"],
            },
        ],
    });

    suite.runTestCasesAndFinish();
}
</script>
<style>

div#colors {
    --colorName: black;
    --colorHEX: #000;
    --colorRGB: rgb(0, 0, 0);
    --colorRGBA: rgba(0, 0, 0, 1);
    --colorHSL: hsl(0, 0%, 0%);
    --colorHSLA: hsla(0, 0%, 0%, 1);

    /* should not match any below */
    --shadow: 1px 1px black;
    --dimensionPX: 100px;
    --number: 100;
}

div#dimensions {
    --dimensionPX: 100px;
    --dimensionPercent: 100%;
    --dimensionFloat: 1.0%;
    --dimensionNegative: -100px;
    --dimensionNegativeFloat: -1.0%;

    /* should not match any below */
    --shadow: 1px 1px black;
    --color: black;
    --number: 100;
    --numberFloat: 1.0;
    --numberNegativeFloat: -1.0;
}

div#numbers {
    --number: 100;
    --numberFloat: 1.0;
    --numberNegative: -100;
    --numberNegativeFloat: -1.0;

    /* should not match any below */
    --shadow: 1px 1px black;
    --dimensionPX: 100px;
    --dimensionPercent: 100%;
    --dimensionNegative: -100px;
    --dimensionNegativeFloat: -1.0%;
}

div#other {
    --shadow: 1px 1px black;
    --font-family: sans-serif;
    --font-shorthand: 16px / 1.6 sans-serif;
    --keyword: inherit;
}

div#mixed {
    --color: black;
    --dimension: 100px;
    --number: 100;
    --font-family: sans-serif;
}

</style>
</head>
<body onload="runTest();">
<p>Test for DOMNodeStyles.variableStylesByType</p>
<div>
    <div id="colors"></div>
    <div id="dimensions"></div>
    <div id="numbers"></div>
    <div id="other"></div>
    <div id="mixed"></div>
</div>
</body>
</html>