[css] path completion sometimes only works for one folder level. Fixes #46722

extensions/css-language-features/server/src/pathCompletion.ts

@@ -54,16 +54,11 @@ export function providePathSuggestions(value: string, range: Range, activeDocFsP
 		replaceRange = getReplaceRange(range, valueAfterLastSlash);
 	}
 
-	let parentDir: string;
-	if (lastIndexOfSlash === -1) {
-		parentDir = path.resolve(root);
-	} else {
-		const valueBeforeLastSlash = value.slice(0, lastIndexOfSlash + 1);
+	const valueBeforeLastSlash = value.slice(0, lastIndexOfSlash + 1);
 
-		parentDir = startsWith(value, '/')
-			? path.resolve(root, '.' + valueBeforeLastSlash)
-			: path.resolve(activeDocFsPath, '..', valueBeforeLastSlash);
-	}
+	const parentDir = startsWith(value, '/')
+		? path.resolve(root, '.' + valueBeforeLastSlash)
+		: path.resolve(activeDocFsPath, '..', valueBeforeLastSlash);
 
 	try {
 		return fs.readdirSync(parentDir).map(f => {

extensions/css-language-features/server/src/test/completion.test.ts

@@ -41,7 +41,7 @@ suite('Completions', () => {
 		const position = document.positionAt(offset);
 
 		if (!workspaceFolders) {
-			workspaceFolders = [{ name: 'x', uri: path.dirname(testUri) }];
+			workspaceFolders = [{ name: 'x', uri: testUri.substr(0, testUri.lastIndexOf('/')) }];
 		}
 
 		let participantResult = CompletionList.create([]);
@@ -62,13 +62,14 @@ suite('Completions', () => {
 	}
 
 	test('CSS Path completion', function () {
-		let testUri = Uri.file(path.resolve(__dirname, '../../test/pathCompletionFixtures/about/about.css')).fsPath;
+		let testUri = Uri.file(path.resolve(__dirname, '../../test/pathCompletionFixtures/about/about.css')).toString();
+		let folders = [{ name: 'x', uri: Uri.file(path.resolve(__dirname, '../../test')).toString() }];
 
 		assertCompletions('html { background-image: url("./|")', {
 			items: [
 				{ label: 'about.html', resultText: 'html { background-image: url("./about.html")' }
 			]
-		}, testUri);
+		}, testUri, folders);
 
 		assertCompletions(`html { background-image: url('../|')`, {
 			items: [
@@ -76,7 +77,7 @@ suite('Completions', () => {
 				{ label: 'index.html', resultText: `html { background-image: url('../index.html')` },
 				{ label: 'src/', resultText: `html { background-image: url('../src/')` }
 			]
-		}, testUri);
+		}, testUri, folders);
 
 		assertCompletions(`html { background-image: url('../src/a|')`, {
 			items: [
@@ -84,12 +85,39 @@ suite('Completions', () => {
 				{ label: 'data/', resultText: `html { background-image: url('../src/data/')` },
 				{ label: 'test.js', resultText: `html { background-image: url('../src/test.js')` }
 			]
-		}, testUri);
+		}, testUri, folders);
 
 		assertCompletions(`html { background-image: url('../src/data/f|.asar')`, {
 			items: [
 				{ label: 'foo.asar', resultText: `html { background-image: url('../src/data/foo.asar')` }
 			]
-		}, testUri);
+		}, testUri, folders);
+
+		assertCompletions(`html { background-image: url('|')`, {
+			items: [
+				{ label: 'about.css', resultText: `html { background-image: url('about.css')` },
+				{ label: 'about.html', resultText: `html { background-image: url('about.html')` },
+			]
+		}, testUri, folders);
+
+		assertCompletions(`html { background-image: url('/|')`, {
+			items: [
+				{ label: 'pathCompletionFixtures/', resultText: `html { background-image: url('/pathCompletionFixtures/')` }
+			]
+		}, testUri, folders);
+
+		assertCompletions(`html { background-image: url('/pathCompletionFixtures/|')`, {
+			items: [
+				{ label: 'about/', resultText: `html { background-image: url('/pathCompletionFixtures/about/')` },
+				{ label: 'index.html', resultText: `html { background-image: url('/pathCompletionFixtures/index.html')` },
+				{ label: 'src/', resultText: `html { background-image: url('/pathCompletionFixtures/src/')` }
+			]
+		}, testUri, folders);
+
+		assertCompletions(`html { background-image: url("/|")`, {
+			items: [
+				{ label: 'pathCompletionFixtures/', resultText: `html { background-image: url("/pathCompletionFixtures/")` }
+			]
+		}, testUri, folders);
 	});
 });
\ No newline at end of file

extensions/html-language-features/server/src/modes/pathCompletion.ts

