diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md index c54f6f9130..fbbec06a45 100644 --- a/docs/src/api/class-page.md +++ b/docs/src/api/class-page.md @@ -1188,10 +1188,6 @@ Emulates `'prefers-reduced-motion'` media feature, supported values are `'reduce Emulates `'forced-colors'` media feature, supported values are `'active'` and `'none'`. Passing `null` disables forced colors emulation. -:::note -It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. -::: - ### option: Page.emulateMedia.forcedColors * since: v1.15 * langs: csharp diff --git a/docs/src/api/params.md b/docs/src/api/params.md index f976220672..bfef4a3d05 100644 --- a/docs/src/api/params.md +++ b/docs/src/api/params.md @@ -534,10 +534,6 @@ to `'no-preference'`. Emulates `'forced-colors'` media feature, supported values are `'active'`, `'none'`. See [`method: Page.emulateMedia`] for more details. Defaults to `'none'`. -:::note -It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. -::: - ## context-option-logger * langs: js - `logger` <[Logger]> diff --git a/packages/playwright-core/src/server/webkit/wkPage.ts b/packages/playwright-core/src/server/webkit/wkPage.ts index 3aaa4d9d00..044d92c39c 100644 --- a/packages/playwright-core/src/server/webkit/wkPage.ts +++ b/packages/playwright-core/src/server/webkit/wkPage.ts @@ -194,8 +194,8 @@ export class WKPage implements PageDelegate { if (contextOptions.userAgent) promises.push(this.updateUserAgent()); const emulatedMedia = this._page.emulatedMedia(); - if (emulatedMedia.media || emulatedMedia.colorScheme || emulatedMedia.reducedMotion) - promises.push(WKPage._setEmulateMedia(session, emulatedMedia.media, emulatedMedia.colorScheme, emulatedMedia.reducedMotion)); + if (emulatedMedia.media || emulatedMedia.colorScheme || emulatedMedia.reducedMotion || emulatedMedia.forcedColors) + promises.push(WKPage._setEmulateMedia(session, emulatedMedia.media, emulatedMedia.colorScheme, emulatedMedia.reducedMotion, emulatedMedia.forcedColors)); for (const binding of this._page.allBindings()) promises.push(session.send('Runtime.addBinding', { name: binding.name })); const bootstrapScript = this._calculateBootstrapScript(); @@ -636,7 +636,7 @@ export class WKPage implements PageDelegate { await this._page._onFileChooserOpened(handle); } - private static async _setEmulateMedia(session: WKSession, mediaType: types.MediaType | null, colorScheme: types.ColorScheme | null, reducedMotion: types.ReducedMotion | null): Promise { + private static async _setEmulateMedia(session: WKSession, mediaType: types.MediaType | null, colorScheme: types.ColorScheme | null, reducedMotion: types.ReducedMotion | null, forcedColors: types.ForcedColors | null): Promise { const promises = []; promises.push(session.send('Page.setEmulatedMedia', { media: mediaType || '' })); let appearance: any = undefined; @@ -651,6 +651,12 @@ export class WKPage implements PageDelegate { case 'no-preference': reducedMotionWk = 'NoPreference'; break; } promises.push(session.send('Page.setForcedReducedMotion', { reducedMotion: reducedMotionWk })); + let forcedColorsWk: any = undefined; + switch (forcedColors) { + case 'active': forcedColorsWk = 'Active'; break; + case 'none': forcedColorsWk = 'None'; break; + } + promises.push(session.send('Page.setForcedColors', { forcedColors: forcedColorsWk })); await Promise.all(promises); } @@ -672,7 +678,8 @@ export class WKPage implements PageDelegate { const emulatedMedia = this._page.emulatedMedia(); const colorScheme = emulatedMedia.colorScheme; const reducedMotion = emulatedMedia.reducedMotion; - await this._forAllSessions(session => WKPage._setEmulateMedia(session, emulatedMedia.media, colorScheme, reducedMotion)); + const forcedColors = emulatedMedia.forcedColors; + await this._forAllSessions(session => WKPage._setEmulateMedia(session, emulatedMedia.media, colorScheme, reducedMotion, forcedColors)); } async updateEmulatedViewportSize(): Promise { diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index 3dd3062dbc..b7ece2c2f2 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -2249,8 +2249,6 @@ export interface Page { /** * Emulates `'forced-colors'` media feature, supported values are `'active'` and `'none'`. Passing `null` disables forced * colors emulation. - * - * > NOTE: It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. */ forcedColors?: null|"active"|"none"; @@ -10541,8 +10539,6 @@ export interface BrowserType { * Emulates `'forced-colors'` media feature, supported values are `'active'`, `'none'`. See * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. Defaults * to `'none'`. - * - * > NOTE: It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. */ forcedColors?: "active"|"none"; @@ -11802,8 +11798,6 @@ export interface AndroidDevice { * Emulates `'forced-colors'` media feature, supported values are `'active'`, `'none'`. See * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. Defaults * to `'none'`. - * - * > NOTE: It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. */ forcedColors?: "active"|"none"; @@ -13366,8 +13360,6 @@ export interface Browser extends EventEmitter { * Emulates `'forced-colors'` media feature, supported values are `'active'`, `'none'`. See * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. Defaults * to `'none'`. - * - * > NOTE: It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. */ forcedColors?: "active"|"none"; @@ -16015,8 +16007,6 @@ export interface BrowserContextOptions { * Emulates `'forced-colors'` media feature, supported values are `'active'`, `'none'`. See * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. Defaults * to `'none'`. - * - * > NOTE: It's not supported in WebKit, see [here](https://bugs.webkit.org/show_bug.cgi?id=225281) in their issue tracker. */ forcedColors?: "active"|"none"; diff --git a/tests/library/defaultbrowsercontext-2.spec.ts b/tests/library/defaultbrowsercontext-2.spec.ts index de8b2670a0..06fed51e38 100644 --- a/tests/library/defaultbrowsercontext-2.spec.ts +++ b/tests/library/defaultbrowsercontext-2.spec.ts @@ -46,7 +46,6 @@ it('should support reducedMotion option', async ({ launchPersistent }) => { }); it('should support forcedColors option', async ({ launchPersistent, browserName }) => { - it.skip(browserName === 'webkit', 'https://bugs.webkit.org/show_bug.cgi?id=225281'); const { page } = await launchPersistent({ forcedColors: 'active' }); expect(await page.evaluate(() => matchMedia('(forced-colors: active)').matches)).toBe(true); expect(await page.evaluate(() => matchMedia('(forced-colors: none)').matches)).toBe(false); diff --git a/tests/page/page-emulate-media.spec.ts b/tests/page/page-emulate-media.spec.ts index 3b31dfe9a8..1f8bcca841 100644 --- a/tests/page/page-emulate-media.spec.ts +++ b/tests/page/page-emulate-media.spec.ts @@ -125,7 +125,6 @@ it('should emulate reduced motion', async ({ page }) => { }); it('should emulate forcedColors ', async ({ page, browserName }) => { - it.skip(browserName === 'webkit', 'https://bugs.webkit.org/show_bug.cgi?id=225281'); expect(await page.evaluate(() => matchMedia('(forced-colors: none)').matches)).toBe(true); await page.emulateMedia({ forcedColors: 'none' }); expect(await page.evaluate(() => matchMedia('(forced-colors: none)').matches)).toBe(true);