diff --git a/test/playwright/Renderer.test.ts b/test/playwright/Renderer.test.ts index 90cca908..0721b678 100644 --- a/test/playwright/Renderer.test.ts +++ b/test/playwright/Renderer.test.ts @@ -4,7 +4,7 @@ */ import { decodePng } from '@lunapaint/png-codec'; -import { test } from '@playwright/test'; +import { LocatorScreenshotOptions, test } from '@playwright/test'; import { ITheme } from 'xterm'; import { createTestContext, ITestContext, openTerminal, pollFor } from './TestUtils'; @@ -15,16 +15,10 @@ test.beforeAll(async ({ browser }) => { }); test.afterAll(async () => await ctx.page.close()); -test.describe('WebGL Renderer Integration Tests', async () => { - // itWebgl('dispose removes renderer canvases', async function(): Promise { - // await setupBrowser(); - // assert.equal(await page.evaluate(`document.querySelectorAll('.xterm canvas').length`), 2); - // await page.evaluate(`addon.dispose()`); - // assert.equal(await page.evaluate(`document.querySelectorAll('.xterm canvas').length`), 0); - // await browser.close(); - // }); +test.describe.only('WebGL Renderer Integration Tests', async () => { + test.beforeEach(() => ctx.proxy.reset()); - test.describe.only('colors', () => { + test.describe('colors', () => { test('foreground 0-15', async () => { const theme: ITheme = { black: '#010203', @@ -48,35 +42,49 @@ test.describe('WebGL Renderer Integration Tests', async () => { await pollFor(ctx.page, () => getCellColor(8, 1), [22, 23, 24, 255]); }); }); + + test('foreground 0-7 drawBoldTextInBrightColors', async () => { + const theme: ITheme = { + brightBlack: '#010203', + brightRed: '#040506', + brightGreen: '#070809', + brightYellow: '#0a0b0c', + brightBlue: '#0d0e0f', + brightMagenta: '#101112', + brightCyan: '#131415', + brightWhite: '#161718' + }; + await ctx.page.evaluate(` + window.term.options.theme = ${JSON.stringify(theme)}; + window.term.options.drawBoldTextInBrightColors = true; + `); + await ctx.proxy.write(`\x1b[1;30m█\x1b[1;31m█\x1b[1;32m█\x1b[1;33m█\x1b[1;34m█\x1b[1;35m█\x1b[1;36m█\x1b[1;37m█`); + await pollFor(ctx.page, () => getCellColor(1, 1), [1, 2, 3, 255]); + await pollFor(ctx.page, () => getCellColor(2, 1), [4, 5, 6, 255]); + await pollFor(ctx.page, () => getCellColor(3, 1), [7, 8, 9, 255]); + await pollFor(ctx.page, () => getCellColor(4, 1), [10, 11, 12, 255]); + await pollFor(ctx.page, () => getCellColor(5, 1), [13, 14, 15, 255]); + await pollFor(ctx.page, () => getCellColor(6, 1), [16, 17, 18, 255]); + await pollFor(ctx.page, () => getCellColor(7, 1), [19, 20, 21, 255]); + await pollFor(ctx.page, () => getCellColor(8, 1), [22, 23, 24, 255]); + }); }); -async function getCellColor(col: number, row: number): Promise { - const buffer = await ctx.page.locator('#terminal-container .xterm-rows').screenshot({ path: 'ss.png' }); +/** + * Gets the color of the pixel in the center of a cell. + * @param col The 1-based column index to get the color for. + * @param row The 1-based row index to get the color for. + */ +async function getCellColor(col: number, row: number): Promise<[red: number, green: number, blue: number, alpha: number]> { + const screenshotOptions: LocatorScreenshotOptions | undefined = process.env.DEBUG ? { path: 'out-test/playwright/screenshot.png' } : undefined; + const buffer = await ctx.page.locator('#terminal-container .xterm-rows').screenshot(screenshotOptions); const decoded = (await decodePng(buffer)).image; const cellSize = { width: decoded.width / await ctx.proxy.cols, - height: decoded.height / await ctx.proxy.rows, + height: decoded.height / await ctx.proxy.rows }; - console.log('buffer', buffer); - console.log('decoded', decoded); - console.log('cellSize', cellSize); - const x = 1; //Math.floor((col - 1) + 0.5 * cellSize.width); - const y = 1; //Math.floor((row - 1) + 0.5 * cellSize.height); - const i = y * decoded.width + x; - console.log({ x, y, i }); - console.log('result', Array.from(decoded.data.slice(i, i + 4))); - return Array.from(decoded.data.slice(i, i + 4)); - - await ctx.page.evaluate(` - window.gl = window.term._core._renderService._renderer.value._gl; - window.result = new Uint8Array(4); - window.d = window.term._core._renderService.dimensions; - window.gl.readPixels( - Math.floor((${col - 0.5}) * window.d.device.cell.width), - Math.floor(window.gl.drawingBufferHeight - 1 - (${row - 0.5}) * window.d.device.cell.height), - 1, 1, window.gl.RGBA, window.gl.UNSIGNED_BYTE, window.result - ); - `); - // await page.locator('.header').screenshot({ path: 'screenshot.png' }); - return await ctx.page.evaluate(`Array.from(window.result)`); + const x = Math.floor((col - 1/* 1- to 0-based index */ + 0.5/* middle of cell */) * cellSize.width); + const y = Math.floor((row - 1/* 1- to 0-based index */ + 0.5/* middle of cell */) * cellSize.height); + const i = (y * decoded.width + x) * 4/* 4 channels per pixel */; + return Array.from(decoded.data.slice(i, i + 4)) as [number, number, number, number]; }