Fixes #40127: Render separate <span>s for before and after decorations in empty line case

src/vs/editor/browser/viewParts/lines/viewLine.ts

@@ -514,9 +514,16 @@ class RenderedViewLine implements IRenderedViewLine {
 				return 0;
 			}
 			if (this._containsForeignElements === ForeignElementType.Before) {
-				// We have foreign element before the (empty) line
+				// We have foreign elements before the (empty) line
 				return this.getWidth();
 			}
+			// We have foreign elements before & after the (empty) line
+			const readingTarget = this._getReadingTarget(domNode);
+			if (readingTarget.firstChild) {
+				return (<HTMLSpanElement>readingTarget.firstChild).offsetWidth;
+			} else {
+				return 0;
+			}
 		}
 
 		if (this._pixelOffsetCache !== null) {

src/vs/editor/common/viewLayout/viewLineRenderer.ts

@@ -318,21 +318,24 @@ export function renderViewLine(input: RenderLineInput, sb: IStringBuilder): Rend
 
 		if (input.lineDecorations.length > 0) {
 			// This line is empty, but it contains inline decorations
-			let classNames: string[] = [];
+			const beforeClassNames: string[] = [];
+			const afterClassNames: string[] = [];
 			for (let i = 0, len = input.lineDecorations.length; i < len; i++) {
 				const lineDecoration = input.lineDecorations[i];
 				if (lineDecoration.type === InlineDecorationType.Before) {
-					classNames.push(input.lineDecorations[i].className);
+					beforeClassNames.push(input.lineDecorations[i].className);
 					containsForeignElements |= ForeignElementType.Before;
 				}
 				if (lineDecoration.type === InlineDecorationType.After) {
-					classNames.push(input.lineDecorations[i].className);
+					afterClassNames.push(input.lineDecorations[i].className);
 					containsForeignElements |= ForeignElementType.After;
 				}
 			}
 
 			if (containsForeignElements !== ForeignElementType.None) {
-				content = `<span><span class="${classNames.join(' ')}"></span></span>`;
+				const beforeSpan = (beforeClassNames.length > 0 ? `<span class="${beforeClassNames.join(' ')}"></span>` : ``);
+				const afterSpan = (afterClassNames.length > 0 ? `<span class="${afterClassNames.join(' ')}"></span>` : ``);
+				content = `<span>${beforeSpan}${afterSpan}</span>`;
 			}
 		}
 

src/vs/editor/test/common/viewLayout/viewLineRenderer.test.ts

@@ -1385,7 +1385,7 @@ suite('viewLineRenderer.renderLine 2', () => {
 		assert.deepEqual(actual.html, expected);
 	});
 
-	test('issue #37401: Allow both before and after decorations on empty line', () => {
+	test('issue #37401 #40127: Allow both before and after decorations on empty line', () => {
 
 		let actual = renderViewLine(new RenderLineInput(
 			true,
@@ -1412,7 +1412,8 @@ suite('viewLineRenderer.renderLine 2', () => {
 
 		let expected = [
 			'<span>',
-			'<span class="before after"></span>',
+			'<span class="before"></span>',
+			'<span class="after"></span>',
 			'</span>'
 		].join('');