2020-08-03 23:41:48 +03:00
|
|
|
/**
|
|
|
|
* Copyright 2018 Google Inc. All rights reserved.
|
|
|
|
* Modifications copyright (c) Microsoft Corporation.
|
|
|
|
*
|
|
|
|
* Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
* you may not use this file except in compliance with the License.
|
|
|
|
* You may obtain a copy of the License at
|
|
|
|
*
|
|
|
|
* http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
*
|
|
|
|
* Unless required by applicable law or agreed to in writing, software
|
|
|
|
* distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
* See the License for the specific language governing permissions and
|
|
|
|
* limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2021-05-06 17:08:22 +03:00
|
|
|
import { test as it, expect } from './pageTest';
|
2021-04-05 05:32:14 +03:00
|
|
|
|
2021-04-30 23:26:13 +03:00
|
|
|
it.skip(({ isAndroid }) => isAndroid);
|
2020-08-03 23:41:48 +03:00
|
|
|
|
2022-03-10 21:42:52 +03:00
|
|
|
it('should emulate type @smoke', async ({ page }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
|
|
await page.emulateMedia({ media: 'print' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
|
|
|
|
await page.emulateMedia({});
|
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(true);
|
|
|
|
await page.emulateMedia({ media: null });
|
|
|
|
expect(await page.evaluate(() => matchMedia('screen').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('print').matches)).toBe(false);
|
|
|
|
});
|
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should throw in case of bad media argument', async ({ page }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
let error = null;
|
2020-09-09 13:06:52 +03:00
|
|
|
// @ts-expect-error 'bad' is not a valid media type
|
2021-09-27 19:58:08 +03:00
|
|
|
await page.emulateMedia({ media: 'bad' }).catch(e => error = e);
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(error.message).toContain('media: expected one of (screen|print|null)');
|
|
|
|
});
|
|
|
|
|
2022-03-10 21:42:52 +03:00
|
|
|
it('should emulate colorScheme should work @smoke', async ({ page }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
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: dark)').matches)).toBe(false);
|
|
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);
|
|
|
|
});
|
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should default to light', async ({ page }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
|
|
|
|
|
|
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);
|
|
|
|
|
|
|
|
await page.emulateMedia({ colorScheme: null });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);
|
|
|
|
});
|
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should throw in case of bad colorScheme argument', async ({ page }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
let error = null;
|
2020-09-09 13:06:52 +03:00
|
|
|
// @ts-expect-error 'bad' is not a valid media type
|
|
|
|
await page.emulateMedia({ colorScheme: 'bad' }).catch(e => error = e);
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(error.message).toContain('colorScheme: expected one of (dark|light|no-preference|null)');
|
|
|
|
});
|
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should work during navigation', async ({ page, server }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
|
|
|
const navigated = page.goto(server.EMPTY_PAGE);
|
|
|
|
for (let i = 0; i < 9; i++) {
|
|
|
|
await Promise.all([
|
2020-08-12 01:50:53 +03:00
|
|
|
page.emulateMedia({ colorScheme: (['dark', 'light'] as const)[i & 1] }),
|
2020-08-03 23:41:48 +03:00
|
|
|
new Promise(f => setTimeout(f, 1)),
|
|
|
|
]);
|
|
|
|
}
|
|
|
|
await navigated;
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);
|
|
|
|
});
|
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should change the actual colors in css', async ({ page }) => {
|
2020-08-03 23:41:48 +03:00
|
|
|
await page.setContent(`
|
|
|
|
<style>
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
|
|
div {
|
|
|
|
background: black;
|
|
|
|
color: white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
|
|
div {
|
|
|
|
background: white;
|
|
|
|
color: black;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
<div>Hello</div>
|
|
|
|
`);
|
|
|
|
function getBackgroundColor() {
|
|
|
|
return page.$eval('div', div => window.getComputedStyle(div).backgroundColor);
|
|
|
|
}
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(await getBackgroundColor()).toBe('rgb(255, 255, 255)');
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'dark' });
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(await getBackgroundColor()).toBe('rgb(0, 0, 0)');
|
|
|
|
|
2020-08-28 14:20:29 +03:00
|
|
|
await page.emulateMedia({ colorScheme: 'light' });
|
2020-08-03 23:41:48 +03:00
|
|
|
expect(await getBackgroundColor()).toBe('rgb(255, 255, 255)');
|
2020-08-28 14:20:29 +03:00
|
|
|
});
|
2021-05-22 02:56:09 +03:00
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should emulate reduced motion', async ({ page }) => {
|
2021-05-22 02:56:09 +03:00
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(true);
|
|
|
|
await page.emulateMedia({ reducedMotion: 'reduce' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(true);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(false);
|
|
|
|
await page.emulateMedia({ reducedMotion: 'no-preference' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(true);
|
|
|
|
await page.emulateMedia({ reducedMotion: null });
|
|
|
|
});
|
2021-09-03 22:48:06 +03:00
|
|
|
|
2021-09-27 19:58:08 +03:00
|
|
|
it('should emulate forcedColors ', async ({ page, browserName, isElectron }) => {
|
2021-09-03 22:48:06 +03:00
|
|
|
it.skip(browserName === 'webkit', 'https://bugs.webkit.org/show_bug.cgi?id=225281');
|
2021-09-06 14:36:10 +03:00
|
|
|
it.fixme(isElectron);
|
2021-09-03 22:48:06 +03:00
|
|
|
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);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(forced-colors: active)').matches)).toBe(false);
|
|
|
|
await page.emulateMedia({ forcedColors: 'active' });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(forced-colors: none)').matches)).toBe(false);
|
|
|
|
expect(await page.evaluate(() => matchMedia('(forced-colors: active)').matches)).toBe(true);
|
|
|
|
await page.emulateMedia({ forcedColors: null });
|
|
|
|
expect(await page.evaluate(() => matchMedia('(forced-colors: none)').matches)).toBe(true);
|
|
|
|
});
|