force alpha to 1 when using background color as inverted foreground color

[ivanwonder]

This problem has been described there #1898.

Fixes #1898

[Tyriar]

Made a bunch of changes to do the same in webgl and cover extra cases for canvas and non-black backgrounds. Wasn't as straightforward as I was thinking.

[Eugeny]

Works with the canvas renderer, but not WebGL. I've poked around a bit but could find why right away

[Tyriar]

@Eugeny do you mean transparency in general or this specific issue (\x1b[7m█\x1b[0m should be #ff0000 when the background color is #ff000080 and allowTransparency is true?

[Eugeny]

I meant #1898

[Tyriar]

@Eugeny is my test case correct? That was working on all 3 renderers when I tested.

[Eugeny]

With a white-on-transparent theme,

Canvas:

WebGL:

[Tyriar]

@Eugeny what's the background set to exactly?

[Eugeny]

Literally "transparent" (as in CSS color)

[Tyriar]

@Eugeny oh, that's the problem. I was assuming you were using #rgba or #rrggbbaa, it should work if you change that to #00000000. I hadn't even considered using transparent here, that's also why you don't get the scrollbar problem in #2252 (comment)

[Tyriar]

@Eugeny what's your proposal to fix that? It feels like that's sort of undefined behavior and we shouldn't allow using transparent for this reason, using 0 for the alpha channel instead lets you specify the opaque inverted version.

[Eugeny]

What do you use to convert named colors to RGBA? transparent should be equivalent to rgba(0, 0, 0, 0) per CSS spec

[Tyriar]

@Eugeny 👍 opening issue again to add this case:

xterm.js/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

Lines 231 to 236 in 8b5c48f

	const bg = this._config.colors.background.css;
	if (bg.length === 9) {
	// Remove bg alpha channel if present
	return bg.substr(0, 7);
	}
	return bg;

[ivanwonder]

@Tyriar Because of the transparent, so I remove the bg alpha channel by using the RGBA value and then convert it to CSS string.
https://github.com/ivanwonder/xterm.js/blob/1ff1809ab75be9a9aeee134e6dd5c040f68efda0/src/browser/Color.ts#L59

[Tyriar]

@ivanwonder the fix I did for webgl didn't cover when background=transparent though, I'll fix that before we do a release.

[ivanwonder]

@Tyriar https://html.spec.whatwg.org/multipage/canvas.html#serialisation-of-a-color
context.fillStyle will convert transparent to rgba(0, 0, 0, 0).
if it has alpha equal to 1.0, then the string is a lowercase six-digit hex value, prefixed with a "#" character, Otherwise, the color value has alpha less than 1.0, and the string is the color value in the CSS rgba()
maybe it will help

[Tyriar]

@ivanwonder thanks, good info

[ivanwonder]

I just try the idea that using context.fillStyle. Looks work fine.
https://github.com/ivanwonder/xterm.js/tree/reverse-transparency