From 87e6b6d47107c44214368a9e193b6c9f11c4f980 Mon Sep 17 00:00:00 2001
From: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 14 May 2024 16:25:06 +0000
Subject: [PATCH] cherry-pick(#30800): Revert "fix(highlight): highlight Top
 Layer elements (#30001)"

---
 .../src/server/injected/highlight.ts          | 11 -------
 tests/page/page-screenshot.spec.ts            | 30 -------------------
 2 files changed, 41 deletions(-)

diff --git a/packages/playwright-core/src/server/injected/highlight.ts b/packages/playwright-core/src/server/injected/highlight.ts
index b9fdc8fa3f5c7..dfc298cb24b42 100644
--- a/packages/playwright-core/src/server/injected/highlight.ts
+++ b/packages/playwright-core/src/server/injected/highlight.ts
@@ -55,7 +55,6 @@ export class Highlight {
     const document = injectedScript.document;
     this._isUnderTest = injectedScript.isUnderTest;
     this._glassPaneElement = document.createElement('x-pw-glass');
-    this._glassPaneElement.popover = 'manual';
     this._glassPaneElement.style.position = 'fixed';
     this._glassPaneElement.style.top = '0';
     this._glassPaneElement.style.right = '0';
@@ -65,12 +64,6 @@ 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';
-    this._glassPaneElement.style.padding = '0';
-    this._glassPaneElement.style.margin = '0';
-    this._glassPaneElement.style.border = 'none';
-    this._glassPaneElement.style.overflow = 'hidden';
     for (const eventName of ['click', 'auxclick', 'dragstart', 'input', 'keydown', 'keyup', 'pointerdown', 'pointerup', 'mousedown', 'mouseup', 'mouseleave', 'focus', 'scroll']) {
       this._glassPaneElement.addEventListener(eventName, e => {
         e.stopPropagation();
@@ -98,8 +91,6 @@ export class Highlight {
 
   install() {
     this._injectedScript.document.documentElement.appendChild(this._glassPaneElement);
-    // Popover is not supported in WebKit-macOS < 14.0
-    this._glassPaneElement.showPopover?.();
   }
 
   setLanguage(language: Language) {
@@ -116,8 +107,6 @@ export class Highlight {
   uninstall() {
     if (this._rafRequest)
       cancelAnimationFrame(this._rafRequest);
-    // Popover is not supported in WebKit-macOS < 14.0
-    this._glassPaneElement.hidePopover?.();
     this._glassPaneElement.remove();
   }
 
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index fe55a21b813d2..278dd382284ed 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -482,36 +482,6 @@ it.describe('page screenshot', () => {
       })).toMatchSnapshot('should-mask-inside-iframe.png');
     });
 
-    it('should mask inside <dialog />', async ({ page, server, browserName, isElectron }) => {
-      it.info().annotations.push({ type: 'issue', description: 'https://github.com/microsoft/playwright/issues/29878' });
-      it.skip(browserName === 'webkit' && process.platform === 'darwin' && parseInt(os.release().split('.')[0], 10) < 23, 'SDKAlignedBehavior::PopoverAttributeEnabled is only enabled in macOS 14.0+');
-      it.fixme(isElectron, 'Requires a more recent Electron version');
-
-      await page.setViewportSize({ width: 500, height: 500 });
-      await page.goto(server.PREFIX + '/grid.html');
-      await page.evaluate(() => {
-        const elements = document.body.innerHTML;
-        document.body.innerHTML = '';
-        // Move all the elements of the body (grid elements) into a <dialog /> which lives on the Top-Layer.
-        const dialog = document.createElement('dialog');
-        dialog.style.padding = '0';
-        dialog.style.margin = '0';
-        dialog.style.border = 'none';
-        dialog.style.maxWidth = 'inherit';
-        dialog.style.maxHeight = 'inherit';
-        dialog.style.outline = 'none';
-        document.body.appendChild(dialog);
-        dialog.innerHTML = elements;
-        dialog.showModal();
-      });
-      expect(await page.screenshot({
-        mask: [
-          page.locator('div').nth(5),
-          page.frameLocator('#frame1').locator('div').nth(12),
-        ],
-      })).toMatchSnapshot('should-mask-inside-iframe.png');
-    });
-
     it('should mask in parallel', async ({ page, server }) => {
       await page.setViewportSize({ width: 500, height: 500 });
       await attachFrame(page, 'frame1', server.PREFIX + '/grid.html');