Add more test cases for nested color-mix with currentColor

asamuzaK · web-flow · commit cf5523ff9297 · 2026-03-31T12:33:04.000+09:00
Related to work in #4085 and #4119.
diff --git a/test/web-platform-tests/to-upstream-expectations.yaml b/test/web-platform-tests/to-upstream-expectations.yaml
@@ -2,6 +2,8 @@ css/css-borders/border-color.html: [fail, https://github.com/jsdom/jsdom/issues/
 css/css-borders/border-shorthands.html:
   "Computed value of border shorthand": [fail, Regression test for https://github.com/jsdom/jsdom/issues/3971]
 css/css-cascade/layers-basic.html: [fail, https://github.com/jsdom/jsdom/issues/3785]
+css/css-color/nested-color-mix-with-currentcolor.html:
+  "Nested color-mix function with inner currentColor should inherit unresolved; part2": [fail, Need getComputedStyle() fix]
 css/css-conditional/container-queries-basic.html: [fail, https://github.com/jsdom/jsdom/issues/3597]
 css/css-display/display-initial.html:
   "Revert value of display": [fail, Revert keyword is not supported]
diff --git a/test/web-platform-tests/to-upstream/css/css-color/nested-color-mix-with-currentcolor.html b/test/web-platform-tests/to-upstream/css/css-color/nested-color-mix-with-currentcolor.html
@@ -0,0 +1,43 @@
+<!doctype html>
+<title>CSS Color: Nested color-mix() with currentColor</title>
+<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix">
+<link rel="help" href="https://www.w3.org/TR/css-color-5/#resolving-color-values">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  #parent {
+    color: red;
+    background-color: color-mix(in lch, color-mix(in lch, black, currentColor), black);
+  }
+  #parent2 {
+    color: red;
+    background-color: color-mix(in srgb, color-mix(in srgb, black, currentColor), black);
+  }
+  #child {
+    color: black;
+    background-color: inherit;
+  }
+  #child2 {
+    color: white;
+    background-color: inherit;
+  }
+</style>
+<div id="parent">
+  <div id="child"></div>
+</div>
+<div id="parent2">
+  <div id="child2"></div>
+</div>
+<script>
+  "use strict";
+  const child = document.getElementById("child");
+  const child2 = document.getElementById("child2");
+
+  test(() => {
+    assert_equals(getComputedStyle(child).backgroundColor, "lch(0 0 none)");
+  }, "Nested color-mix function with inner currentColor should inherit unresolved");
+
+  test(() => {
+    assert_equals(getComputedStyle(child2).backgroundColor, "color(srgb 0.25 0.25 0.25)");
+  }, "Nested color-mix function with inner currentColor should inherit unresolved; part2");
+</script>
