Emulating media queries and media features

It would be really handy to be able to force webdriver's browser context to emulate/mock particular media queries and media features. As far as I can see, there's no api for that in v7, and I don't see any discussion in github issues.

In particular, it would be super helpful to be able to control the matching of:

• @media (prefers-reduced-motion: reduce) { }
• @media (prefers-color-scheme: dark) { }
• @media print

But also many of the other, lesser known, media features could be really useful for test suites. (E.g. pixel density, device orientation, pointer, etc)

Being able to emulate these environmental properties would allow test suites to be able to test more widely, more deeply and more accurately. Ideally, this would control the matching behavior of css media queries, as well as the corresponding window.matchMedia javascript api.

Unless I've overlooked the api, I believe it means that it's up to the application and its test suite to agree on a signal/convention (such as a global function call, or a class in the HTML tag) to allow the tests. This workaround can be reasonably effective but has a bunch of drawbacks. (Let me know if you'd like me to get into this)

Puppeteer has emulateMediaType and emulateMediaFeatures functions that address this. Would it be possible to consider adding a similar API to Webdriver? Being able to do media emulation in all webdriver-supported browsers would be incredible.

Start by reviewing WebDriver's browser-context entry points and the referenced Puppeteer emulateMediaType and emulateMediaFeatures APIs. Define how media queries and media features such as reduced motion, color scheme, print, pixel density, orientation, and pointer should be controlled, including window.matchMedia; done means a proposed API works consistently across supported browsers.