Implement Sec-CH-Prefers-Reduced-Motion

The `Sec-CH-Prefers-Reduced-Motion` client hint is modeled after the
`prefers-reduced-motion` user preference media feature as defined in
Media Queries 5.

Intent to ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/_m5xConFTfY

Demo: https://sec-ch-prefers-reduced-motion.glitch.me
Spec: https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion
Bug: 1361871
Change-Id: I05da639019da14caec27c87852c6f6bfb9916c19
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3883679
Commit-Queue: Fr <[email protected]>
Reviewed-by: Mike West <[email protected]>
Auto-Submit: Fr <[email protected]>
Reviewed-by: Reilly Grant <[email protected]>
Reviewed-by: Yoav Weiss <[email protected]>
Reviewed-by: Dominic Farolino <[email protected]>
Reviewed-by: Ari Chivukula <[email protected]>
Reviewed-by: Charlie Reis <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1052463}

client-hints/accept-ch/__dir__.headers

@@ -1 +1 @@
-Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect, sec-ch-ua, sec-ch-ua-arch, sec-ch-ua-platform, sec-ch-ua-model, sec-ch-ua-mobile, sec-ch-ua-full-version, sec-ch-ua-platform-version, sec-ch-prefers-color-scheme, sec-ch-ua-bitness, sec-ch-viewport-height, sec-ch-device-memory, sec-ch-dpr, sec-ch-width, sec-ch-viewport-width, sec-ch-ua-full-version-list, sec-ch-ua-wow64
+Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect, sec-ch-ua, sec-ch-ua-arch, sec-ch-ua-platform, sec-ch-ua-model, sec-ch-ua-mobile, sec-ch-ua-full-version, sec-ch-ua-platform-version, sec-ch-prefers-color-scheme, sec-ch-prefers-reduced-motion, sec-ch-ua-bitness, sec-ch-viewport-height, sec-ch-device-memory, sec-ch-dpr, sec-ch-width, sec-ch-viewport-width, sec-ch-ua-full-version-list, sec-ch-ua-wow64

client-hints/accept-ch/feature-policy-navigation/__dir__.headers

@@ -1 +1 @@
-Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect, sec-ch-ua, sec-ch-ua-arch, sec-ch-ua-platform, sec-ch-ua-model, sec-ch-ua-mobile, sec-ch-ua-full-version, sec-ch-ua-platform-version, sec-ch-prefers-color-scheme, sec-ch-ua-bitness, sec-ch-viewport-height, sec-ch-device-memory, sec-ch-dpr, sec-ch-width, sec-ch-viewport-width, sec-ch-ua-full-version-list, sec-ch-ua-wow64
+Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect, sec-ch-ua, sec-ch-ua-arch, sec-ch-ua-platform, sec-ch-ua-model, sec-ch-ua-mobile, sec-ch-ua-full-version, sec-ch-ua-platform-version, sec-ch-prefers-color-scheme, sec-ch-prefers-reduced-motion, sec-ch-ua-bitness, sec-ch-viewport-height, sec-ch-device-memory, sec-ch-dpr, sec-ch-width, sec-ch-viewport-width, sec-ch-ua-full-version-list, sec-ch-ua-wow64

client-hints/accept-ch/feature-policy.sub.https.html

@@ -44,6 +44,7 @@
     assert_true(r.headers.has("mobile-received"));
     assert_in_array(r.headers.get("mobile-received"), ["?0", "?1"], 'mobile is unexpected');
     assert_false(r.headers.has("prefers-color-scheme-received"), "prefers-color-scheme-received");
+    assert_false(r.headers.has("prefers-reduced-motion-received"), "prefers-reduced-motion-received");
     assert_false(r.headers.has("viewport-height-received"), "viewport-height-received");
   });
 }, "Accept-CH header test");
@@ -63,6 +64,7 @@
     assert_false(r.headers.has("downlink-received"), "downlink-received");
     assert_false(r.headers.has("ect-received"), "ect-received");
     assert_false(r.headers.has("prefers-color-scheme-received"), "prefers-color-scheme-received");
+    assert_false(r.headers.has("prefers-reduced-motion-received"), "prefers-reduced-motion-received");
     assert_false(r.headers.has("viewport-height-received"), "viewport-height-received");
   });
 }, "Cross-Origin Accept-CH header test");

client-hints/accept-ch/feature-policy.sub.https.html.headers

@@ -1 +1 @@
-Feature-Policy: ch-device-memory *; ch-dpr 'none'; ch-viewport-width 'self'; ch-mobile; ch-prefers-color-scheme 'none'; ch-viewport-height 'none'
+Feature-Policy: ch-device-memory *; ch-dpr 'none'; ch-viewport-width 'self'; ch-mobile; ch-prefers-color-scheme 'none'; ch-prefers-reduced-motion 'none'; ch-viewport-height 'none'

client-hints/http-equiv-accept-ch-merge.https.html

@@ -2,6 +2,7 @@
 <head>
 <meta http-equiv="Accept-CH" content="sec-ch-viewport-width, viewport-width, rtt">
 <meta http-equiv="Accept-CH" content="downlink, ect, sec-ch-prefers-color-scheme">
+<meta http-equiv="Accept-CH" content="sec-ch-prefers-reduced-motion">
 <body>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -38,6 +39,7 @@
     assert_in_array(r.headers.get("ect-received"), ["slow-2g", "2g",
           "3g", "4g"], 'ect-received is unexpected');
     assert_true(r.headers.has("prefers-color-scheme-received"), "prefers-color-scheme-received");
+    assert_true(r.headers.has("prefers-reduced-motion-received"), "prefers-reduced-motion-received");
   });
 }, "Accept-CH header test");
 

