Skip to content

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

Open
aydinomer00 wants to merge 1 commit into
microsoft:mainfrom
aydinomer00:fix-41504
Open

fix(highlight): prevent page ::backdrop styles from tinting screenshots#41505
aydinomer00 wants to merge 1 commit into
microsoft:mainfrom
aydinomer00:fix-41504

Conversation

@aydinomer00

Copy link
Copy Markdown
Contributor

Summary

  • The highlight glass pane uses the popover API (top layer), which renders a ::backdrop pseudo-element styled by page stylesheets. Page rules targeting ::backdrop leaked onto it and tinted screenshots, including masked screenshots (regression since 1.59).
  • Neutralized the glass pane ::backdrop from a document-level stylesheet.

Fixes #41504

The glass pane is promoted to the top layer via the popover API, which
renders a ::backdrop pseudo-element. That pseudo-element lives in the light
DOM and is styled by page stylesheets, so page rules targeting ::backdrop
bled onto it and tinted screenshots, including masked screenshots. Neutralize
the glass pane backdrop from a document-level stylesheet.

Fixes microsoft#41504
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: expect(locator).toHaveScreenshot({ mask: [locators] }) is affected by page backdrop styles

1 participant