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

[maria-gourevitch]

🚀 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.

[Skn0tt]

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]

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.