fix(highlight): prevent page ::backdrop styles from tinting screenshots

packages/injected/src/highlight.ts

@@ -109,6 +109,22 @@ export class Highlight {
     this._glassPaneShadow.appendChild(this._actionCursorElement);
     this._glassPaneShadow.appendChild(this._titleElement);
     this._glassPaneShadow.appendChild(this._userOverlayContainer);
+    // The glass pane is promoted to the top layer via the popover API, which renders a
+    // ::backdrop pseudo-element. Its ::backdrop lives in the light DOM and is therefore
+    // styled by page stylesheets, so page rules targeting ::backdrop would bleed onto it
+    // and tint screenshots (including masked screenshots). Neutralize it from a
+    // document-level stylesheet, since the shadow stylesheet cannot reach the host ::backdrop.
+    // https://github.com/microsoft/playwright/issues/41504
+    const backdropCSS = 'x-pw-glass::backdrop { background: transparent !important; }';
+    if (typeof document.adoptedStyleSheets.push === 'function') {
+      const backdropSheet = new this._injectedScript.window.CSSStyleSheet();
+      backdropSheet.replaceSync(backdropCSS);
+      document.adoptedStyleSheets.push(backdropSheet);
+    } else {
+      const backdropStyleElement = document.createElement('style');
+      backdropStyleElement.textContent = backdropCSS;
+      document.documentElement?.appendChild(backdropStyleElement);
+    }
   }
 
   install() {

tests/page/page-screenshot.spec.ts

@@ -22,6 +22,7 @@ import type { Route } from 'playwright-core';
 import path from 'path';
 import fs from 'fs';
 import { comparePNGs } from '../config/comparator';
+import { PNG } from 'playwright-core/lib/utilsBundle';
 
 it.describe('page screenshot', () => {
   it.skip(({ browserName, headless }) => browserName === 'firefox' && !headless, 'Firefox headed produces a different image.');
@@ -574,6 +575,28 @@ it.describe('page screenshot', () => {
       })).toMatchSnapshot('mask-color-should-work.png');
     });
 
+    it('should not be affected by page ::backdrop styles', async ({ page }) => {
+      // Regression test for https://github.com/microsoft/playwright/issues/41504
+      await page.setViewportSize({ width: 200, height: 200 });
+      await page.setContent(`
+        <style>
+          html, body { margin: 0; padding: 0; }
+          body { background: rgb(255, 255, 255); }
+          ::backdrop { background: rgba(0, 0, 0, 0.5); }
+          #target { position: absolute; top: 100px; left: 100px; width: 50px; height: 50px; background: rgb(0, 0, 0); }
+        </style>
+        <div id="target"></div>
+      `);
+      const screenshot = await page.screenshot({ mask: [page.locator('#target')] });
+      const decoded = PNG.sync.read(screenshot);
+      // A pixel away from the mask must stay white. Before the fix, the page ::backdrop
+      // rule leaked onto the glass pane's top-layer backdrop and tinted the whole viewport.
+      const index = (10 * decoded.width + 10) * 4;
+      expect(decoded.data[index]).toBeGreaterThan(250);
+      expect(decoded.data[index + 1]).toBeGreaterThan(250);
+      expect(decoded.data[index + 2]).toBeGreaterThan(250);
+    });
+
     it('should hide elements based on attr', async ({ page, server }) => {
       await page.setViewportSize({ width: 500, height: 500 });
       await page.goto(server.PREFIX + '/grid.html');