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.
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
feat(api): add page.emulateMedia{Type,Features} #5012
Conversation
22e861c
to
b9a3db1
Compare
b9a3db1
to
2d0264d
Compare
Added the old |
dfd6572
to
5ee8e84
Compare
5ee8e84
to
62e4265
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks! lgtm
2939ab0
to
cf791f4
Compare
|
await page.emulateMediaFeatures([{ name: 'prefers-reduced-motion', value: 'reduce' }]); | ||
await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)); | ||
// → true | ||
await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)); | ||
// → false | ||
|
||
await page.emulateMediaFeatures([{ name: 'prefers-reduced-motion', value: 'reduce' }]); | ||
await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)); | ||
// → true | ||
await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)); | ||
// → false |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It seems these blocks are duplicate.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@vsemozhetbyt Wanna submit a patch?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hope it's right: #5072
Note: this PR is just to illustrate what the API could look like. The goal is to get feedback and iterate on the approach.
CDP supports emulating CSS media features (e.g.
prefers-color-scheme
,prefers-reduced-motion
) in addition to media types (e.g.screen
,print
) as of Chromium v79.0.3929.0+.An open question is, how do we expose this functionality as a Puppeteer API? IMHO, there's two main options:
page.emulateMediaType(type)
), and one for media features:page.emulateMediaFeatures(features)
page.emulateMedia(typeOrFeatures)
This PR implements the first option, which feels cleanest to me. Note that in this WIP PR,
page.emulateMedia(mediaType)
has been renamed topage.emulateMediaType(type)
(a breaking change!) to make the distinction between the two APIs more clear. We could of course decide to keep the old API for the time being as an alias.Thoughts?
Ref. #4906.
Blocked on a Chromium roll to v79.0.3929.0 (r701361).