commit 918e88c52eee0a2dd3aa540aa141893c6bd4e765
parent ce20d037000c0fbc6ffb558c7bf0e14c15ec9164
Author: Sejal Anand <sejalanand@microsoft.com>
Date: Thu, 6 Nov 2025 21:38:22 +0000
Bug 1998119 [wpt PR 55845] - Force variant emoji at computed value time, a=testonly
Automatic update from web-platform-tests
Force variant emoji at computed value time
In the previous CL –
https://chromium-review.googlesource.com/c/chromium/src/+/6916516, the
`variant_emoji` was handled at used value time. As part of this CL, we
are now moving this behavior to computed value time for spec compliance.
The earlier changes are reverted, and a new implementation is added in
`style_adjuster` to ensure the variant emoji is set correctly during
computed style resolution.
Spec -
https://www.w3.org/TR/css-color-adjust-1/#forced-colors-properties
Bug: 420857717
Change-Id: I15199e424f8cf231e957b89a8487f4b6425dd3f5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7081132
Reviewed-by: Alison Maher <almaher@microsoft.com>
Commit-Queue: Sejal Anand <sejalanand@microsoft.com>
Reviewed-by: Dominik Röttsches <drott@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1539892}
--
wpt-commits: b24b9adc2d6cb8f1997896ce205e459abac89a40
wpt-pr: 55845
Diffstat:
7 files changed, 175 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,16 @@
+<!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">
+<style>
+ @media (forced-colors: active) {
+ .optout {
+ font-variant-emoji: normal;
+ forced-color-adjust: none; /* prevents override to text-style emoji */
+ }
+ }
+</style>
+
+<p>In forced-colors mode, this emoji should remain colorful because of <code>forced-color-adjust: none</code>.</p>
+
+<div class="optout">😀 😀</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,20 @@
+<!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>
+
+<p>In forced-colors mode, this emoji should remain colorful because of <code>forced-color-adjust: none</code>.</p>
+
+<div class="optout">😀 😀</div>
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>
diff --git a/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-60.html b/testing/web-platform/tests/forced-colors-mode/forced-colors-mode-60.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>font-variant-emoji resolved to text at computed value time in forced-colors mode</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">
+<meta name="assert" content="In forced-colors mode, font-variant-emoji should resolve to 'text' at computed value time.">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+ /* These elements declare different emoji variants,
+ but in forced-colors mode, they should all compute to 'text'. */
+ @media (forced-colors: active) {
+ .normal {
+ font-variant-emoji: normal;
+ }
+
+ .unicode {
+ font-variant-emoji: unicode;
+ }
+
+ .text {
+ font-variant-emoji: text;
+ }
+
+ .emoji {
+ font-variant-emoji: emoji;
+ }
+ }
+</style>
+
+<div id="normal" class="normal">😀 😀</div>
+<div id="text" class="text">😀 😀</div>
+<div id="unicode" class="unicode">😀 😀</div>
+<div id="emoji" class="emoji">😀 😀</div>
+
+<script>
+ test(() => {
+ const normal = getComputedStyle(document.getElementById("normal")).fontVariantEmoji;
+ const text = getComputedStyle(document.getElementById("text")).fontVariantEmoji;
+ const unicode = getComputedStyle(document.getElementById("unicode")).fontVariantEmoji;
+ const emoji = getComputedStyle(document.getElementById("emoji")).fontVariantEmoji;
+
+ assert_equals(normal, "text", "In forced-colors mode, 'normal' should compute to 'text'.");
+ assert_equals(text, "text", "In forced-colors mode, 'text' should remain 'text'.");
+ assert_equals(unicode, "text", "In forced-colors mode, 'unicode' should compute to 'text'.");
+ assert_equals(emoji, "emoji", "In forced-colors mode, 'emoji' should remain 'emoji'");
+ }, "font-variant-emoji should resolve to 'text' at computed value time in forced-colors mode");
+</script>
