fix(snapshot): mask outside of viewport

packages/playwright-core/src/server/injected/highlight.ts

@@ -65,8 +65,12 @@ export class Highlight {
     this._glassPaneElement.style.pointerEvents = 'none';
     this._glassPaneElement.style.display = 'flex';
     this._glassPaneElement.style.backgroundColor = 'transparent';
-    this._glassPaneElement.style.width = 'inherit';
-    this._glassPaneElement.style.height = 'inherit';
+    const updateGlassPaneDimensions = () => {
+      this._glassPaneElement.style.width = document.documentElement.scrollWidth + 'px';
+      this._glassPaneElement.style.height = document.documentElement.scrollHeight + 'px';
+    };
+    document.addEventListener('resize', updateGlassPaneDimensions);
+    updateGlassPaneDimensions();
     this._glassPaneElement.style.padding = '0';
     this._glassPaneElement.style.margin = '0';
     this._glassPaneElement.style.border = 'none';

tests/page/page-screenshot.spec.ts

@@ -221,6 +221,17 @@ it.describe('page screenshot', () => {
     expect(screenshot).toMatchSnapshot('screenshot-grid-fullpage.png');
   });
 
+  it('should take fullPage screenshots and mask elements outside of it', async ({ page, server }) => {
+    it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/30770' });
+    await page.setViewportSize({ width: 500, height: 500 });
+    await page.goto(server.PREFIX + '/grid.html');
+    const screenshot = await page.screenshot({
+      fullPage: true,
+      mask: [page.locator('.box').nth(144)],
+    });
+    expect(screenshot).toMatchSnapshot('screenshot-grid-fullpage-mask-outside-viewport.png');
+  });
+
   it('should restore viewport after fullPage screenshot', async ({ page, server }) => {
     await page.setViewportSize({ width: 500, height: 500 });
     await page.goto(server.PREFIX + '/grid.html');