Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix: support hiding caret in case of matching style rule (#12172)

Browse source
This commit is contained in:
Andrey Lushnikov 2022-02-17 15:05:56 -07:00 committed by GitHub
parent 6ec00a9ae5
commit c98d595bea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
packages/playwright-core/src/server/screenshotter.ts
View file

@ -133,11 +133,9 @@ export class Screenshotter {
await frame.nonStallingEvaluateInExistingContext('(' + (function(disableAnimations: boolean) { await frame.nonStallingEvaluateInExistingContext('(' + (function(disableAnimations: boolean) {
const styleTag = document.createElement('style'); const styleTag = document.createElement('style');
styleTag.textContent = ` styleTag.textContent = `
*, *:not(#playwright-aaaaaaaaaa.playwright-bbbbbbbbbbb.playwright-cccccccccc.playwright-dddddddddd.playwright-eeeeeeeee) {
* > *, caret-color: transparent !important;
* > * > *, }
* > * > * > *,
* > * > * > * > * { caret-color: transparent !important; }
`; `;
document.documentElement.append(styleTag); document.documentElement.append(styleTag);
const infiniteAnimationsToResume: Set<Animation> = new Set(); const infiniteAnimationsToResume: Set<Animation> = new Set();

10
tests/page/page-screenshot.spec.ts
View file

@ -34,6 +34,16 @@ it.describe('page screenshot', () => {
it('should not capture blinking caret', async ({ page, server }) => { it('should not capture blinking caret', async ({ page, server }) => {
await page.setContent(` 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> <div contenteditable="true"></div>
`); `);
const div = page.locator('div'); const div = page.locator('div');