@@ -69,16 +69,11 @@ function providePaths(valueBeforeCursor: string, activeDocFsPath: string, root?:
 	}
 
 	const lastIndexOfSlash = valueBeforeCursor.lastIndexOf('/');
-	let parentDir: string;
-	if (lastIndexOfSlash === -1) {
-		parentDir = path.resolve(root);
-	} else {
-		const valueBeforeLastSlash = valueBeforeCursor.slice(0, lastIndexOfSlash + 1);
+	const valueBeforeLastSlash = valueBeforeCursor.slice(0, lastIndexOfSlash + 1);
 
-		parentDir = startsWith(valueBeforeCursor, '/')
-			? path.resolve(root, '.' + valueBeforeLastSlash)
-			: path.resolve(activeDocFsPath, '..', valueBeforeLastSlash);
-	}
+	const parentDir = startsWith(valueBeforeCursor, '/')
+		? path.resolve(root, '.' + valueBeforeLastSlash)
+		: path.resolve(activeDocFsPath, '..', valueBeforeLastSlash);
 
 	try {
 		return fs.readdirSync(parentDir).map(f => {

extensions/html-language-features/server/src/test/completions.test.ts

@@ -166,6 +166,7 @@ suite('HTML Path Completion', () => {
 	});
 
 	test('Empty Path Value', () => {
+		// document: index.html
 		testCompletionFor('<script src="|">', {
 			items: [
 				{ label: 'about/', resultText: '<script src="about/">' },
@@ -173,8 +174,15 @@ suite('HTML Path Completion', () => {
 				{ label: 'src/', resultText: '<script src="src/">' },
 			]
 		}, indexHtmlUri);
+		// document: about.html
+		testCompletionFor('<script src="|">', {
+			items: [
+				{ label: 'about.css', resultText: '<script src="about.css">' },
+				{ label: 'about.html', resultText: '<script src="about.html">' },
+				{ label: 'media/', resultText: '<script src="media/">' },
+			]
+		}, aboutHtmlUri);
 	});
-
 	test('Incomplete Path', () => {
 		testCompletionFor('<script src="/src/f|">', {
 			items: [
@@ -192,6 +200,7 @@ suite('HTML Path Completion', () => {
 	});
 
 	test('No leading dot or slash', () => {
+		// document: index.html
 		testCompletionFor('<script src="s|">', {
 			items: [
 				{ label: 'about/', resultText: '<script src="about/">' },
@@ -213,9 +222,31 @@ suite('HTML Path Completion', () => {
 				{ label: 'test.js', resultText: '<script src="src/test.js">' },
 			]
 		}, indexHtmlUri, [fixtureWorkspace]);
+
+		// document: about.html
+		testCompletionFor('<script src="s|">', {
+			items: [
+				{ label: 'about.css', resultText: '<script src="about.css">' },
+				{ label: 'about.html', resultText: '<script src="about.html">' },
+				{ label: 'media/', resultText: '<script src="media/">' },
+			]
+		}, aboutHtmlUri, [fixtureWorkspace]);
+
+		testCompletionFor('<script src="media/|">', {
+			items: [
+				{ label: 'icon.pic', resultText: '<script src="media/icon.pic">' }
+			]
+		}, aboutHtmlUri, [fixtureWorkspace]);
+
+		testCompletionFor('<script src="media/f|">', {
+			items: [
+				{ label: 'icon.pic', resultText: '<script src="media/icon.pic">' }
+			]
+		}, aboutHtmlUri, [fixtureWorkspace]);
 	});
 
 	test('Trigger completion in middle of path', () => {
+		// document: index.html
 		testCompletionFor('<script src="src/f|eature.js">', {
 			items: [
 				{ label: 'feature.js', resultText: '<script src="src/feature.js">' },
@@ -230,8 +261,24 @@ suite('HTML Path Completion', () => {
 				{ label: 'src/', resultText: '<script src="src/">' },
 			]
 		}, indexHtmlUri, [fixtureWorkspace]);
+
+		// document: about.html
+		testCompletionFor('<script src="media/f|eature.js">', {
+			items: [
+				{ label: 'icon.pic', resultText: '<script src="media/icon.pic">' }
+			]
+		}, aboutHtmlUri, [fixtureWorkspace]);
+
+		testCompletionFor('<script src="m|edia/feature.js">', {
+			items: [
+				{ label: 'about.css', resultText: '<script src="about.css">' },
+				{ label: 'about.html', resultText: '<script src="about.html">' },
+				{ label: 'media/', resultText: '<script src="media/">' },
+			]
+		}, aboutHtmlUri, [fixtureWorkspace]);
 	});
 
+
 	test('Trigger completion in middle of path and with whitespaces', () => {
 		testCompletionFor('<script src="./| about/about.html>', {
 			items: [

extensions/html-language-features/server/src/test/pathCompletionFixtures/about/media/icon.pic

+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
\ No newline at end of file