waveterm/xterm.js
0
0
Fork 0
mirror of https://github.com/wavetermdev/xterm.js.git synced 2026-08-05 13:43:48 -07:00
Code Issues Packages Projects Releases Wiki Activity

First working dom renderer api tests

Browse Source 
Part of #4767
This commit is contained in:
Daniel Imms
2023-09-08 07:47:14 -07:00
parent 66a6ecea14
commit ea45b04105
1 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/playwright/Renderer.test.ts
+43 -35
View File
@@ -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<void> {
// 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<number[]> {
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];
}