[Writing Suggestions] Suggestions are sometimes hard to see in dark m…

…ode in Mail https://bugs.webkit.org/show_bug.cgi?id=274610 rdar://126371613 Reviewed by Abrar Rahman Protyasha and Matthieu Dubet. The color of writing suggestions is specified by ``` color: color-mix(in srgb, currentColor 50%, transparent); ``` which currently looks incorrect when viewed in dark mode in a place where `-apple-color-filter` is used (such as Mail). This is because the unique combination of `-apple-color-filter` with a color that is created using `color-mix`, which itself comprises of a color which is a semantic color, has not been explicitly supported. In general, semantic colors are immune from `-apple-color-filter` due to the early return check of `isSemantic` in `FilterOperations::transformColor`. However, if a semantic color is inside of a `color-mix` value, the `color-mix` color doesn't persist the semantic flag, which results in the filter operation erroneously applying. Fix by considering a `color-mix` color semantic if either of its constituent colors are semantic. * LayoutTests/css3/color-filters/test-color-filter-with-color-mix-with-semantic-color-expected.html: Added. * LayoutTests/css3/color-filters/test-color-filter-with-color-mix-with-semantic-color.html: Added. * Source/WebCore/css/color/CSSColorMixResolver.cpp: (WebCore::mixColorComponentsUsingColorInterpolationMethod): Canonical link: https://commits.webkit.org/279239@main
WebKit · May 23, 2024 · 5914f6e · 5914f6e
1 parent 9076384
commit 5914f6e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git a/...sts/css3/color-filters/test-color-filter-with-color-mix-with-semantic-color-expected.html b/...sts/css3/color-filters/test-color-filter-with-color-mix-with-semantic-color-expected.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<style>
+:root {
+    color-scheme: dark;
+}
+
+div {
+    color: color-mix(in srgb, canvastext 50%, transparent);
+}
+</style>
+<body>
+    <div>Hello world!</div>
+</body>
+</html>
diff --git a/LayoutTests/css3/color-filters/test-color-filter-with-color-mix-with-semantic-color.html b/LayoutTests/css3/color-filters/test-color-filter-with-color-mix-with-semantic-color.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html><!-- webkit-test-runner [ ColorFilterEnabled=true ] -->
+<html>
+<style>
+:root {
+    color-scheme: dark;
+}
+
+div {
+    color: color-mix(in srgb, canvastext 50%, transparent);
+    -apple-color-filter: apple-invert-lightness();
+}
+</style>
+<body>
+    <div>Hello world!</div>
+</body>
+</html>
diff --git a/Source/WebCore/css/color/CSSColorMixResolver.cpp b/Source/WebCore/css/color/CSSColorMixResolver.cpp
@@ -104,7 +104,11 @@ template<typename InterpolationMethod> static Color mixColorComponentsUsingColor
     if (mixPercentages.alphaMultiplier && !std::isnan(mixedColor.alpha))
         mixedColor.alpha *= (*mixPercentages.alphaMultiplier / 100.0);
 
-    return { mixedColor, Color::Flags::UseColorFunctionSerialization };
+    auto flags = OptionSet { Color::Flags::UseColorFunctionSerialization };
+    if (color1.isSemantic() || color2.isSemantic())
+        flags.add(Color::Flags::Semantic);
+
+    return { mixedColor, flags };
 }
 
 Color mix(const CSSColorMixResolver& colorMix)