From 49a46a35fba880a51fc88f4f6bf39422bd9045d6 Mon Sep 17 00:00:00 2001
From: Kevin Ellis <kevers@google.com>
Date: Tue, 30 Jan 2024 06:40:46 -0800
Subject: [PATCH] Fix StyleColor::UnresolvedColorMix::operator==

Bug: 1522095
Change-Id: Ib9b41c8b865aeb72ac1881503639231faaf68c40
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5245748
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Aaron Krajeski <aaronhk@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1253884}
---
 .../background-color-transition-colormix.html | 53 +++++++++++++++++++
 1 file changed, 53 insertions(+)
 create mode 100644 css/css-backgrounds/animations/background-color-transition-colormix.html
diff --git a/css/css-backgrounds/animations/background-color-transition-colormix.html b/css/css-backgrounds/animations/background-color-transition-colormix.html
new file mode 100644
index 00000000000000..3c7fd634c689d9
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-transition-colormix.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<title>currentColor in nested color-mix() with transition</title>
+<link rel="help" href="https://drafts.csswg.org/css-color/#currentcolor-color">
+<style>
+    #parent {
+      color: white;
+      background-color:
+          color-mix(in srgb,
+                    color-mix(in srgb, black, currentColor),
+                    black);
+      height: 200px;
+      width: 200px;
+    }
+    #child {
+      background-color: inherit;
+      transition: background-color;
+      height: 100px;
+      width: 100px;
+    }
+</style>
+<div id="parent">
+  <div id="child"></div>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/web-animations/testcommon.js"></script>
+<script>
+async function runTest() {
+  promise_test(async t => {
+    await waitForNextFrame();
+    const child = document.getElementById('child');
+    const parent = document.getElementById('parent');
+    let parentBG = getComputedStyle(parent).backgroundColor;
+    let childBG = getComputedStyle(child).backgroundColor;
+
+    assert_equals(parentBG, "color(srgb 0.25 0.25 0.25)");
+    assert_equals(childBG, "color(srgb 0.25 0.25 0.25)");
+
+    // Style change triggers a CSS transition. Wait for the
+    // transition to start.
+    await waitForNextFrame();
+    child.style = 'color:black';
+    await Promise.all(document.getAnimations().map(a => a.ready));
+
+    parentBG = getComputedStyle(parent).backgroundColor;
+    childBG = getComputedStyle(child).backgroundColor;
+    assert_equals(parentBG, "color(srgb 0.25 0.25 0.25)");
+    assert_equals(childBG, "color(srgb 0 0 0)");
+  }, 'Transition with currentColor in color-mix');
+}
+window.onload = runTest();
+</script>
