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')));
}