commit 4e80dd7940161b9eef7ea81310b343522c999068
parent ded0d9bad34c42cc7d621ba4c50cea12d5deb6c0
Author: Sejal Anand <sejalanand@microsoft.com>
Date: Tue, 21 Oct 2025 10:35:42 +0000
Bug 1995023 [wpt PR 55513] - [Fonts] Enable monochrome emoji rendering in forced colors mode, a=testonly
Automatic update from web-platform-tests
[Fonts] Enable monochrome emoji rendering in forced colors mode
This change introduces support for rendering monochrome (text-style)
emoji when forced colors mode is active.
Key changes:
- Add `is_forced_colors_mode_` flag to `FontDescription` and propagate
it from `Document` to all font resolution paths, including canvas and
OffscreenCanvas.
- Modify fallback priority logic in `ApplyFontVariantEmojiOnFallbackPriority`
to force `kText` priority for emoji when in forced colors mode and
`font-variant-emoji` is set to normal or unicode.
- Make forced colors mode part of the font cache key.
- Gate the behavior under the new `EmojiMonochromeRendering` runtime
flag.
This also brings canvas rendering behavior in line with the forced
colors mode, ensuring emoji are accessible and consistently styled.
Spec - https://www.w3.org/TR/css-fonts-4/#font-variant-emoji-prop
https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties
https://github.com/w3c/csswg-drafts/issues/8064
Bug: 420857717
Change-Id: I55c47918b24529015d34682ea66a3cb093bb5858
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6916516
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Commit-Queue: Sejal Anand <sejalanand@microsoft.com>
Reviewed-by: Divyansh Mangal <dmangal@microsoft.com>
Reviewed-by: Dileep Maurya <dileepmaurya@microsoft.com>
Cr-Commit-Position: refs/heads/main@{#1531487}
--
wpt-commits: 9a87b6ba1017bfbbbd6d1bafd361e0047349989b
wpt-pr: 55513
Diffstat:
6 files changed, 118 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-57-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-57-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: All emoji are forced to text style in forced colors mode</title>
+<link rel="author" title="Sejal Anand" href="sejalanand@microsoft.com">
+<style>
+ .mono {
+ font-variant-emoji: text;
+ }
+</style>
+
+<p>All emoji should appear as monochrome (text-style) if forced-colors mode is active.</p>
+
+<div class="mono">😀 😀</div>
+<div class="mono">😀 😀</div>
+<div class="mono">😀 😀</div>
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-57.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-57.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode: this mode forces text-style emoji</title>
+<link rel="author" title="Sejal Anand" href="sejalanand@microsoft.com">
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-57-ref.html">
+<meta name="assert" content="In forced-colors mode, font-variant-emoji: normal and unicode should behave like text, rendering emoji in monochrome.">
+
+<style>
+ @media (forced-colors: active) {
+ .test {
+ font-variant-emoji: normal; /* overridden to text in forced-colors */
+ }
+
+ .unicode {
+ font-variant-emoji: unicode; /* also treated as text in forced-colors */
+ }
+
+ .text {
+ font-variant-emoji: text;
+ }
+ }
+</style>
+
+<p>All emoji should appear as monochrome (text-style) if forced-colors mode is active.</p>
+
+<div class="test">😀 😀</div>
+<div class="text">😀 😀</div>
+<div class="unicode">😀 😀</div>
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-58-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-58-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: Emoji should appear in color (not text-style)</title>
+<link rel="author" title="Sejal Anand" href="sejalanand@microsoft.com">
+
+<p>In forced-colors mode, this emoji should remain colorful because of <code>forced-color-adjust: none</code>.</p>
+
+<div>😀 😀</div>
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-58.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-58.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode: this mode forces text-style emoji</title>
+<link rel="author" title="Sejal Anand" href="sejalanand@microsoft.com">
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel=match href="forced-colors-mode-58-ref.html">
+<meta name="assert" content="When forced-color-adjust is none, font-variant-emoji: normal/unicode must not be overridden in forced colors mode.">
+
+<style>
+ @media (forced-colors: active) {
+ .optout {
+ font-variant-emoji: normal;
+ forced-color-adjust: none; /* prevents override to text-style emoji */
+ }
+ }
+</style>
+
+<body>
+<p>In forced-colors mode, this emoji should remain colorful because of <code>forced-color-adjust: none</code>.</p>
+
+<div class="optout">😀 😀</div>
+</body>
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-59-ref.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-59-ref.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: Emoji with VS16 rendered as text-style in forced colors</title>
+<link rel="author" title="Sejal Anand" href="sejalanand@microsoft.com">
+
+<style>
+ .mono {
+ font-variant-emoji: text;
+ }
+</style>
+
+<p>All emoji below are followed by VS16 (emoji presentation). They should render as monochrome (text-style) if forced-colors mode is active.</p>
+<div class="mono">😀️</div>
+<div class="mono">😀️</div>
+<div class="mono">😀️</div>
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-59.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-59.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Forced colors mode: Emoji with VS16 should still be monochrome</title>
+<link rel="author" title="Sejal Anand" href="sejalanand@microsoft.com">
+<link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-variant-emoji-prop">
+<link rel="help" href="https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties">
+<link rel="match" href="forced-colors-mode-59-ref.html">
+<meta name="assert" content="In forced-colors mode, emoji with VS16 (emoji presentation selector) should be rendered in monochrome, overriding the variation selector.">
+
+<style>
+ @media (forced-colors: active) {
+ .normal {
+ font-variant-emoji: normal;
+ }
+
+ .unicode {
+ font-variant-emoji: unicode;
+ }
+
+ .text {
+ font-variant-emoji: text;
+ }
+ }
+</style>
+
+<p>All emoji below are followed by VS16 (emoji presentation). They should render as monochrome (text-style) if forced-colors mode is active.</p>
+<div class="normal">😀️</div>
+<div class="unicode">😀️</div>
+<div class="text">😀️</div>
