From ad5935738d869cfce386a0d28b4bc6131457f962 Mon Sep 17 00:00:00 2001
From: Alex Rudenko <OrKoN@users.noreply.github.com>
Date: Thu, 11 Feb 2021 14:59:50 +0100
Subject: [PATCH] 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            | 12 +++++++++++-
 src/common/Page.ts     |  4 +++-
 test/emulation.spec.ts | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/docs/api.md b/docs/api.md
index 1e70fbb4..842a06be 100644
--- a/docs/api.md
+++ b/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)
diff --git a/src/common/Page.ts b/src/common/Page.ts
index e5bb4d99..ee8fd853 100644
--- a/src/common/Page.ts
+++ b/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;
diff --git a/test/emulation.spec.ts b/test/emulation.spec.ts
index 407288ef..82d263ba 100644
--- a/test/emulation.spec.ts
+++ b/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();