Also filed to Mozilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=1365045

Note: This is mentioned in the Blink Animation team's public backlog: https://docs.google.com/document/d/1HqyYRIM6bE5eAOvZHjvKS1mwqvKZT_JP9VSaiUGhzk0/edit#heading=h.vbhnljhcbuhr

Initial WebKit patch (using the oolder "default" value):
https://bugs.webkit.org/show_bug.cgi?id=163250

Also field against Edge:
https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/19291531-add-support-for-css-prefers-reduced-motion-media-f

Untriaged so that it gets addressed.

i think we need this for people with vestibular disabilities

As a vestibular disorder having person, this would be amazing to have in place. 

I'd love to see this addressed. We have VIMS issues tracked in Drupal here https://www.drupal.org/project/issues/search?issue_tags=VIMS

I support this advancement of this feature. WCAG 2.1 Level AAA has a requirement on authors to provide a way to turn off animation. This seems a lot more inefficient that just allowing the end user to select whether or not thy want motion.

Expanding on comment 13: The WCAG 2.1 supporting material at "Understanding Success Criterion 2.3.3: Animation from Interactions" mentions the CSS media query as a sufficient technique to address it.  This means authors don't have to implement their own controls to turn it off, they can respect OS/browser-level preferences instead.

For the Drupal core project, we've settled  on using the CSS media query to address WCAG SC 2.3.3, because:

1. The media query is loads easier than implementing our own user preference controls (as you say in comment 13).
2. Respecting preferences at the OS/browser level is more elegant, requiring no extra effort from a user who has already sorted out their preferences for the OS.
3. Crucially, the media query lets us support anonymous visitors, who don't log in to a Drupal website user account.

Related to this, I filed issue Find in page smooth scrolls in Mac contrary to Reduce Motion setting for some pages https://bugs.chromium.org/p/chromium/issues/detail?id=882197. 

This ultimately turned out to not be affected by MacOS's reduce motion setting, but Comment 4 implies that at least one member of the Chromium team considers the Find behavior not to be part of the UI, which would make it part of the content.

If that is true, then the Find behavior would need to respect the behavior of this current issue, Add support for CSS prefers-reduced-motion media feature.

That said, it would likely be a separate, but related issue. I'll wait to see the disposition of Find in page smooth scrolls in Mac contrary to Reduce Motion setting for some pages https://bugs.chromium.org/p/chromium/issues/detail?id=882197 before filing a new issue.

This seems like an important feature (26 stars), is there anyone on the relevant teams who can pick it up?

I agree that this is an important feature to implement and it seems relatively straight forward. 

Do we have a sense of how much this feature is used? It was shipped in Safari for about a year. cookiecrook@ do you have any data on usage?

Who is currently owns the Media-Query feature in Blink? I think this is not particularly related to Blink>Animation but we can try to help current MQ owner to push this forward.

FWIW, web-platform-tests does not have any tests covering this feature but webkit implementation has several layout tests [1]. I think it should be easy to convert those tests for use in Blink. 

[1] https://github.com/WebKit/webkit/tree/89c28d471fae35f1788a0f857067896a10af8974/LayoutTests/fast/media

