From 39d7652297a5355306a7aafbc96b331da1981fbf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emilio=20Cobos=20=C3=81lvarez?= <emilio@crisal.io>
Date: Tue, 12 Apr 2022 09:07:18 +0000
Subject: [PATCH] Bug 1656363 - Implement prefers-contrast: custom and let
 prefers-contrast ride the trains. r=morgan

Differential Revision: https://phabricator.services.mozilla.com/D143198
---
 gfx/src/RelativeLuminanceUtils.h              | 10 ++++
 layout/style/PreferenceSheet.cpp              |  5 +-
 layout/style/nsMediaFeatures.cpp              | 19 +++++--
 layout/style/test/mochitest.ini               |  1 +
 .../test_prefers_contrast_color_pairs.html    | 49 +++++++++++++++++++
 modules/libpref/init/StaticPrefList.yaml      |  2 +-
 .../components/style/gecko/media_features.rs  |  5 +-
 .../mediaqueries/prefers-contrast.html.ini    |  5 --
 8 files changed, 80 insertions(+), 16 deletions(-)
 create mode 100644 layout/style/test/test_prefers_contrast_color_pairs.html

diff --git a/gfx/src/RelativeLuminanceUtils.h b/gfx/src/RelativeLuminanceUtils.h
index 63cadc46cc75..34e3ccf6daae 100644
--- a/gfx/src/RelativeLuminanceUtils.h
+++ b/gfx/src/RelativeLuminanceUtils.h
@@ -39,6 +39,16 @@ class RelativeLuminanceUtils {
     return NS_RGBA(r1, g1, b1, NS_GET_A(aColor));
   }
 
+  // https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio
+  static float ContrastRatio(nscolor aColor1, nscolor aColor2) {
+    float l1 = Compute(aColor1);
+    float l2 = Compute(aColor2);
+    if (l1 < l2) {
+      std::swap(l1, l2);
+    }
+    return (l1 + 0.05f) / (l2 + 0.05f);
+  }
+
  private:
   static float ComputeComponent(uint8_t aComponent) {
     float v = float(aComponent) / 255.0f;
diff --git a/layout/style/PreferenceSheet.cpp b/layout/style/PreferenceSheet.cpp
index 08b4083141be..57917b418376 100644
--- a/layout/style/PreferenceSheet.cpp
+++ b/layout/style/PreferenceSheet.cpp
@@ -181,11 +181,10 @@ void PreferenceSheet::Prefs::Load(bool aIsChrome) {
   *this = {};
 
   mIsChrome = aIsChrome;
-
+  mUseAccessibilityTheme =
+      LookAndFeel::GetInt(LookAndFeel::IntID::UseAccessibilityTheme);
   // Chrome documents always use system colors, not stand-ins, not forced, etc.
   if (!aIsChrome) {
-    mUseAccessibilityTheme =
-        LookAndFeel::GetInt(LookAndFeel::IntID::UseAccessibilityTheme);
     mUseDocumentColors = UseDocumentColors(mUseAccessibilityTheme);
     mUsePrefColors = !StaticPrefs::browser_display_use_system_colors();
     mUseStandins = UseStandinsForNativeColors();
diff --git a/layout/style/nsMediaFeatures.cpp b/layout/style/nsMediaFeatures.cpp
index 6d01ac9bb5e8..2ef43008df12 100644
--- a/layout/style/nsMediaFeatures.cpp
+++ b/layout/style/nsMediaFeatures.cpp
@@ -282,13 +282,22 @@ StylePrefersContrast Gecko_MediaFeatures_PrefersContrast(
   if (nsContentUtils::ShouldResistFingerprinting(aDocument)) {
     return StylePrefersContrast::NoPreference;
   }
-  if (!!LookAndFeel::GetInt(LookAndFeel::IntID::UseAccessibilityTheme, 0)) {
+  const auto& prefs = PreferenceSheet::PrefsFor(*aDocument);
+  if (!prefs.mUseAccessibilityTheme && prefs.mUseDocumentColors) {
+    return StylePrefersContrast::NoPreference;
+  }
+  const auto& colors = prefs.ColorsFor(ColorScheme::Light);
+  float ratio = RelativeLuminanceUtils::ContrastRatio(colors.mDefaultBackground,
+                                                      colors.mDefault);
+  // https://www.w3.org/TR/WCAG21/#contrast-minimum
+  if (ratio < 4.5f) {
+    return StylePrefersContrast::Less;
+  }
+  // https://www.w3.org/TR/WCAG21/#contrast-enhanced
+  if (ratio >= 7.0f) {
     return StylePrefersContrast::More;
   }
-  if (!PreferenceSheet::PrefsFor(*aDocument).mUseDocumentColors) {
-    return StylePrefersContrast::More;
-  }
-  return StylePrefersContrast::NoPreference;
+  return StylePrefersContrast::Custom;
 }
 
 StyleDynamicRange Gecko_MediaFeatures_DynamicRange(const Document* aDocument) {
diff --git a/layout/style/test/mochitest.ini b/layout/style/test/mochitest.ini
index 14b21a641887..f3e998c0c5a8 100644
--- a/layout/style/test/mochitest.ini
+++ b/layout/style/test/mochitest.ini
@@ -318,6 +318,7 @@ run-if = !headless && (os == 'mac' || toolkit == 'android' || toolkit == 'gtk')
 [test_pointer-events.html]
 [test_position_float_display.html]
 [test_position_sticky.html]
+[test_prefers_contrast_color_pairs.html]
 [test_priority_preservation.html]
 [test_property_database.html]
 [test_property_syntax_errors.html]
diff --git a/layout/style/test/test_prefers_contrast_color_pairs.html b/layout/style/test/test_prefers_contrast_color_pairs.html
new file mode 100644
index 000000000000..f4a89458049e
--- /dev/null
+++ b/layout/style/test/test_prefers_contrast_color_pairs.html
@@ -0,0 +1,49 @@
+<!doctype html>
+<title>Test for Bug 922669</title>
+<script src="/tests/SimpleTest/SimpleTest.js"></script>
+<script src="/tests/SimpleTest/EventUtils.js"></script>
+<link rel="stylesheet" href="/tests/SimpleTest/test.css">
+<script>
+  function assertMatches(query) {
+    ok(matchMedia(query).matches, `${query} should match`);
+  }
+  function assertPrefersContrastIs(value) {
+    assertMatches(`(prefers-contrast: ${value})`);
+  }
+  add_task(async function setupPrefs() {
+    assertPrefersContrastIs("no-preference");
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        ["browser.display.document_color_use", 2],
+        ["browser.display.use_system_colors", false],
+      ]
+    });
+    assertMatches("(prefers-contrast)");
+  });
+  async function testColors(foreground, background, expected) {
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        ["browser.display.foreground_color", foreground],
+        ["browser.display.background_color", background],
+      ]
+    });
+
+    assertPrefersContrastIs(expected);
+
+    // Test the inversed order too.
+    await SpecialPowers.pushPrefEnv({
+      set: [
+        ["browser.display.foreground_color", background],
+        ["browser.display.background_color", foreground],
+      ]
+    });
+
+    assertPrefersContrastIs(expected);
+  }
+
+  add_task(async function test_prefers_contrast_colors() {
+    await testColors("black", "black", "less");
+    await testColors("black", "white", "more");
+    await testColors("red", "black", "custom");
+  });
+</script>
diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml
index db4c0113874c..5286d15fd953 100644
--- a/modules/libpref/init/StaticPrefList.yaml
+++ b/modules/libpref/init/StaticPrefList.yaml
@@ -7747,7 +7747,7 @@
 #   chrome and ua.
 - name: layout.css.prefers-contrast.enabled
   type: RelaxedAtomicBool
