Get currentcolor to work properly for color property for colormix
Color is a special case for CSS as "currentColor" is equivalent to
"inherit." This presents a problem for color-mix as it can be
self-referential, i.e:
#foo {
color: color-mix(in srgb, currentColor, green);
}
Will look to itself to resolve the currentColor, as opposed to its
parent.
The simplest way to resolve this is by grabbing the parent color in Color::ApplyValue in longhands_custom, as currentColor is not retained
in computed style.
This CL also addresses the issue of nested color-mixes in this
property by calling ResolveColorMixForColorProperty recursively. A
test has been added to WPT to this effect that should get added for
interop 2023 as well.
Bug: 1448813
Change-Id: I96458be6008ca30d375c921d7aa8b3b3fe90b1b9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4601325
Commit-Queue: Aaron Krajeski <aaronhk@chromium.org>
Reviewed-by: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1160109}
diff --git a/css/css-color/color-mix-currentcolor-nested-for-color-property-ref.html b/css/css-color/color-mix-currentcolor-nested-for-color-property-ref.html
new file mode 100644
index 0000000..0d2f49c
--- /dev/null
+++ b/css/css-color/color-mix-currentcolor-nested-for-color-property-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Reference: currentColor is inherited correctly with a nested color-mix() for the color attribute</title>
+<style>
+div {
+ color: color(srgb 0.5 0.75 0.75);
+}
+</style>
+<div>
+ <div>This text should be a light blue-green</div>
+</div>
diff --git a/css/css-color/color-mix-currentcolor-nested-for-color-property.html b/css/css-color/color-mix-currentcolor-nested-for-color-property.html
new file mode 100644
index 0000000..ddcce29
--- /dev/null
+++ b/css/css-color/color-mix-currentcolor-nested-for-color-property.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="match" href="color-mix-currentcolor-nested-for-color-property-ref.html">
+<title>currentColor is inherited correctly with a nested color-mix() for the color attribute</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix">
+<link rel="author" title="Aaron Krajeski" href="https://github.com/mysterydate">
+<style>
+body {
+ color: color(srgb 0 0 1);
+}
+div {
+ color: color-mix(in srgb, color-mix(in srgb, currentColor 50%, color(srgb 0 1 0)), white);
+}
+div > div {
+ color: inherit;
+}
+</style>
+<div>
+ <div>This text should be a light blue-green</div>
+</div>
