| <!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, caretPosition, allowEmptyPrefix, expectedCompletions, expectedCompletionCount}) { |
| suite.addTestCase({ |
| name, |
| description, |
| test() { |
| allowEmptyPrefix ??= false; |
| expectedCompletions ??= []; |
| expectedCompletionCount ??= -1; |
| |
| // FIXME: <webkit.org/b/227157> Styles: Support completions mid-token. |
| 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"], |
| }); |
| |
| // FIXME: This test will fail after addressing <webkit.org/b/227157> Styles: Support completions mid-token. |
| addTestForPartialPropertyName({ |
| name: "WI.CSSKeywordCompletions.forPartialPropertyName.midTokenNoCompletions", |
| description: "Test that completions are not provided when the caret is positioned within the token.", |
| text: "margin", |
| caretPosition: 1, |
| expectedCompletionCount: 0, |
| }); |
| |
| function addTestForPartialPropertyValue({name, description, propertyName, text, caretPosition, expectedPrefix, expectedCompletions, expectedCompletionCount, additionalFunctionValueCompletionsProvider}) { |
| suite.addTestCase({ |
| name, |
| description, |
| test() { |
| caretPosition ??= text.length; |
| expectedPrefix ??= text; |
| expectedCompletions ??= []; |
| expectedCompletionCount ??= -1; |
| additionalFunctionValueCompletionsProvider ??= () => {}; |
| |
| let completionResults = WI.CSSKeywordCompletions.forPartialPropertyValue(text, propertyName, {caretPosition, additionalFunctionValueCompletionsProvider}); |
| InspectorTest.expectEqual(completionResults.prefix, expectedPrefix, `Expected result prefix to be "${expectedPrefix}"`); |
| |
| 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."); |
| } |
| }); |
| } |
| |
| 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"], |
| }); |
| |
| // `hsl()a|` |
| addTestForPartialPropertyValue({ |
| name: "WI.CSSKeywordCompletions.forPartialPropertyValue.NoWhitespaceAfterFunction", |
| description: "Test that color completions are not offered immediately after a closing parenthesis", |
| propertyName: "background", |
| text: "hsl()a", |
| caretPosition: 6, |
| expectedPrefix: "", |
| expectedCompletionCount: 0 |
| }); |
| |
| // `hsl() a|` |
| addTestForPartialPropertyValue({ |
| name: "WI.CSSKeywordCompletions.forPartialPropertyValue.WhitespaceAfterFunction", |
| description: "Test that color completions are offered when a closing parenthesis is followed by whitespace", |
| propertyName: "background", |
| text: "hsl() a", |
| caretPosition: 7, |
| expectedPrefix: "a", |
| expectedCompletions: ["aliceblue", "antiquewhite"], |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Testing WI.CSSKeywordCompletions.</p> |
| </body> |
| </html> |