-  value: false
+  value: true
   mirror: always
   rust: true
 
diff --git a/servo/components/style/gecko/media_features.rs b/servo/components/style/gecko/media_features.rs
index c873ac92b879..c284fbd86a33 100644
--- a/servo/components/style/gecko/media_features.rs
+++ b/servo/components/style/gecko/media_features.rs
@@ -315,11 +315,12 @@ fn eval_prefers_reduced_motion(device: &Device, query_value: Option<PrefersReduc
 #[derive(Clone, Copy, Debug, FromPrimitive, Parse, PartialEq, ToCss)]
 #[repr(u8)]
 pub enum PrefersContrast {
-    /// More contrast is preferred. Corresponds to an accessibility theme
-    /// being enabled or Firefox forcing high contrast colors.
+    /// More contrast is preferred.
     More,
     /// Low contrast is preferred.
     Less,
+    /// Custom (not more, not less).
+    Custom,
     /// The default value if neither high or low contrast is enabled.
     NoPreference,
 }
diff --git a/testing/web-platform/meta/css/mediaqueries/prefers-contrast.html.ini b/testing/web-platform/meta/css/mediaqueries/prefers-contrast.html.ini
index e091f03b6cfc..2a805c0e37b7 100644
--- a/testing/web-platform/meta/css/mediaqueries/prefers-contrast.html.ini
+++ b/testing/web-platform/meta/css/mediaqueries/prefers-contrast.html.ini
@@ -1,7 +1,2 @@
 [prefers-contrast.html]
   prefs: [layout.css.prefers-contrast.enabled:true]
-  [Should be parseable in a CSS stylesheet: '(prefers-contrast: custom)']
-    expected: FAIL
-
-  [Should be parseable in JS: '(prefers-contrast: custom)']
-    expected: FAIL