Fix #79766

extensions/emmet/src/defaultCompletionProvider.ts

@@ -113,21 +113,23 @@ export class DefaultCompletionItemProvider implements vscode.CompletionItemProvi
 						const scanner = this.htmlLS.createScanner(document.getText(), node.start);
 						let tokenType = scanner.scan();
 						let prevAttr = undefined;
+						let styleAttrValueRange: [number, number] | undefined = undefined;
 						while (tokenType !== TokenType.EOS && (scanner.getTokenEnd() <= positionOffset)) {
 							tokenType = scanner.scan();
 							if (tokenType === TokenType.AttributeName) {
 								prevAttr = scanner.getTokenText();
 							}
+							else if (tokenType === TokenType.AttributeValue && prevAttr === 'style') {
+								styleAttrValueRange = [scanner.getTokenOffset(), scanner.getTokenEnd()];
+							}
 						}
-						if (prevAttr === 'style') {
+						if (prevAttr === 'style' && styleAttrValueRange && positionOffset > styleAttrValueRange[0] && positionOffset < styleAttrValueRange[1]) {
 							syntax = 'css';
 							validateLocation = false;
 						}
 					}
 				}
 			}
-
-
 		}
 
 		const extractAbbreviationResults = helper.extractAbbreviation(document, position, !isStyleSheet(syntax));

extensions/emmet/src/test/completion.test.ts

@@ -0,0 +1,80 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as assert from 'assert';
+import 'mocha';
+import { CancellationTokenSource, CompletionTriggerKind, Selection } from 'vscode';
+import { DefaultCompletionItemProvider } from '../defaultCompletionProvider';
+import { closeAllEditors, withRandomFileEditor } from './testUtils';
+
+const completionProvider = new DefaultCompletionItemProvider();
+
+suite('Tests for completion in CSS embedded in HTML', () => {
+	teardown(() => {
+		// close all editors
+		return closeAllEditors;
+	});
+
+	test('style attribute & attribute value in html', async () => {
+		await testHtmlCompletionProvider('<div style="|"', [{ label: 'padding: ;' }]);
+		await testHtmlCompletionProvider(`<div style='|'`, [{ label: 'padding: ;' }]);
+		await testHtmlCompletionProvider(`<div style='p|'`, [{ label: 'padding: ;' }]);
+		await testHtmlCompletionProvider(`<div style='color: #0|'`, [{ label: '#000000' }]);
+	});
+
+	// https://github.com/microsoft/vscode/issues/79766
+	test('#79766, correct region determination', async () => {
+		await testHtmlCompletionProvider(`<div style="color: #000">di|</div>`, [
+			{ label: 'div', documentation: `<div>|</div>` }
+		]);
+	});
+});
+
+interface TestCompletionItem {
+	label: string;
+
+	documentation?: string;
+}
+
+function testHtmlCompletionProvider(contents: string, expectedItems: TestCompletionItem[]): Thenable<any> {
+	const cursorPos = contents.indexOf('|');
+	const htmlContents = contents.slice(0, cursorPos) + contents.slice(cursorPos + 1);
+
+	return withRandomFileEditor(htmlContents, 'html', async (editor, _doc) => {
+		const selection = new Selection(editor.document.positionAt(cursorPos), editor.document.positionAt(cursorPos));
+		editor.selection = selection;
+		const cancelSrc = new CancellationTokenSource();
+		const completionPromise = completionProvider.provideCompletionItems(
+			editor.document,
+			editor.selection.active,
+			cancelSrc.token,
+			{ triggerKind: CompletionTriggerKind.Invoke }
+		);
+		if (!completionPromise) {
+			return Promise.resolve();
+		}
+
+		const completionList = await completionPromise;
+		if (!completionList || !completionList.items || !completionList.items.length) {
+			return Promise.resolve();
+		}
+
+		expectedItems.forEach(eItem => {
+			const matches = completionList.items.filter(i => i.label === eItem.label);
+			const match = matches && matches.length > 0 ? matches[0] : undefined;
+			assert.ok(match, `Didn't find completion item with label ${eItem.label}`);
+
+			if (match) {
+				assert.equal(match.detail, 'Emmet Abbreviation', `Match needs to come from Emmet`);
+
+				if (eItem.documentation) {
+					assert.equal(match.documentation, eItem.documentation, `Emmet completion Documentation doesn't match`);
+				}
+			}
+		});
+
+		return Promise.resolve();
+	});
+}