Note: This appears to be supported by Firefox as of 63 (https://caniuse.com/#search=prefers-reduced-motion, https://bugzilla.mozilla.org/show_bug.cgi?id=1365045 is now fixed). Surprisingly it looks like they didn't upload WPT tests for it (they have local reftests I think? https://hg.mozilla.org/integration/mozilla-inbound/rev/786a2e4ea6ea).

This is just a media selector, so ease on implementation depends if we already have some Chrome setting or way to check system settings for reduced motion.

We already respect the Windows' "disable animation" system setting and we stop doing animated scrolls. Shouldn't be too hard to plumb that through to a media query.

From a discussion on internal IM:

Firefox uses:
  * Windows: SPI_GETCLIENTAREAANIMATION
  * Mac: accessibilityDisplayShouldReduceMotion (https://developer.apple.com/documentation/appkit/nsworkspace/1644069-accessibilitydisplayshouldreduce?language=objc, 10.12+ only)
  * Android: Settings.Global.ANIMATOR_DURATION_SCALE == 0.0f
  * gtk: 'gtk-enable-animations'

As David notes, we already obey Windows settings for ui/ animations in https://cs.chromium.org/chromium/src/ui/gfx/animation/animation_win.cc?l=15&rcl=0577a79942585ed085f702a5d48a9b31d3f55bc4

I'm happy to look at doing the plumbing for this. I'll likely start with Windows since we already have some code we can generalize for that. Would love some input from Accessibility folks if any are listening.

Note to myself so I don't forget: the naive way to do this will likely mean a browser restart is required to change this media query (since I assume we can't call these various APIs from the sandboxed renderer, and instead will pass them via web prefs). I'm not sure if we're happy with that or not.

I will test on a Windows machine and a Mac device if Firefox/WebKit update dynamically or require a browser restart. The Firefox source looks like it would update dynamically.

In addition to the original Safari/WebKit implementation. prefers-reduced-motion shipped recently in Firefox 63, so there are two independent implementations now.

FYI all, we are working actively on this issue. A design doc has been created[0], and we are currently investigating appropriate system settings to use to base this feature on.

[0]: https://docs.google.com/document/d/1aZnSfg7I-xbRBYui5jkUIdbIgZ5jK9u-CUplPFU_tC8/view

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4

commit 53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Mon Nov 05 15:40:42 2018

[Accessibility] Add histograms for Mac/Windows reduce-motion APIs

These histograms will be used to guide the implementation of the CSS
prefers-reduced-motion media feature. The primary goal is to compare
usage levels across platforms. This CL starts with the two easiest
platforms to measure - Windows and MacOS.

Bug: 722548
Change-Id: I8643ec4df206e112f31943de0865b27775f72ce3
Reviewed-on: https://chromium-review.googlesource.com/c/1308104
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#605340}
[modify] https://crrev.com/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4/content/browser/accessibility/browser_accessibility_state_impl_mac.mm
[modify] https://crrev.com/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4/content/browser/accessibility/browser_accessibility_state_impl_win.cc
[modify] https://crrev.com/53c0f16b7423f39b2b55bd6896c3d6a2c5800bd4/tools/metrics/histograms/histograms.xml

It would be cool if there'd be a way to manually enable / disable this for individual websites (maybe via an extension?). I'm a user of that accessibility feature, but I haven't enabled the system-wide toggle, because I do like most animations - only some of them induce vertigo for me. For example, I can't use Google Photos, because the full-screen swipe animation is such an animation.

cc dmazzonni@ as an FYI about the user-request in #29

As a not-perfect workaround, you could have an extension (I *think*, not familiar with extension capabilities) which detects '@media (prefers-reduced-motion)' rules on the page and removes them for sites you want to enable motion for. This would not fix any future internal accessibility related changes we make based on the system setting (which, to be clear, we haven't even begun talking about - it's just a future possibility), but it would allow you to fix individual sites.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f

commit a73dfdba61d1ad37d885ccecbcb9868de5c05c7f
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Wed Nov 14 18:19:47 2018

[Accessibility] Add histograms for Android reduce-motion API

This histogram will be used to guide the implementation of the CSS
prefers-reduced-motion media feature. The primary goal is to compare
usage levels across platforms.

Bug: 722548
Change-Id: I9162d4e9df2e04afa0c8716266c2f0dc2c57b2ac
Reviewed-on: https://chromium-review.googlesource.com/c/1330827
Reviewed-by: Yaron Friedman <yfriedman@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#608052}
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/browser/BUILD.gn
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/browser/accessibility/browser_accessibility_state_impl.cc
[add] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/browser/accessibility/browser_accessibility_state_impl_android.cc
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/public/android/BUILD.gn
[add] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/content/public/android/java/src/org/chromium/content/browser/accessibility/BrowserAccessibilityState.java
[modify] https://crrev.com/a73dfdba61d1ad37d885ccecbcb9868de5c05c7f/tools/metrics/histograms/histograms.xml

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/22d620d8174b502710c81d2b131c0eea96a1abe2

commit 22d620d8174b502710c81d2b131c0eea96a1abe2
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Wed Nov 28 13:48:08 2018

[Accessibility] Account for flag default in Android animation histograms

The initial implementation of this histogram used 0 as the default
setting. This will incorrectly count cases where the flag is missing as
'animation disabled'. This CL fixes this by splitting the default case
into its own enum. In order to preserve correct data, the old histogram
is obsoleted and a new histogram is created.

Bug: 722548
Change-Id: I031ca38cf70ddc8b51c9a150f31e25a305b9fc7a
Reviewed-on: https://chromium-review.googlesource.com/c/1351273
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: Ilya Sherman <isherman@chromium.org>
Reviewed-by: Yaron Friedman <yfriedman@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#611674}
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/content/public/android/BUILD.gn
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/content/public/android/java/src/org/chromium/content/browser/accessibility/BrowserAccessibilityState.java
[add] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/content/public/android/junit/src/org/chromium/content/browser/accessibility/BrowserAccessibilityStateTest.java
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/tools/metrics/histograms/enums.xml
[modify] https://crrev.com/22d620d8174b502710c81d2b131c0eea96a1abe2/tools/metrics/histograms/histograms.xml

An intent to ship + implement has been sent for this: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/NZ3c9d4ivA8

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/2d8278ee495e0104129ffddd693170e29ead3cc3

commit 2d8278ee495e0104129ffddd693170e29ead3cc3
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Wed Jan 16 00:06:03 2019

Support for prefers-reduced-motion media feature.

The preference can be passed to the renderer through Settings, but
there is no code in content changing it from the default value yet.

Intent to implement & ship:
https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/NZ3c9d4ivA8

Bug: 722548
Change-Id: I290412a8cdb26981216aba9c05d9240032f4de46
Reviewed-on: https://chromium-review.googlesource.com/c/1346911
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#622895}
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/css_value_keywords.json5
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_feature_names.json5
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_query_evaluator.cc
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_query_exp.cc
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_values.cc
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_values.h
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_values_cached.cc
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_values_cached.h
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_values_dynamic.cc
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/media_values_dynamic.h
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/css/style_engine_test.cc
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/renderer/platform/runtime_enabled_features.json5
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/web_tests/external/wpt/css/mediaqueries/prefers-color-scheme-expected.txt
[modify] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/web_tests/external/wpt/css/mediaqueries/prefers-color-scheme.html
[add] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/web_tests/external/wpt/css/mediaqueries/prefers-reduced-motion-expected.txt
[add] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/web_tests/external/wpt/css/mediaqueries/prefers-reduced-motion.html
[add] https://crrev.com/2d8278ee495e0104129ffddd693170e29ead3cc3/third_party/blink/web_tests/external/wpt/css/mediaqueries/resources/matchmedia-utils.js

I'm not sure if the bot is being slow, but https://chromium-review.googlesource.com/c/chromium/src/+/1417754 landed today which hooks up this feature for Windows and Mac. The support is only static (e.g. you need to open a new tab to see changes after changing the system setting) and is still behind --enable-blink-features=MediaQueryPrefersReducedMotion .

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/bc3d0e66de5a69b50a1b81de30d7654ccd029fb9

commit bc3d0e66de5a69b50a1b81de30d7654ccd029fb9
Author: Stephen McGruer <smcgruer@chromium.org>
Date: Wed Jan 23 17:40:19 2019

Initial hookup of CSS prefers-reduced-motion for Mac/Win

For now, the hookup is static; changing the OS level settings will not
cause the settings to be recalculated.

Test: Manually verified functional on Mac and Windows.
Bug: 722548
Change-Id: Iccb601a28d26a7ac659677041ce637bdd19e7db3
Reviewed-on: https://chromium-review.googlesource.com/c/1417754
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Reviewed-by: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: Kinuko Yasuda <kinuko@chromium.org>
Reviewed-by: Ian Vollick <vollick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#625249}