From c98d595beae51cc1c15835b10bec265acbfd9922 Mon Sep 17 00:00:00 2001
From: Andrey Lushnikov <lushnikov@chromium.org>
Date: Thu, 17 Feb 2022 15:05:56 -0700
Subject: [PATCH] fix: support hiding caret in case of matching style rule
 (#12172)

---
 packages/playwright-core/src/server/screenshotter.ts |  8 +++-----
 tests/page/page-screenshot.spec.ts                   | 10 ++++++++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/playwright-core/src/server/screenshotter.ts b/packages/playwright-core/src/server/screenshotter.ts
index 8a85a64109..6de70daa34 100644
--- a/packages/playwright-core/src/server/screenshotter.ts
+++ b/packages/playwright-core/src/server/screenshotter.ts
@@ -133,11 +133,9 @@ export class Screenshotter {
       await frame.nonStallingEvaluateInExistingContext('(' + (function(disableAnimations: boolean) {
         const styleTag = document.createElement('style');
         styleTag.textContent = `
-          *,
-          * > *,
-          * > * > *,
-          * > * > * > *,
-          * > * > * > * > * { caret-color: transparent !important; }
+          *:not(#playwright-aaaaaaaaaa.playwright-bbbbbbbbbbb.playwright-cccccccccc.playwright-dddddddddd.playwright-eeeeeeeee) {
+            caret-color: transparent !important;
+          }
         `;
         document.documentElement.append(styleTag);
         const infiniteAnimationsToResume: Set<Animation> = new Set();
diff --git a/tests/page/page-screenshot.spec.ts b/tests/page/page-screenshot.spec.ts
index e4b560a20b..7b84fe750c 100644
--- a/tests/page/page-screenshot.spec.ts
+++ b/tests/page/page-screenshot.spec.ts
@@ -34,6 +34,16 @@ it.describe('page screenshot', () => {
 
   it('should not capture blinking caret', async ({ page, server }) => {
     await page.setContent(`
+      <!-- Refer to stylesheet from other origin. Accessing this
+           stylesheet rules will throw.
+      -->
+      <link rel=stylesheet href="${server.CROSS_PROCESS_PREFIX + '/injectedstyle.css'}">
+      <!-- make life harder: define caret color in stylesheet -->
+      <style>
+        div {
+          caret-color: #000 !important;
+        }
+      </style>
       <div contenteditable="true"></div>
     `);
     const div = page.locator('div');