client-hints/meta-equiv-delegate-ch-injection.https.html

@@ -15,7 +15,7 @@
 document.getElementsByTagName('meta')[0].setAttribute("content", "dpr;sec-ch-dpr;device-memory;sec-ch-device-memory;viewport-width;sec-ch-viewport-width;rtt;downlink;ect");
 document.head.outerHTML += '<meta http-equiv="Delegate-CH" content="sec-ch-ua-arch;sec-ch-ua-platform;sec-ch-ua-model">';
 document.head.innerHTML += '<meta http-equiv="Delegate-CH" content="sec-ch-ua-full-version;sec-ch-ua-bitness;sec-ch-ua-full-version-list">';
-document.write('<meta http-equiv="Delegate-CH" content="sec-ch-ua-platform-version;sec-ch-prefers-color-scheme;sec-ch-viewport-height">');
+document.write('<meta http-equiv="Delegate-CH" content="sec-ch-ua-platform-version;sec-ch-prefers-color-scheme;sec-ch-prefers-reduced-motion;sec-ch-viewport-height">');
 
 // resources/echo-client-hints-received.py sets the response headers depending on the set
 // of client hints it receives in the request headers.

client-hints/meta-equiv-delegate-ch-merge.https.html

@@ -3,6 +3,7 @@
 <head>
 <meta http-equiv="Delegate-CH" content="sec-ch-viewport-width; viewport-width; rtt">
 <meta http-equiv="Delegate-CH" content="downlink; ect; sec-ch-prefers-color-scheme">
+<meta http-equiv="Delegate-CH" content="sec-ch-prefers-reduced-motion">
 <body>
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -39,6 +40,7 @@
     assert_in_array(r.headers.get("ect-received"), ["slow-2g", "2g",
           "3g", "4g"], 'ect-received is unexpected');
     assert_true(r.headers.has("prefers-color-scheme-received"), "prefers-color-scheme-received");
+    assert_true(r.headers.has("prefers-reduced-motion-received"), "prefers-reduced-motion-received");
   });
 }, "Delegate-CH header test");
 

client-hints/resources/clienthintslist.py

@@ -14,6 +14,7 @@ def client_hints_list():
           b"sec-ch-ua-full-version",
           b"sec-ch-ua-platform-version",
           b"sec-ch-prefers-color-scheme",
+          b"sec-ch-prefers-reduced-motion",
           b"sec-ch-ua-bitness",
           b"sec-ch-viewport-height",
           b"sec-ch-device-memory",

client-hints/resources/echo-client-hints-received.py

@@ -32,3 +32,5 @@ def main(request, response):
         response.headers.set(b"mobile-received", request.headers.get(b"sec-ch-ua-mobile"))
     if b"sec-ch-prefers-color-scheme" in request.headers:
         response.headers.set(b"prefers-color-scheme-received", request.headers.get(b"sec-ch-prefers-color-scheme"))
+    if b"sec-ch-prefers-reduced-motion" in request.headers:
+        response.headers.set(b"prefers-reduced-motion-received", request.headers.get(b"sec-ch-prefers-reduced-motion"))

client-hints/resources/export.js

@@ -14,6 +14,7 @@ const client_hints_list = [
   "sec-ch-ua-full-version",
   "sec-ch-ua-platform-version",
   "sec-ch-prefers-color-scheme",
+  "sec-ch-prefers-reduced-motion",
   "sec-ch-ua-bitness",
   "sec-ch-viewport-height",
   "sec-ch-device-memory",

client-hints/sandbox/__dir__.headers

@@ -1 +1 @@
-Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect, sec-ch-ua, sec-ch-ua-arch, sec-ch-ua-platform, sec-ch-ua-model, sec-ch-ua-mobile, sec-ch-ua-full-version, sec-ch-ua-platform-version, sec-ch-prefers-color-scheme, sec-ch-ua-bitness, sec-ch-viewport-height, sec-ch-device-memory, sec-ch-dpr, sec-ch-width, sec-ch-viewport-width, sec-ch-ua-full-version-list, sec-ch-ua-wow64
+Accept-CH: device-memory, dpr, width, viewport-width, rtt, downlink, ect, sec-ch-ua, sec-ch-ua-arch, sec-ch-ua-platform, sec-ch-ua-model, sec-ch-ua-mobile, sec-ch-ua-full-version, sec-ch-ua-platform-version, sec-ch-prefers-color-scheme, sec-ch-prefers-reduced-motion, sec-ch-ua-bitness, sec-ch-viewport-height, sec-ch-device-memory, sec-ch-dpr, sec-ch-width, sec-ch-viewport-width, sec-ch-ua-full-version-list, sec-ch-ua-wow64

client-hints/sec-ch-quotes.https.html

@@ -26,6 +26,7 @@
     "sec-ch-ua-model",
     "sec-ch-ua-full-version",
     "sec-ch-prefers-color-scheme",
+    "sec-ch-prefers-reduced-motion",
     "sec-ch-ua-full-version-list",
     "sec-ch-ua-wow64",
   ];

client-hints/sec-ch-quotes.https.html.headers

@@ -1 +1 @@
-Accept-CH: sec-ch-ua,sec-ch-ua-arch,sec-ch-ua-platform,sec-ch-ua-platform-version,sec-ch-ua-model,sec-ch-prefers-color-scheme
+Accept-CH: sec-ch-ua,sec-ch-ua-arch,sec-ch-ua-platform,sec-ch-ua-platform-version,sec-ch-ua-model,sec-ch-prefers-color-scheme,sec-ch-prefers-reduced-motion