Add emulation support for color-gamut media feature

This CL adds support for emulation of the color-gamut
media feature. In particular, 3 values that are currently
supported by CSS: srgb, p3, rec2020/bt2020.

Spec: https://drafts.csswg.org/mediaqueries-4/#color-gamut
Doc: https://goo.gle/devtools-css-color
Bug: chromium:1073887
Change-Id: If96f1e955b1bb326af831e3fcfa020fcc9c70208
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2632609
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Cr-Commit-Position: refs/heads/master@{#844529}

third_party/blink/renderer/core/css/media_values.cc

@@ -12,6 +12,7 @@
 #include "third_party/blink/renderer/core/css/media_values.h"
 #include "third_party/blink/renderer/core/css/media_values_cached.h"
 #include "third_party/blink/renderer/core/css/media_values_dynamic.h"
+#include "third_party/blink/renderer/core/css_value_keywords.h"
 #include "third_party/blink/renderer/core/dom/document.h"
 #include "third_party/blink/renderer/core/dom/element.h"
 #include "third_party/blink/renderer/core/frame/local_frame.h"
@@ -179,6 +180,19 @@ int MediaValues::CalculateAvailableHoverTypes(LocalFrame* frame) {
 ColorSpaceGamut MediaValues::CalculateColorGamut(LocalFrame* frame) {
   DCHECK(frame);
   DCHECK(frame->GetPage());
+  if (const auto* overrides = frame->GetPage()->GetMediaFeatureOverrides()) {
+    MediaQueryExpValue value = overrides->GetOverride("color-gamut");
+    if (value.IsValid()) {
+      if (value.id == CSSValueID::kSRGB)
+        return ColorSpaceGamut::SRGB;
+      if (value.id == CSSValueID::kP3)
+        return ColorSpaceGamut::P3;
+      // Rec. 2020 is also known as ITU-R-Empfehlung BT.2020.
+      if (value.id == CSSValueID::kRec2020)
+        return ColorSpaceGamut::BT2020;
+      NOTREACHED();
+    }
+  }
   return color_space_utilities::GetColorSpaceGamut(
       frame->GetPage()->GetChromeClient().GetScreenInfo(*frame));
 }

third_party/blink/web_tests/inspector-protocol/emulation/set-css-media-feature-override-expected.txt

@@ -17,6 +17,14 @@ matchMedia("(prefers-reduced-motion: reduce)").matches: true
 matchMedia("(prefers-reduced-motion: reduce)").matches applied: 3px x 3px
 matchMedia("(prefers-reduced-motion: __invalid__)").matches: false
 matchMedia("(prefers-reduced-motion: __invalid__)").matches applied: 3px x 2px
+matchMedia("(color-gamut: __invalid__)").matches: false
+matchMedia("(color-gamut: __invalid__)").matches applied: 3px x 2px
+matchMedia("(color-gamut: p3)").matches: true
+matchMedia("(color-gamut: p3)").matches applied: 6px x 6px
+matchMedia("(color-gamut: rec2020)").matches: true
+matchMedia("(color-gamut: rec2020)").matches applied: 7px x 7px
+matchMedia("(color-gamut: __invalid__)").matches: false
+matchMedia("(color-gamut: __invalid__)").matches applied: 3px x 2px
 matchMedia("(prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)").matches: true
 matchMedia("(prefers-color-scheme: dark) and (prefers-reduced-motion: reduce)").matches applied: 999px x 999px
 matchMedia("(prefers-color-scheme: __invalid__)").matches: false

third_party/blink/web_tests/inspector-protocol/emulation/set-css-media-feature-override.js

@@ -49,6 +49,13 @@
   await setEmulatedMediaFeature('prefers-reduced-motion', 'reduce');
   await setEmulatedMediaFeature('prefers-reduced-motion', '__invalid__');
 
+  // Test `color-gamut`.
+  // https://drafts.csswg.org/mediaqueries-5/#color-gamut
+  await setEmulatedMediaFeature('color-gamut', '__invalid__');
+  await setEmulatedMediaFeature('color-gamut', 'p3');
+  await setEmulatedMediaFeature('color-gamut', 'rec2020');
+  await setEmulatedMediaFeature('color-gamut', '__invalid__');
+
   // Test combinations.
   await setEmulatedMediaFeatures({
     features: [

third_party/blink/web_tests/inspector-protocol/resources/css-media-features.html

@@ -7,5 +7,7 @@
   @media (prefers-reduced-motion: no-preference) { p { height: 2px; } }
   @media (prefers-reduced-motion: reduce) { p { height: 3px; } }
   @media (prefers-color-scheme: dark) and (prefers-reduced-motion: reduce) { p { width: 999px; height: 999px; } }
+  @media (color-gamut: p3) { p { width: 6px; height: 6px; } }
+  @media (color-gamut: rec2020) { p { width: 7px; height: 7px; } }
 </style>
 <p id="p">