1 files changed, 50 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-color/color-mix-basic-001-ref.html b/testing/web-platform/tests/css/css-color/color-mix-basic-001-ref.html
new file mode 100644
index 0000000000..7296d17fba
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/color-mix-basic-001-ref.html
@@ -0,0 +1,50 @@
+<!doctype html>
+<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
+<link rel="author" href="https://mozilla.org" title="Mozilla">
+<style>
+.ref { width: 14em; height: 1em; margin-top: 0; margin-bottom: 0;}
+</style>
+<body>
+<div id="ref"></div>
+<script>
+const TEST_CASES = [
+  ["blue", "red"],
+  ["blue", "green"],
+  ["rgb(255, 0, 0, .2)", "red"],
+  ["blue", "red", 0.9],
+  ["blue", "red", 0],
+  ["currentColor", "white"],
+  ["currentColor", "rgba(0, 0, 0, .5)"],
+];
+
+const refElement = document.getElementById("ref");
+const refStyle = getComputedStyle(refElement);
+
+let animation = null;
+
+for (let [from, to, animationProgress] of TEST_CASES) {
+  const animationProgressExplicit = animationProgress !== undefined;
+  animationProgress = animationProgressExplicit ? animationProgress : 0.5;
+  // Set up the ref.
+  if (animation) {
+    animation.cancel();
+  }
+  animation = refElement.animate({
+    backgroundColor: [from, to],
+  }, { duration: 1000 });
+  animation.pause();
+  animation.currentTime = 1000 * animationProgress;
+
+  let results = animationProgress == 0.5 ? 4 : 3;
+
+  for (let i = 0; i < results; ++i) {
+    let element = document.createElement("div")
+    element.classList.add('ref')
+    element.style.backgroundColor = refStyle.backgroundColor;
+    document.body.appendChild(element)
+  }
+}
+
+refElement.remove()
+</script>
+</body>