Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature]: Add prefers-contrast support to page.emulateMedia . #34240

Closed
maria-gourevitch opened this issue Jan 7, 2025 · 3 comments · Fixed by #34494
Closed

[Feature]: Add prefers-contrast support to page.emulateMedia . #34240

maria-gourevitch opened this issue Jan 7, 2025 · 3 comments · Fixed by #34494
Assignees
@Skn0tt
Labels
v1.51

Comments

@maria-gourevitch
Copy link

maria-gourevitch commented Jan 7, 2025 •
edited
Loading

🚀 Feature Request

Add prefers-contrast support to page.emulateMedia .

Example

test('High contrast theme has no regressions', ({page}) => {
  page.emulateMedia({prefersContrast: 'more'});
  await page.goto('https://staging.mysite.com');
  await expect(page).toHaveScreenshot();
});

test('Low contrast theme has no regressions', ({page}) => {
  page.emulateMedia({prefersContrast: 'less'});
  await page.goto('https://staging.mysite.com');
  await expect(page).toHaveScreenshot();
});

Motivation

Supporting prefers-contrast in page.emulateMedia would enable automated checking for regressions in high- and low- contrast themes. This is distinct from the already-supported (thank you!!!) forced-colors emulation: forced-colors ignores author-chosen colours in favour of colours specified by the user, while prefers-contrast allows the author to supply different CSS in response to a user-specified preference for high or low contrast.

Emulating prefers-contrast is already possible in Chromium by using CDPSession, but not in Webkit. Since MacOS/iOS/iPadOS only provides the end user a way to specify a contrast preference but not a colour scheme, and Playwright does not provide a way to emulate prefers-contrast in Webkit, site authors currently have no way of checking for regressions for users with different contrast preferences on desktop Safari, iPhone, or iPad.

Regressions in this area are unlikely to be caught incidentally, so they must be tested using time-consuming manual steps or missed. Adding prefers-contrast emulation would allow Playwright to save site maintainers even more time and catch even more errors before they make it to production and impact end users.
@maria-gourevitch maria-gourevitch changed the title [Feature]: [Feature]: Add prefers-contrast support to page.emulateMedia . Jan 7, 2025
@Skn0tt Skn0tt self-assigned this Jan 9, 2025
@Skn0tt Skn0tt added the v1.50 label Jan 9, 2025
@dgozman dgozman added v1.51 and removed v1.50 labels Jan 9, 2025
@Skn0tt
Copy link
Member

Skn0tt commented Jan 24, 2025 •
edited
Loading

Hi Maria! I'm working on adding support for this. Reading up on prefers-contrast, I found that all major operating systems have settings to enable a high contrast mode that set prefers-contrast: more and forced-colors: active, but I couldn't find a way of setting prefers-contrast: less. You mention you'd like to test for less - could you elaborate on your usecases there? Would it suffice if we only added prefers-contrast: more, and ignored less and custom?

@maria-gourevitch
Copy link
Author

Hi Simon! Thank you so much - I tried implementing this myself and got stuck on prefers-contrast: less in Webkit! TLDR: prefers-contrast: more only for 1.51 would be just fine.

It used to be possible to trigger prefers-contrast: less on iOS, but it's not anymore. Apparently, sometimes a forced-colors mode will also trigger prefers-contrast based on the kind of theme the user chooses, but that is probably a less common and less important use case. My main concern is about respecting contrast preference (and testing the resulting code!) on platforms where forced-colors is not available, and prefers-contrast: more is all that is practically available there.

@Skn0tt
Copy link
Member

Skn0tt commented Jan 27, 2025

Perfect, then I'll look at only prefers-contrast: more. I checked macOS again. The Accessibility > Display > Increase Contrast setting enables prefers-contrast: more, but forced-colors stays none. So I'm taking back my claim before that all major OSes set them in tandem.

@Skn0tt Skn0tt mentioned this issue Jan 27, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Skn0tt Skn0tt

Labels
v1.51
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: emulate prefers-contrast Skn0tt/playwright
3 participants
@dgozman @Skn0tt @maria-gourevitch