diff --git a/demo/client.ts b/demo/client.ts index 7ade385e..06949a8a 100644 --- a/demo/client.ts +++ b/demo/client.ts @@ -125,6 +125,7 @@ const xtermjsTheme = { foreground: '#F8F8F8', background: '#2D2E2C', selectionBackground: '#5DA5D533', + selectionInactiveBackground: '#555555AA', black: '#1E1E1D', brightBlack: '#262625', red: '#CE5C5C', diff --git a/demo/index.html b/demo/index.html index 6d9be706..7d7329a7 100644 --- a/demo/index.html +++ b/demo/index.html @@ -104,7 +104,7 @@
Weblinks Addon
- +
Image Test
diff --git a/src/browser/renderer/dom/DomRenderer.ts b/src/browser/renderer/dom/DomRenderer.ts index 7413776c..98213e08 100644 --- a/src/browser/renderer/dom/DomRenderer.ts +++ b/src/browser/renderer/dom/DomRenderer.ts @@ -299,6 +299,7 @@ export class DomRenderer extends Disposable implements IRenderer { public handleBlur(): void { this._rowContainer.classList.remove(FOCUS_CLASS); + this.renderRows(0, this._bufferService.rows - 1); } public handleFocus(): void { diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts index 8a7eabf4..a2e79286 100644 --- a/test/playwright/SharedRendererTests.ts +++ b/test/playwright/SharedRendererTests.ts @@ -961,6 +961,32 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void }); }); + (ctx.skipCanvasExceptions ? test.describe.skip : test.describe)('selectionInactiveBackground', async () => { + test('should render the the inactive selection when not focused', async () => { + const theme: ITheme = { + selectionBackground: '#FF000080', + selectionInactiveBackground: '#0000FF80' + }; + await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`); + await ctx.value.proxy.focus(); + // Check both the cursor line and another line + await ctx.value.proxy.writeln('_ '); + await ctx.value.proxy.write('_ '); + await ctx.value.page.evaluate(`window.term.selectAll()`); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [128, 0, 0, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [128, 0, 0, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 2), [128, 0, 0, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 2), [128, 0, 0, 255]); + await ctx.value.page.evaluate(`document.activeElement.blur()`); + frameDetails = undefined; + // Selection only cell needs to be first to ensure renderer has kicked in + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 128, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [0, 0, 128, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 2), [0, 0, 128, 255]); + await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 2), [0, 0, 128, 255]); + }); + }); + test.describe('allowTransparency', async () => { test.beforeEach(() => ctx.value.page.evaluate(`term.options.allowTransparency = true`)); diff --git a/test/playwright/TestUtils.ts b/test/playwright/TestUtils.ts index 6bf3eb8f..02a08907 100644 --- a/test/playwright/TestUtils.ts +++ b/test/playwright/TestUtils.ts @@ -400,8 +400,8 @@ export async function pollFor(page: playwright.Page, evalOrFn: string | (() = deepStrictEqual(result, val, ([ `pollFor max duration exceeded.`, (`Last comparison: ` + - `${typeof result === 'object' ? JSON.stringify(result) : result} !== ` + - `${typeof val === 'object' ? JSON.stringify(val) : val}`), + `${typeof result === 'object' ? JSON.stringify(result) : result} (actual) !== ` + + `${typeof val === 'object' ? JSON.stringify(val) : val} (expected)`), `Stack: ${stack}` ].join('\n'))); }