Skip to content
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.

Sign up for GitHub

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

Jump to bottom

feat: added reduced motion media query emulation #6646

Merged
merged 5 commits into from
May 21, 2021
Merged

feat: added reduced motion media query emulation #6646

merged 5 commits into from
May 21, 2021

Conversation

mxschmitt
Copy link
Member

@mxschmitt mxschmitt commented May 18, 2021 •
edited
Loading

Fixes #3320

@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from d58d389 to 07916ce Compare May 20, 2021 06:21
@mxschmitt mxschmitt added the CQ1 label May 20, 2021
@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from 07916ce to 14b74a3 Compare May 20, 2021 08:24
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 20, 2021
@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from 14b74a3 to e11c511 Compare May 20, 2021 16:38
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 20, 2021
@mxschmitt mxschmitt requested a review from dgozman May 20, 2021 18:05
@mxschmitt mxschmitt marked this pull request as ready for review May 20, 2021 18:05
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 20, 2021
dgozman
dgozman reviewed May 20, 2021
View reviewed changes
Copy link
Contributor

@dgozman dgozman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should figure out whether we want default behavior be system-dependent, or hardcoded. Depending on that, quite a few places will have to change.

.github/workflows/tests_secondary.yml Outdated Show resolved Hide resolved
src/server/chromium/crPage.ts Show resolved Hide resolved
src/server/firefox/ffBrowser.ts Outdated Show resolved Hide resolved
src/server/page.ts Show resolved Hide resolved
src/server/webkit/wkPage.ts Outdated Show resolved Hide resolved
src/server/webkit/wkPage.ts Outdated Show resolved Hide resolved
tests/page/page-emulate-media.spec.ts
@@ -114,3 +114,15 @@ it('should change the actual colors in css', async ({page}) => {
await page.emulateMedia({ colorScheme: 'light' });
expect(await getBackgroundColor()).toBe('rgb(255, 255, 255)');
});

it('should emulate reduced motion', async ({page}) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's have a test for default behavior, if we decide to not fallback to system default.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how shall we test it?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just match no-preference before the first emulateMedia call.

@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from 4d60aec to 76a5559 Compare May 21, 2021 09:03
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 21, 2021
@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from 76a5559 to bc68cb5 Compare May 21, 2021 09:34
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 21, 2021
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 21, 2021
dgozman
dgozman reviewed May 21, 2021
View reviewed changes
src/server/page.ts Outdated Show resolved Hide resolved
src/server/page.ts Show resolved Hide resolved
src/server/chromium/crPage.ts Outdated Show resolved Hide resolved
src/server/firefox/ffPage.ts Outdated Show resolved Hide resolved
src/server/webkit/wkPage.ts Outdated Show resolved Hide resolved
src/server/webkit/wkPage.ts Outdated Show resolved Hide resolved
src/server/webkit/wkPage.ts Outdated Show resolved Hide resolved
dgozman
dgozman approved these changes May 21, 2021
View reviewed changes
Copy link
Contributor

@dgozman dgozman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, let's see whether the tests pass :)

tests/page/page-emulate-media.spec.ts
@@ -114,3 +114,15 @@ it('should change the actual colors in css', async ({page}) => {
await page.emulateMedia({ colorScheme: 'light' });
expect(await getBackgroundColor()).toBe('rgb(255, 255, 255)');
});

it('should emulate reduced motion', async ({page}) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just match no-preference before the first emulateMedia call.

@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 21, 2021
@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from 6662695 to bcd57b0 Compare May 21, 2021 21:59
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 21, 2021
@mxschmitt mxschmitt force-pushed the feat/emulate-reduced-motion branch from 03c8de8 to bb0e5dc Compare May 21, 2021 23:03
@mxschmitt mxschmitt added CQ1 and removed CQ1 labels May 21, 2021
@mxschmitt mxschmitt merged commit ba29e99 into microsoft:master May 21, 2021
ahuth added a commit to chanzuckerberg/axe-storybook-testing that referenced this pull request Sep 14, 2021
@ahuth
Use playwright's emulateMedia to set prefers-reduced-motion
a4cc85e 
Instead of setting a Chrome-only CLI flag.

For some reason the CLI flag isn't working for me anymore after updating Playwright to 1.14.1 (might be a bug in Playwright).

Investigating that led me to https://playwright.dev/docs/api/class-page#page-emulate-media and microsoft/playwright#6646. This resolves the issue I'm seeing, and also should work in all browsers, instead of just Chrome.
@ahuth ahuth mentioned this pull request Sep 14, 2021
Merged
ahuth added a commit to chanzuckerberg/axe-storybook-testing that referenced this pull request Sep 14, 2021
@ahuth
Use playwright's emulateMedia to set prefers-reduced-motion
ced4479 
Instead of setting a Chrome-only CLI flag.

For some reason the CLI flag isn't working for me anymore after updating Playwright to 1.14.1 (might be a bug in Playwright).

Investigating that led me to https://playwright.dev/docs/api/class-page#page-emulate-media and microsoft/playwright#6646. This resolves the issue I'm seeing, and also should work in all browsers, instead of just Chrome.
ahuth added a commit to chanzuckerberg/axe-storybook-testing that referenced this pull request Sep 14, 2021
@ahuth
Use playwright's emulateMedia to set prefers-reduced-motion
c1ad1db 
Instead of setting a Chrome-only CLI flag.

For some reason the CLI flag isn't working for me anymore after updating Playwright to 1.14.1 (might be a bug in Playwright).

Investigating that led me to https://playwright.dev/docs/api/class-page#page-emulate-media and microsoft/playwright#6646. This resolves the issue I'm seeing, and also should work in all browsers, instead of just Chrome.
jdvivar added a commit to jdvivar/web that referenced this pull request May 25, 2022
@jdvivar
Remove not supported statement
ff703af 
Playwright added support for `emulateMedia` in this PR microsoft/playwright#6646
@jdvivar jdvivar mentioned this pull request May 25, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dgozman dgozman dgozman approved these changes

Assignees
No one assigned
Labels
CQ1
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feature] Emulate reduced motion media query
2 participants
@mxschmitt @dgozman