chore: add webgl shadow dom test

Author: Loïc Mangeonjean

test/playwright/SharedRendererTests.ts

@@ -1280,10 +1280,10 @@ enum CellColorPosition {
  * treatment.
  */
 export function injectSharedRendererTestsStandalone(ctx: ISharedRendererTestContext, setupCb: () => Promise<void> | void): void {
-  test.describe('standalone tests', () => {
+  const run = (shadowDom: boolean): void => {
     test.beforeEach(async () => {
       // Recreate terminal
-      await openTerminal(ctx.value);
+      await openTerminal(ctx.value, {}, { useShadowDom: shadowDom });
       await ctx.value.page.evaluate(`
         window.term.options.minimumContrastRatio = 1;
         window.term.options.allowTransparency = false;
@@ -1308,6 +1308,13 @@ export function injectSharedRendererTestsStandalone(ctx: ISharedRendererTestCont
         await pollFor(ctx.value.page, () => getCellColor(ctx.value, 1, 1), [0, 0, 0, 255]);
       });
     });
+  };
+
+  test.describe('standalone tests', () => {
+    run(false);
+  });
+  test.describe('standalone tests (Shadow dom)', () => {
+    run(true);
   });
 }
 
@@ -1332,7 +1339,7 @@ function getCellColor(ctx: ITestContext, col: number, row: number, position: Cel
 let frameDetails: { cols: number, rows: number, decoded: IImage32 } | undefined = undefined;
 async function getFrameDetails(ctx: ITestContext): Promise<{ cols: number, rows: number, decoded: IImage32 }> {
   const screenshotOptions: LocatorScreenshotOptions | undefined = process.env.DEBUG ? { path: 'out-esbuild-test/playwright/screenshot.png' } : undefined;
-  const buffer = await ctx.page.locator('#terminal-container .xterm-screen').screenshot(screenshotOptions);
+  const buffer = await ctx.page.locator('#terminal-container').locator('.xterm-screen').screenshot(screenshotOptions);
   frameDetails = {
     cols: await ctx.proxy.cols,
     rows: await ctx.proxy.rows,

test/playwright/TestUtils.ts

@@ -412,7 +412,7 @@ class TerminalCoreProxy {
   }
 }
 
-export async function openTerminal(ctx: ITestContext, options: ITerminalOptions | ITerminalInitOnlyOptions = {}, testOptions: { loadUnicodeGraphemesAddon: boolean } = { loadUnicodeGraphemesAddon: true }): Promise<void> {
+export async function openTerminal(ctx: ITestContext, options: ITerminalOptions | ITerminalInitOnlyOptions = {}, { useShadowDom = false, loadUnicodeGraphemesAddon = true }: { loadUnicodeGraphemesAddon?: boolean, useShadowDom?: boolean } = { }): Promise<void> {
   await ctx.page.evaluate(`
   if ('term' in window) {
     try {
@@ -425,18 +425,46 @@ export async function openTerminal(ctx: ITestContext, options: ITerminalOptions
   strictEqual(await ctx.page.evaluate(`document.querySelector('#terminal-container').children.length`), 0, 'there must be no terminals on the page');
   await ctx.page.evaluate(`
     window.term = new window.Terminal(${JSON.stringify({ allowProposedApi: true, ...options })});
-    window.term.open(document.querySelector('#terminal-container'));
+    let element = document.querySelector('#terminal-container');
+
+    // Remove shadow root if it exists
+    const newElement = element.cloneNode(false);
+    element.replaceWith(newElement);
+    element = newElement
+
+    ${useShadowDom ? `
+    const shadowRoot = element.attachShadow({ mode: "open" });
+
+    // Copy parent styles to shadow DOM
+    const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+    styles.forEach((styleEl) => {
+      const clone = document.createElement('link');
+      clone.rel = 'stylesheet';
+      clone.href = styleEl.href;
+      shadowRoot.appendChild(clone);
+    });
+
+    // Create new element inside the shadow DOM
+    element = document.createElement('div');
+    element.style.width = '100%';
+    element.style.height = '100%';
+    shadowRoot.appendChild(element);
+    `: `
+    `}
+
+    window.term.open(element);
   `);
+
   // HACK: This is a soft layer breaker that's temporarily included until unicode graphemes have
   // more complete integration tests. See https://github.com/xtermjs/xterm.js/pull/4519#discussion_r1285234453
-  if (testOptions.loadUnicodeGraphemesAddon) {
+  if (loadUnicodeGraphemesAddon) {
     await ctx.page.evaluate(`
       window.unicode = new UnicodeGraphemesAddon();
       window.term.loadAddon(window.unicode);
       window.term.unicode.activeVersion = '15-graphemes';
     `);
   }
-  await ctx.page.waitForSelector('.xterm-rows');
+  await ctx.page.locator('.xterm-rows').waitFor();
   ctx.termHandle = await ctx.page.evaluateHandle('window.term');
   await ctx.proxy.initTerm();
 }