LayoutTests/inspector/unit-tests/css-keyword-completions.html - WebKit - Git at Google

 <!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>
	<!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>