Merge pull request #4778 from Tyriar/4759

Fix webgl/dom inverse MCR edge cases, add regression test
xtermjs · Sep 9, 2023 · c3fd1c2 · c3fd1c2
2 parents d238734 + fe4528c
commit c3fd1c2
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 2 deletions.
diff --git a/src/browser/renderer/dom/DomRendererRowFactory.ts b/src/browser/renderer/dom/DomRendererRowFactory.ts
@@ -419,7 +419,7 @@ export class DomRendererRowFactory {
  break;
  case Attributes.CM_DEFAULT:
  default:
- if (!this._applyMinimumContrast(charElement, resolvedBg, colors.foreground, cell, bgOverride, undefined)) {
+ if (!this._applyMinimumContrast(charElement, resolvedBg, colors.foreground, cell, bgOverride, fgOverride)) {
  if (isInverse) {
  classes.push(`xterm-fg-${INVERTED_DEFAULT_COLOR}`);
  }

diff --git a/src/browser/renderer/shared/TextureAtlas.ts b/src/browser/renderer/shared/TextureAtlas.ts
@@ -309,7 +309,7 @@ export class TextureAtlas implements ITextureAtlas {
  }
 
  private _getForegroundColor(bg: number, bgColorMode: number, bgColor: number, fg: number, fgColorMode: number, fgColor: number, inverse: boolean, dim: boolean, bold: boolean, excludeFromContrastRatioDemands: boolean): IColor {
- const minimumContrastColor = this._getMinimumContrastColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, false, bold, dim, excludeFromContrastRatioDemands);
+ const minimumContrastColor = this._getMinimumContrastColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, bold, dim, excludeFromContrastRatioDemands);
  if (minimumContrastColor) {
  return minimumContrastColor;
  }

diff --git a/test/playwright/SharedRendererTests.ts b/test/playwright/SharedRendererTests.ts
@@ -1102,6 +1102,41 @@ export function injectSharedRendererTests(ctx: ISharedRendererTestContext): void
  await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [0, 0, 0, 255]);
  await pollFor(ctx.value.page, () => getCellColor(ctx.value, 3, 1), [0, 0, 0, 255]);
  });
+ test('#4759: minimum contrast ratio should be respected on inverse text', async () => {
+ const theme: ITheme = {
+ foreground: '#aaaaaa',
+ background: '#333333'
+ };
+ await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`);
+ await ctx.value.proxy.write(`\x1b[7m■■`);
+ // Validate before minimumContrastRatio is applied
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [51, 51, 51, 255]);
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [51, 51, 51, 255]);
+ await ctx.value.page.evaluate(`window.term.options.minimumContrastRatio = 10;`);
+ frameDetails = undefined;
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 0, 255]);
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [0, 0, 0, 255]);
+ });
+ (ctx.skipCanvasExceptions ? test.skip : test)('#4759: minimum contrast ratio should be respected on selected inverse text', async () => {
+ const theme: ITheme = {
+ foreground: '#777777',
+ background: '#555555',
+ selectionBackground: '#666666' // Slightly more contrast needed for selection
+ };
+ await ctx.value.page.evaluate(`window.term.options.theme = ${JSON.stringify(theme)};`);
+ await ctx.value.proxy.write(`\x1b[7m■■`);
+ await ctx.value.proxy.selectAll();
+ // Validate before minimumContrastRatio is applied
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [85, 85, 85, 255]);
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [85, 85, 85, 255]);
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 3, 1), [102, 102, 102, 255]);
+ await ctx.value.page.evaluate(`window.term.options.minimumContrastRatio = 10;`);
+ await ctx.value.proxy.selectAll();
+ frameDetails = undefined;
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [255, 255, 255, 255]);
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 2, 1), [255, 255, 255, 255]);
+ await pollFor(ctx.value.page, () => getCellColor(ctx.value, 3, 1), [102, 102, 102, 255]);
+ });
  });
 }