<!doctype html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
function test()
{
    let suite = InspectorTest.createSyncSuite("WI.CSSKeywordCompletions");

    function addTestForPartialPropertyName({name, description, text, allowEmptyPrefix, expectedCompletions, expectedCompletionCount}) {
        suite.addTestCase({
            name,
            description,
            test() {
                allowEmptyPrefix ??= false;
                expectedCompletions ??= [];
                expectedCompletionCount ??= -1;

                // FIXME: <webkit.org/b/227157> Styles: Support completions mid-token.
                let caretPosition = text.length;
                let completionResults = WI.CSSKeywordCompletions.forPartialPropertyName(text, {caretPosition, allowEmptyPrefix});

                if (expectedCompletionCount >= 0)
                    InspectorTest.expectEqual(completionResults.completions.length, expectedCompletionCount, `Expected exactly ${expectedCompletionCount} completion results.`);

                // Because expected completions could be added at any time, just make sure the list contains our expected completions, instead of enforcing an exact match between expectations and reality.
                let expectedCompletionsPresent = expectedCompletions.every((expectedCompletion) => {
                    if (!completionResults.completions.includes(expectedCompletion)) {
                        InspectorTest.fail(`Expected completion "${expectedCompletion}" in completions.`);
                        return false;
                    }
                    return true;
                });
                InspectorTest.expectThat(expectedCompletionsPresent, "All expected completions were present.");
            }
        });
    }

    addTestForPartialPropertyName({
        name: "WI.CSSKeywordCompletions.forPartialPropertyName.emptyTextDisallowsEmptyPrefix",
        description: "Test that for empty text, there should be no completions when `allowEmptyPrefix` is `false`.",
        text: "",
        allowEmptyPrefix: false,
        expectedCompletionCount: 0,
    });

    addTestForPartialPropertyName({
        name: "WI.CSSKeywordCompletions.forPartialPropertyName.emptyTextAllowsEmptyPrefix",
        description: "Test that for empty text, there should be completions when `allowEmptyPrefix` is `true`.",
        text: "",
        allowEmptyPrefix: true,
        expectedCompletions: ["border", "color", "margin", "padding"],
    });

    addTestForPartialPropertyName({
        name: "WI.CSSKeywordCompletions.forPartialPropertyName.singleCharacterMatches",
        description: "Test that for a common single character, there will be multiple completions available.",
        text: "r",
        expectedCompletions: ["r", "range", "resize", "right", "rotate", "row-gap", "rx", "ry"],
    });

    addTestForPartialPropertyName({
        name: "WI.CSSKeywordCompletions.forPartialPropertyName.multipleCharacterMatches",
        description: "Test that for a more specific set of characters, there will be some number of matches.",
        text: "rang",
        expectedCompletions: ["range"],
    });

    function addTestForPartialPropertyValue({name, description, propertyName, text, caretPosition, expectedPrefix, expectedCompletions, additionalFunctionValueCompletionsProvider}) {
        suite.addTestCase({
            name,
            description,
            test() {
                caretPosition ??= text.length;
                expectedPrefix ??= text;
                expectedCompletions ??= [];
                additionalFunctionValueCompletionsProvider ??= () => {};

                let completionResults = WI.CSSKeywordCompletions.forPartialPropertyValue(text, propertyName, {caretPosition, additionalFunctionValueCompletionsProvider});
                InspectorTest.expectEqual(completionResults.prefix, expectedPrefix, `Expected result prefix to be "${expectedPrefix}"`);

                // Because expected completions could be added at any time, just make sure the list contains our expected completions, instead of enforcing an exact match between expectations and reality.
                let expectedCompletionsPresent = expectedCompletions.every((expectedCompletion) => {
                    if (!completionResults.completions.includes(expectedCompletion)) {
                        InspectorTest.fail(`Expected completion "${expectedCompletion}" in completions.`);
                        return false;
                    }
                    return true;
                });
                InspectorTest.expectThat(expectedCompletionsPresent, "All expected completions were present.");
            }
        });
    }

    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.EmptyTop",
        description: "Test that an empty value provides the expected default completions.",
        propertyName: "top",
        text: "",
        expectedCompletions: ["env()", "initial", "revert", "unset", "var()"],
    });

    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.EmptyColor",
        description: "Test that color completions provide the color functions as completions.",
        propertyName: "color",
        text: "",
        expectedCompletions: ["black", "blue", "green", "red", "white", "papayawhip", "color()", "color-contrast()", "color-mix()", "env()", "hsl()", "hsla()", "hwb()", "lab()", "lch()", "rgb()", "rgba()", "var()"],
    });

    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.PartialColor",
        description: "Test that a partial color name that also matches a full color name still provides the other completion.",
        propertyName: "color",
        text: "papaya",
        expectedCompletions: ["papayawhip"],
    });

    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.EmptyWordSpacing",
        description: "Test that the `word-spacing` property provides its expected completions.",
        propertyName: "word-spacing",
        text: "",
        expectedCompletions: ["normal", "calc()"],
    });

    // `border: 1px | red`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.MidLineBorder",
        description: "Test that a completion can be performed between two other values.",
        propertyName: "border",
        text: "1px  red",
        caretPosition: 4,
        expectedPrefix: "",
        expectedCompletions: ["solid"],
    });

    // `top: env(|`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.EnvironmentFunctionCompletion",
        description: "Test that a function completion can be performed inside a function without a closing parenthesis.",
        propertyName: "top",
        text: "env(",
        expectedPrefix: "",
        expectedCompletions: ["safe-area-inset-bottom", "safe-area-inset-left", "safe-area-inset-right", "safe-area-inset-top", "var()"],
    });

    // `top: env(|)`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.MidLineEnvironmentFunction",
        description: " Test that a function completion can be performed inside a function with a closing parenthesis.",
        propertyName: "top",
        text: "env()",
        caretPosition: 4,
        expectedPrefix: "",
        expectedCompletions: ["safe-area-inset-bottom", "safe-area-inset-left", "safe-area-inset-right", "safe-area-inset-top", "var()"],
    });

    // `grid-template-columns: repeat(au|`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.PartialFunctionValue",
        description: "Test that completing a partial value inside a function produces expected completions.",
        propertyName: "grid-template-columns",
        text: "repeat(au",
        expectedPrefix: "au",
        expectedCompletions: ["auto-fill", "auto-fit"],
    });

    // `grid-template-columns: [linename1] 100px repeat(|, [linename2 linename3] 150px) [linename3] 100px [linename4]`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.ComplexMultiValueFunction",
        description: " Test that performing a completion mid-line inside a function right before a separator character, like a comma, produces expected completions.", 
        propertyName: "grid-template-columns",
        text: "[linename1] 100px repeat(, [linename2 linename3] 150px) [linename3] 100px [linename4]",
        caretPosition: 25,
        expectedPrefix: "",
        expectedCompletions: ["auto-fill", "auto-fit", "var()"],
    });

    // `attr(|`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.AttributeFunction",
        description: "Test that attribute function value completions from the custom provider are used.",
        text: "attr(",
        expectedPrefix: "",
        expectedCompletions: ["class", "id", "var()"],
        additionalFunctionValueCompletionsProvider: () => ["class", "id"],
    });

    // `attr(c|)`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.MidLineAttributeFunction",
        description: "Test that attribute function value completions is inside a function with a closing parenthesis uses completions from the custom provider",
        text: "attr(c)",
        caretPosition: 6,
        expectedPrefix: "c",
        expectedCompletions: ["class"],
        additionalFunctionValueCompletionsProvider: () => ["class", "id"],
    });

    // `var(|`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunction",
        description: "Test that variable function value completions from the custom provider are used.",
        text: "var(",
        expectedPrefix: "",
        expectedCompletions: ["--one", "--two"],
        additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
    });

    // `var(--o|`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionFiltered",
        description: "Test that variable function value completions from the custom provider are filtered.",
        text: "var(--o",
        expectedPrefix: "--o",
        expectedCompletions: ["--one"],
        additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
    });

    // `calc(1 + var(|))`
    addTestForPartialPropertyValue({
        name: "WI.CSSKeywordCompletions.forPartialPropertyValue.VariableFunctionInCalc",
        description: "Test that variable function value completions from the custom provider are used when the var() is nested inside a calc()",
        text: "calc(1 + var())",
        caretPosition: 13,
        expectedPrefix: "",
        expectedCompletions: ["--one", "--two"],
        additionalFunctionValueCompletionsProvider: () => ["--one", "--two"],
    });

    suite.runTestCasesAndFinish();
}
</script>
</head>
<body onload="runTest()">
    <p>Testing WI.CSSKeywordCompletions.</p>
</body>
</html>