feat(webkit): support emulating color scheme (#247)

This commit is contained in:
Pavel Feldman 2019-12-13 17:34:02 -08:00 committed by Andrey Lushnikov
parent 9fa7e4f530
commit 0b5c0a76ab
2 changed files with 46 additions and 19 deletions

View File

@ -97,13 +97,13 @@ export class FrameManager extends EventEmitter implements PageDelegate {
promises.push(session.send('Dialog.enable')); promises.push(session.send('Dialog.enable'));
} }
if (this._page._state.userAgent !== null) if (this._page._state.userAgent !== null)
promises.push(session.send('Page.overrideUserAgent', { value: this._page._state.userAgent })); promises.push(this._setUserAgent(session, this._page._state.userAgent));
if (this._page._state.mediaType !== null) if (this._page._state.mediaType !== null || this._page._state.mediaColorScheme !== null)
promises.push(session.send('Page.setEmulatedMedia', { media: this._page._state.mediaType || '' })); promises.push(this._setEmulateMedia(session, this._page._state.mediaType, this._page._state.mediaColorScheme));
if (this._page._state.javascriptEnabled !== null) if (this._page._state.javascriptEnabled !== null)
promises.push(session.send('Emulation.setJavaScriptEnabled', { enabled: this._page._state.javascriptEnabled })); promises.push(this._setJavaScriptEnabled(session, this._page._state.javascriptEnabled));
if (this._page._state.bypassCSP !== null) if (this._page._state.bypassCSP !== null)
promises.push(session.send('Page.setBypassCSP', { enabled: this._page._state.bypassCSP })); promises.push(this._setBypassCSP(session, this._page._state.bypassCSP));
await Promise.all(promises); await Promise.all(promises);
} }
@ -401,16 +401,46 @@ export class FrameManager extends EventEmitter implements PageDelegate {
}); });
} }
private async _setUserAgent(session: TargetSession, userAgent: string): Promise<void> {
await session.send('Page.overrideUserAgent', { value: userAgent });
}
private async _setJavaScriptEnabled(session: TargetSession, enabled: boolean): Promise<void> {
await session.send('Emulation.setJavaScriptEnabled', { enabled });
}
private async _setBypassCSP(session: TargetSession, enabled: boolean): Promise<void> {
await session.send('Page.setBypassCSP', { enabled });
}
private async _setEmulateMedia(session: TargetSession, mediaType: input.MediaType | null, mediaColorScheme: input.MediaColorScheme | null): Promise<void> {
const promises = [];
promises.push(session.send('Page.setEmulatedMedia', { media: mediaType || '' }));
if (mediaColorScheme !== null) {
let appearance: any = '';
switch (mediaColorScheme) {
case 'light': appearance = 'Light'; break;
case 'dark': appearance = 'Dark'; break;
}
promises.push(session.send('Page.setForcedAppearance', { appearance }));
}
await Promise.all(promises);
}
async setUserAgent(userAgent: string): Promise<void> { async setUserAgent(userAgent: string): Promise<void> {
await this._session.send('Page.overrideUserAgent', { value: userAgent }); await this._setUserAgent(this._session, userAgent);
} }
async setJavaScriptEnabled(enabled: boolean): Promise<void> { async setJavaScriptEnabled(enabled: boolean): Promise<void> {
await this._session.send('Emulation.setJavaScriptEnabled', { enabled }); await this._setJavaScriptEnabled(this._session, enabled);
} }
async setBypassCSP(enabled: boolean): Promise<void> { async setBypassCSP(enabled: boolean): Promise<void> {
await this._session.send('Page.setBypassCSP', { enabled }); await this._setBypassCSP(this._session, enabled);
}
async setEmulateMedia(mediaType: input.MediaType | null, mediaColorScheme: input.MediaColorScheme | null): Promise<void> {
await this._setEmulateMedia(this._session, mediaType, mediaColorScheme);
} }
async setViewport(viewport: types.Viewport): Promise<void> { async setViewport(viewport: types.Viewport): Promise<void> {
@ -421,12 +451,6 @@ export class FrameManager extends EventEmitter implements PageDelegate {
await this._session.send('Emulation.setDeviceMetricsOverride', { width, height, deviceScaleFactor: viewport.deviceScaleFactor || 1 }); await this._session.send('Emulation.setDeviceMetricsOverride', { width, height, deviceScaleFactor: viewport.deviceScaleFactor || 1 });
} }
async setEmulateMedia(mediaType: input.MediaType | null, mediaColorScheme: input.MediaColorScheme | null): Promise<void> {
if (mediaColorScheme !== null)
throw new Error('Not implemented');
await this._session.send('Page.setEmulatedMedia', { media: mediaType || '' });
}
setCacheEnabled(enabled: boolean): Promise<void> { setCacheEnabled(enabled: boolean): Promise<void> {
return this._networkManager.setCacheEnabled(enabled); return this._networkManager.setCacheEnabled(enabled);
} }

View File

@ -118,7 +118,7 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
}); });
}); });
describe.skip(WEBKIT)('Page.emulateMedia colorScheme', function() { describe('Page.emulateMedia colorScheme', function() {
it('should work', async({page, server}) => { it('should work', async({page, server}) => {
await page.emulateMedia({ colorScheme: 'light' }); await page.emulateMedia({ colorScheme: 'light' });
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);
@ -128,10 +128,13 @@ module.exports.addTests = function({testRunner, expect, playwright, FFOX, CHROME
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);
await page.emulateMedia({ colorScheme: 'no-preference' }); if (!WEBKIT) {
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false); // WebKit will always provide the value.
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false); await page.emulateMedia({ colorScheme: 'no-preference' });
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(true);
}
}); });
it('should throw in case of bad argument', async({page, server}) => { it('should throw in case of bad argument', async({page, server}) => {
let error = null; let error = null;