feat(page): add color-gamut support to Page.emulateMediaFeatures (#6857)

The change updates the validation function to allow color-gamut media
features and updates the documentation.

Issues: #6761

docs/api.md

@@ -1411,7 +1411,7 @@ List of all available devices is available in the source code: [src/common/Devic
 
 #### page.emulateMediaFeatures(features)
 - `features` <?[Array]<[Object]>> Given an array of media feature objects, emulates CSS media features on the page. Each media feature object must have the following properties:
-  - `name` <[string]> The CSS media feature name. Supported names are `'prefers-colors-scheme'` and `'prefers-reduced-motion'`.
+  - `name` <[string]> The CSS media feature name. Supported names are `'prefers-colors-scheme'`, `'prefers-reduced-motion'`, and `'color-gamut'`.
   - `value` <[string]> The value for the given CSS media feature.
 - returns: <[Promise]>
 
@@ -1440,6 +1440,16 @@ await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches
 // → true
 await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches);
 // → false
+
+await page.emulateMediaFeatures([
+  { name: 'color-gamut', value: 'p3' },
+]);
+await page.evaluate(() => matchMedia('(color-gamut: srgb)').matches);
+// → true
+await page.evaluate(() => matchMedia('(color-gamut: p3)').matches);
+// → true
+await page.evaluate(() => matchMedia('(color-gamut: rec2020)').matches);
+// → false
 ```
 
 #### page.emulateMediaType(type)

src/common/Page.ts

@@ -1420,7 +1420,9 @@ export class Page extends EventEmitter {
       features.every((mediaFeature) => {
         const name = mediaFeature.name;
         assert(
-          /^prefers-(?:color-scheme|reduced-motion)$/.test(name),
+          /^(?:prefers-(?:color-scheme|reduced-motion)|color-gamut)$/.test(
+            name
+          ),
           'Unsupported media feature: ' + name
         );
         return true;

test/emulation.spec.ts

@@ -242,6 +242,38 @@ describe('Emulation', () => {
           () => matchMedia('(prefers-color-scheme: dark)').matches
         )
       ).toBe(false);
+      await page.emulateMediaFeatures([{ name: 'color-gamut', value: 'srgb' }]);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: p3)').matches)
+      ).toBe(false);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: srgb)').matches)
+      ).toBe(true);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: rec2020)').matches)
+      ).toBe(false);
+      await page.emulateMediaFeatures([{ name: 'color-gamut', value: 'p3' }]);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: p3)').matches)
+      ).toBe(true);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: srgb)').matches)
+      ).toBe(true);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: rec2020)').matches)
+      ).toBe(false);
+      await page.emulateMediaFeatures([
+        { name: 'color-gamut', value: 'rec2020' },
+      ]);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: p3)').matches)
+      ).toBe(true);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: srgb)').matches)
+      ).toBe(true);
+      expect(
+        await page.evaluate(() => matchMedia('(color-gamut: rec2020)').matches)
+      ).toBe(true);
     });
     it('should throw in case of bad argument', async () => {
       const { page } = getTestState();