Adding upstream version 126.0.upstream/126.0

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-05-15 03:34:42 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-05-15 03:34:42 +0000
commit: da4c7e7ed675c3bf405668739c3012d140856109 (patch)
tree: cdd868dba063fecba609a1d819de271f0d51b23e /testing/web-platform/tests/css/css-color
parent: Adding upstream version 125.0.3. (diff)
download: firefox-da4c7e7ed675c3bf405668739c3012d140856109.tar.xz
firefox-da4c7e7ed675c3bf405668739c3012d140856109.zip
32 files changed, 527 insertions, 254 deletions
diff --git a/testing/web-platform/tests/css/css-color/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-color/WEB_FEATURES.yml
new file mode 100644
index 0000000000..8910deab28
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/WEB_FEATURES.yml
@@ -0,0 +1,22 @@
+features:
+- name: color-function
+  files:
+  - a98rgb-*
+  - display-p3-*
+  - predefined-*
+  - prophoto-rgb-*
+  - rec2020-*
+  - srgb-*
+  - xyz-*
+- name: color-mix
+  files:
+  - color-mix-*
+  - nested-color-mix-with-currentcolor.html
+- name: lab
+  files:
+  - lab-*
+  - lch-*
+- name: oklab
+  files:
+  - oklab-*
+  - oklch-*
diff --git a/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow-ref.html b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow-ref.html
new file mode 100644
index 0000000000..7610a6f191
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<div style="position: absolute; width: 200px; height: 200px; background: rgb(255 255 128)"></div>
+<div style="position: absolute; width: 250px; height: 100px; background: rgb(128 128 255)"></div>
+<div style="position: absolute; width: 100px; height: 250px; background: rgb(128 192 128)"></div>
+</div>
diff --git a/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow.html b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow.html
new file mode 100644
index 0000000000..2ad0193806
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/clip-opacity-out-of-flow.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<link rel="help" href="https://drafts.csswg.org/css-color/#transparency">
+<link rel="help" href="https://drafts.csswg.org/css-position/#def-cb">
+<link rel="match" href="clip-opacity-out-of-flow-ref.html">
+<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-60000">
+<div style="overflow: hidden; width: 250px; height: 250px; will-change:transform">
+  <div style="overflow: hidden; width: 300px; height: 300px; transform: translateX(0)">
+    <div style="overflow: hidden; width: 200px; height: 200px">
+      <div style="width: 300px; height: 300px; background: red; opacity: 0.5">
+        <div style="width: 400px; height: 400px; background: yellow">
+        <!-- These out-of-flow positioned elements are not contained by the inner clip,
+             while the outer clip and the opacity still apply. The opacity should also
+             apply to all descendants as a single group. -->
+        <div style="position: absolute; width: 400px; height: 100px; background: blue"></div>
+        <div style="position: fixed; width: 100px; height: 400px; background: green"></div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html b/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html
index 287eba9824..be8833593d 100644
--- a/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html
+++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html
@@ -5,13 +5,16 @@
 <link rel="match" href="lab-l-over-100-ref.html">
 <meta name="assert" content="lab() with lightness greater than 100">
 <style>
-    .ref { background-color: lab(100 150 20); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: lab(100 150 20); height: 100px}
     /* l = 150 should clamp back to 100 */
-    .test { background-color: lab(150 150 20); width: 100px; height: 100px}
+    .test { background-color: lab(150 150 20); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html b/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html
index e85d289d21..20a9568094 100644
--- a/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html
+++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html
@@ -5,13 +5,16 @@
 <link rel="match" href="lab-l-over-100-ref.html">
 <meta name="assert" content="lab() with lightness greater than 100%">
 <style>
-    .ref { background-color: lab(100% 150 20); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: lab(100% 150 20); height: 100px}
     /* l = 150 should clamp back to 100 */
-    .test { background-color: lab(150% 150 20); width: 100px; height: 100px}
+    .test { background-color: lab(150% 150 20); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html b/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html
index 57328cfa7c..eccc492079 100644
--- a/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html
+++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html
@@ -2,10 +2,10 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title>
 <style>
-    .ref { background-color: lab(100 150 20); width: 100px; height: 200px}
+    .ref { background-color: lab(100 150 20); border: 1px solid black; width: 200px; height: 200px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
+    <p>Test passes if you see a square border with a single color inside.</p>
     <div class="ref"></div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html b/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html
index 6e0c62330c..12d594d1a3 100644
--- a/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html
+++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html
@@ -5,13 +5,16 @@
 <link rel="match" href="lch-l-over-100-ref.html">
 <meta name="assert" content="lch() with lightness greater than 100">
 <style>
-    .ref { background-color: lch(100 150 20); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: lch(100 150 20); height: 100px}
     /* l = 150 should clamp back to 100 */
-    .test { background-color: lch(150 150 20); width: 100px; height: 100px}
+    .test { background-color: lch(150 150 20); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html b/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html
index 7752d0dc0e..68789b9c85 100644
--- a/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html
+++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html
@@ -5,13 +5,16 @@
 <link rel="match" href="lch-l-over-100-ref.html">
 <meta name="assert" content="lch() with lightness graeter than 100%">
 <style>
-    .ref { background-color: lch(100% 150 20); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: lch(100% 150 20); height: 100px}
     /* l = 150% should clamp back to 100% */
-    .test { background-color: lch(150% 150 20); width: 100px; height: 100px}
+    .test { background-color: lch(150% 150 20); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html b/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html
index 67766274e5..291772e166 100644
--- a/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html
+++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html
@@ -2,11 +2,10 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Specifying LCH with lightness over 100</title>
 <style>
-    .ref { background-color: lch(100 150 20); width: 100px; height: 200px}
+    .ref { background-color: lch(100 150 20); border: 1px solid black; width: 200px; height: 200px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
+    <p>Test passes if you see a square border with a single color inside.</p>
     <div class="ref"></div>
-    <div class="test"></div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-0-ref.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-0-ref.html
new file mode 100644
index 0000000000..244321ea69
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-0-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+    .ref { background-color: oklab(0 0.15 0.15); border: 1px solid black; width: 200px; height: 200px; }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="ref"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-0.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-0.html
new file mode 100644
index 0000000000..e8cc1b9042
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-0.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch">
+<link rel="match" href="oklab-l-almost-0-ref.html">
+<meta name="assert" content="oklab() with lightness very close to 0 should render the same as 0">
+<style>
+    .square { border: 1px solid black; width: 200px; height: 200px; }
+    .test { background-color: red; height: 100px; }
+    /* Non-zero a/b is used to show if the result is black or not, but the
+     * test passes as long as it's the same color. */
+    .ref { background-color: oklab(0 0.15 0.15); height: 100px; }
+    .test { background-color: oklab(0.0001% 0.15 0.15); }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-1-ref.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-1-ref.html
new file mode 100644
index 0000000000..72cdf35447
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+    .ref { background-color: oklab(1 0.15 0.15); border: 1px solid black; width: 200px; height: 200px; }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="ref"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-almost-1.html b/testing/web-platform/tests/css/css-color/oklab-l-almost-1.html
new file mode 100644
index 0000000000..352e7b58aa
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklab-l-almost-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch">
+<link rel="match" href="oklab-l-almost-1-ref.html">
+<meta name="assert" content="oklab() with lightness very close to 1 should render the same as 1">
+<style>
+    .square { border: 1px solid black; width: 200px; height: 200px; }
+    .test { background-color: red; height: 100px; }
+    /* Non-zero a/b is used to show if the result is white or not, but the
+     * test passes as long as it's the same color. */
+    .ref { background-color: oklab(1 0.15 0.15); height: 100px; }
+    .test { background-color: oklab(99.9999% 0.15 0.15); }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html b/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html
index 612fe32acb..a16fe7886f 100644
--- a/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html
+++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html
@@ -5,13 +5,16 @@
 <link rel="match" href="oklab-l-over-1-ref.html">
 <meta name="assert" content="oklab() with lightness greater than 1">
 <style>
-    .ref { background-color: oklab(1 0.5 0.2); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: oklab(1 0.5 0.2); height: 100px}
     /* l = 1.5 should clamp back to 1 */
-    .test { background-color: oklab(1.5 0.5 0.2); width: 100px; height: 100px}
+    .test { background-color: oklab(1.5 0.5 0.2); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html b/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html
index 11948f014b..6300cb8af3 100644
--- a/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html
+++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html
@@ -5,13 +5,16 @@
 <link rel="match" href="oklab-l-over-1-ref.html">
 <meta name="assert" content="oklab() with lightness greater than 100%">
 <style>
-    .ref { background-color: oklab(100% 0.5 0.2); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: oklab(100% 0.5 0.2); height: 100px}
     /* l = 150 should clamp back to 100 */
-    .test { background-color: oklab(150% 0.5 0.2); width: 100px; height: 100px}
+    .test { background-color: oklab(150% 0.5 0.2); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html b/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html
index eb380dcb75..f050bbc643 100644
--- a/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html
+++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html
@@ -2,10 +2,10 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title>
 <style>
-    .ref { background-color: oklab(1 0.5 0.2); width: 100px; height: 200px}
+    .ref { background-color: oklab(1 0.5 0.2); border: 1px solid black; width: 200px; height: 200px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
+    <p>Test passes if you see a square border with a single color inside.</p>
     <div class="ref"></div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-0-ref.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-0-ref.html
new file mode 100644
index 0000000000..e019136f96
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-0-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+    .ref { background-color: oklch(0 0.2 45); border: 1px solid black; width: 200px; height: 200px; }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="ref"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-0.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-0.html
new file mode 100644
index 0000000000..c171befe64
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-0.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch">
+<link rel="match" href="oklch-l-almost-0-ref.html">
+<meta name="assert" content="oklch() with lightness very close to 0 should render the same as 0">
+<style>
+    .square { border: 1px solid black; width: 200px; height: 200px; }
+    .test { background-color: red; height: 100px; }
+    /* Non-zero chroma is used to show if the result is black or not, but the
+     * test passes as long as it's the same color. */
+    .ref { background-color: oklch(0 0.2 45); height: 100px; }
+    .test { background-color: oklch(0.0001% 0.2 45); }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-1-ref.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-1-ref.html
new file mode 100644
index 0000000000..e1f29eaa18
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-1-ref.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+    .ref { background-color: oklch(1 0.2 45); border: 1px solid black; width: 200px; height: 200px; }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="ref"></div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-almost-1.html b/testing/web-platform/tests/css/css-color/oklch-l-almost-1.html
new file mode 100644
index 0000000000..c98cea292f
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/oklch-l-almost-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Color 4: OKLab and OKLCH</title>
+<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch">
+<link rel="match" href="oklch-l-almost-1-ref.html">
+<meta name="assert" content="oklch() with lightness very close to 1 should render the same as 1">
+<style>
+    .square { border: 1px solid black; width: 200px; height: 200px; }
+    .test { background-color: red; height: 100px; }
+    /* Non-zero chroma is used to show if the result is white or not, but the
+     * test passes as long as it's the same color. */
+    .ref { background-color: oklch(1 0.2 45); height: 100px; }
+    .test { background-color: oklch(99.9999% 0.2 45); }
+</style>
+<body>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
+</body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html b/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html
index 4eb3cda846..c734723541 100644
--- a/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html
+++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html
@@ -5,13 +5,16 @@
 <link rel="match" href="oklch-l-over-1-ref.html">
 <meta name="assert" content="oklch() with lightness greater than 1">
 <style>
-    .ref { background-color: oklch(1 0.5 50); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: oklch(1 0.5 50); height: 100px}
     /* l = 1.5 should clamp back to 1 */
-    .test { background-color: oklch(1.5 0.5 50); width: 100px; height: 100px}
+    .test { background-color: oklch(1.5 0.5 50); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html b/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html
index de8b1a6cdd..59eac2b367 100644
--- a/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html
+++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html
@@ -5,13 +5,16 @@
 <link rel="match" href="oklch-l-over-1-ref.html">
 <meta name="assert" content="oklch() with lightness greater than 100%">
 <style>
-    .ref { background-color: oklch(100% 0.5 50); width: 100px; height: 100px}
+    .square { border: 1px solid black; width: 200px; height: 200px}
+    .ref { background-color: oklch(100% 0.5 50); height: 100px}
     /* l = 150% should clamp back to 100% */
-    .test { background-color: oklch(150% 0.5 50); width: 100px; height: 100px}
+    .test { background-color: oklch(150% 0.5 50); height: 100px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
-    <div class="ref"></div>
-    <div class="test"></div>
+    <p>Test passes if you see a square border with a single color inside.</p>
+    <div class="square">
+        <div class="ref"></div>
+        <div class="test"></div>
+    </div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html b/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html
index 2c7815c5f0..ae1b5e00e5 100644
--- a/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html
+++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html
@@ -2,10 +2,10 @@
 <meta charset="utf-8">
 <title>CSS Color 4: Verify lightness in Oklch is always clamped to a value between 0 to 1</title>
 <style>
-    .ref { background-color: oklch(1 0.5 50); width: 100px; height: 200px}
+    .ref { background-color: oklch(1 0.5 50); border: 1px solid black; width: 200px; height: 200px}
 </style>
 
 <body>
-    <p>Test passes if you see a single color.</p>
+    <p>Test passes if you see a square border with a single color inside.</p>
     <div class="ref"></div>
 </body>
diff --git a/testing/web-platform/tests/css/css-color/parsing/WEB_FEATURES.yml b/testing/web-platform/tests/css/css-color/parsing/WEB_FEATURES.yml
new file mode 100644
index 0000000000..cc8273c2ad
--- /dev/null
+++ b/testing/web-platform/tests/css/css-color/parsing/WEB_FEATURES.yml
@@ -0,0 +1,5 @@
+features:
+- name: color-mix
+  files:
+  - "*-color-mix-*"
+  - color-mix-out-of-gamut.html
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html
index b54aa0da12..88cb20e6eb 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html
@@ -42,8 +42,8 @@
     fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / 0), hsl(30deg 30% 40%))`, `color(srgb 0.46 0.52 0.28 / 0.5)`);
     fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / 0) 10%, hsl(30deg 30% 40%))`, `color(srgb 0.52 0.436 0.28 / 0.9)`);
 
-    fuzzy_test_computed_color(`color-mix(in hsl, white, blue)`, `color(srgb 0.62 0.62 0.87)`);
-    fuzzy_test_computed_color(`color-mix(in hsl, white 10%, blue)`, `color(srgb 0.15 0.15 0.96)`);
+    fuzzy_test_computed_color(`color-mix(in hsl, white, blue)`, `color(srgb 0.625 0.625 0.875)`);
+    fuzzy_test_computed_color(`color-mix(in hsl, white 10%, blue)`, `color(srgb 0.145 0.145 0.955)`);
 
     fuzzy_test_computed_color(`color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`);
     fuzzy_test_computed_color(`color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`);
@@ -421,8 +421,8 @@
     fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 0), oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.5)');
     fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 0) 10%, oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.9)');
 
-    fuzzy_test_computed_color(`color-mix(in oklab, white, blue)`, `oklab(0.73 -0.02 -0.16)`);
-    fuzzy_test_computed_color(`color-mix(in oklab, white 10%, blue)`, `oklab(0.51 -0.03 -0.28)`);
+    fuzzy_test_computed_color(`color-mix(in oklab, white, blue)`, `oklab(0.726 -0.016 -0.156)`);
+    fuzzy_test_computed_color(`color-mix(in oklab, white 10%, blue)`, `oklab(0.507 -0.029 -0.28)`);
 
     fuzzy_test_computed_color(`color-mix(in oklab, oklab(none none none), oklab(none none none))`, `oklab(none none none)`);
     fuzzy_test_computed_color(`color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `oklab(0.5 0.6 0.7)`);
@@ -441,7 +441,7 @@
     fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(none none none / 0.5))`, `oklab(0.1 0.2 0.3 / 0.5)`);
     fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(0.5 none none / 0.5))`, `oklab(0.5 0.2 0.3 / 0.5)`);
 
-    for (const colorSpace of [ "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+    for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
         const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
 
         fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.3 0.4 0.5)`);
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html
index 95c8eee226..ac2f9c87aa 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html
@@ -106,6 +106,10 @@
   fuzzy_test_computed_color(`rgb(from rgb(100 110 120 / 0.8) calc(r + 1) calc(g + 1) calc(b + 1) / calc(alpha + 0.01))`, `color(srgb 0.396 0.435 0.474 / 0.81)`); // rgb(101 111 121)
   fuzzy_test_computed_color(`rgb(from rebeccapurple calc((r / 255) * 100%) calc((g / 255) * 100%) calc((b / 255) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`rgb(from rgb(from rebeccapurple r g b / calc(alpha + 0.5)) r g b / calc(alpha - 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`);
+  fuzzy_test_computed_color(`rgb(from rgb(from rebeccapurple r g b / calc(alpha - 1.5)) r g b / calc(alpha + 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`);
+
   // Testing with 'none'. Missing components are resolved to zero during color space conversion.
   // https://drafts.csswg.org/css-color-4/#missing
   fuzzy_test_computed_color(`rgb(from rebeccapurple none none none)`, `color(srgb 0 0 0)`);
@@ -119,6 +123,7 @@
   fuzzy_test_computed_color(`rgb(from rgb(none none none / none) r g b / alpha)`, `color(srgb 0 0 0 / 0)`);
   fuzzy_test_computed_color(`rgb(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`);
   fuzzy_test_computed_color(`rgb(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`);
+  fuzzy_test_computed_color(`color-mix(in srgb, rgb(from rebeccapurple none g b), rebeccapurple)`, `color(srgb 0.4 0.2 0.6)`);
 
   // color-mix
   fuzzy_test_computed_color(`rgb(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`);
@@ -165,20 +170,24 @@
 
   // Testing valid permutation (types match).
   fuzzy_test_computed_color(`hsl(from rebeccapurple h l s)`, `color(srgb 0.5 0.3 0.7)`);
-  fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0 0.8 / 0.5)`);
-  fuzzy_test_computed_color(`hsl(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56 / 0.4)`);
-  fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 1 1 1)`);
+  fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0.396 0.404)`);
+  fuzzy_test_computed_color(`hsl(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56)`);
+  fuzzy_test_computed_color(`hsl(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01)`);
   fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l s)`, `color(srgb 0.3 0.5 0.7 / 0.8)`);
-  fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.08 0.4 0.72 / 0.5)`);
-  fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56 / 0.4)`);
-  fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.64 0.8 0.96 / 0.8)`);
+  fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.397 0.4 0.403)`);
+  fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56)`);
+  fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01 / 0.8)`);
 
   // Testing with calc().
   fuzzy_test_computed_color(`hsl(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`);
   fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
-  fuzzy_test_computed_color(`hsl(from hsl(20 30 40 / 0.8) calc(h + 1) calc(s + 1) calc(l + 1) / calc(alpha + 0.01))`, `color(srgb 0.54 0.37 0.28 / 0.81)`); // hsl(21 31 41)
+  fuzzy_test_computed_color(`hsl(from hsl(20 30 40 / 0.8) calc(h + 1) calc(s + 1) calc(l + 1) / calc(alpha + 0.01))`, `color(srgb 0.537 0.372 0.283 / 0.81)`); // hsl(21 31 41)
   fuzzy_test_computed_color(`hsl(from rebeccapurple calc((h / 360) * 360deg) calc((s / 100) * 100%) calc((l / 100) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`hsl(from hsl(from rebeccapurple h s l / calc(alpha + 0.5)) h s l / calc(alpha - 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`);
+  fuzzy_test_computed_color(`hsl(from hsl(from rebeccapurple h s l / calc(alpha - 1.5)) h s l / calc(alpha + 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`);
+
   // Testing with 'none'. Missing components are resolved to zero during color space conversion.
   // https://drafts.csswg.org/css-color-4/#missing
   fuzzy_test_computed_color(`hsl(from rebeccapurple none none none)`, `color(srgb 0 0 0)`);
@@ -195,6 +204,7 @@
   fuzzy_test_computed_color(`hsl(from hsl(120deg none 50% / .5) h s l)`, `color(srgb 0.5 0.5 0.5 / 0.5)`);
   fuzzy_test_computed_color(`hsl(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`);
   fuzzy_test_computed_color(`hsl(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`);
+  fuzzy_test_computed_color(`color-mix(in hsl, hsl(from rebeccapurple none s l), rebeccapurple)`, `color(srgb 0.4 0.2 0.6)`);
 
   // color-mix
   fuzzy_test_computed_color(`hsl(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`);
@@ -240,13 +250,13 @@
 
   // Testing valid permutation (types match).
   fuzzy_test_computed_color(`hwb(from rebeccapurple h b w)`, `color(srgb 0.6 0.4 0.8)`);
-  fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.8333 0.8333 0.8333 / 0.4)`);
-  fuzzy_test_computed_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8 / 0.2)`);
-  fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5)`);
+  fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.405 0.01 0.8)`);
+  fuzzy_test_computed_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8)`);
+  fuzzy_test_computed_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.01 0.99)`);
   fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h b w)`, `color(srgb 0.4 0.6 0.8 / 0.8)`);
-  fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.8 0.8 0.8 / 0.4)`);
-  fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8 / 0.2)`);
-  fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5 / 0.8)`);
+  fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.01 0.404 0.8)`);
+  fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8)`);
+  fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.5 0.992 / 0.8)`);
 
   // Testing with calc().
   fuzzy_test_computed_color(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `color(srgb 0.4 0.2 0.6)`);
@@ -254,6 +264,10 @@
   fuzzy_test_computed_color(`hwb(from hwb(20 30 40 / 0.8) calc(h + 1) calc(w + 1) calc(b + 1) / calc(alpha + 0.01))`, `color(srgb 0.59 0.41 0.31 / 0.81)`); // hwb(21 31 41)
   fuzzy_test_computed_color(`hwb(from rebeccapurple calc((h / 360) * 360deg) calc((w / 100) * 100%) calc((b / 100) * 100%) / calc(alpha * 100%))`, `color(srgb 0.4 0.2 0.6)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`hwb(from hwb(from rebeccapurple h w b / calc(alpha + 0.5)) h w b / calc(alpha - 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`);
+  fuzzy_test_computed_color(`hwb(from hwb(from rebeccapurple h w b / calc(alpha - 1.5)) h w b / calc(alpha + 0.5))`, `color(srgb 0.4 0.2 0.6 / 0.5)`);
+
   // Testing with 'none'. Missing components are resolved to zero during color space conversion.
   // https://drafts.csswg.org/css-color-4/#missing
   fuzzy_test_computed_color(`hwb(from rebeccapurple none none none)`, `color(srgb 1 0 0)`);
@@ -270,6 +284,7 @@
   fuzzy_test_computed_color(`hwb(from hwb(120deg none 50% / .5) h w b)`, `color(srgb 0 0.5 0 / 0.5)`);
   fuzzy_test_computed_color(`hwb(from hwb(120deg 20% 50% / none) h w b / alpha)`, `color(srgb 0.2 0.5 0.2 / 0)`);
   fuzzy_test_computed_color(`hwb(from hwb(none 20% 50% / .5) h w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`);
+  fuzzy_test_computed_color(`color-mix(in hwb, hwb(from rebeccapurple none w b), rebeccapurple)`, `color(srgb 0.4 0.2 0.6)`);
 
   // color-mix
   fuzzy_test_computed_color(`hwb(from color-mix(in srgb, red, red) h w b / alpha)`, `color(srgb 1 0 0)`);
@@ -325,6 +340,10 @@
   fuzzy_test_computed_color(`lab(from lab(50 5 10 / 0.8) calc(l + 1) calc(a + 1) calc(b + 1) / calc(alpha + 0.01))`, `lab(51 6 11 / 0.81)`);
   fuzzy_test_computed_color(`lab(from lab(25 20 50) calc((l / 100) * 100%) calc((a / 125) * 100%) calc((b / 125) * 100%) / calc(alpha * 100%))`, `lab(25 20 50)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`lab(from lab(from lab(25 20 50) l a b / calc(alpha + 0.5)) l a b / calc(alpha - 0.5))`, `lab(25 20 50 / 0.5)`);
+  fuzzy_test_computed_color(`lab(from lab(from lab(25 20 50) l a b / calc(alpha - 1.5)) l a b / calc(alpha + 0.5))`, `lab(25 20 50 / 0.5)`);
+
   // Testing with 'none'.
   fuzzy_test_computed_color(`lab(from lab(25 20 50) none none none)`, `lab(none none none)`);
   fuzzy_test_computed_color(`lab(from lab(25 20 50) none none none / none)`, `lab(none none none / none)`);
@@ -338,6 +357,7 @@
   fuzzy_test_computed_color(`lab(from lab(none none none / none) l a b / alpha)`, `lab(0 0 0 / 0)`);
   fuzzy_test_computed_color(`lab(from lab(25 none 50) l a b)`, `lab(25 0 50)`);
   fuzzy_test_computed_color(`lab(from lab(25 20 50 / none) l a b / alpha)`, `lab(25 20 50 / 0)`);
+  fuzzy_test_computed_color(`color-mix(in lab, lab(from lab(25 20 50) none a b), lab(25 20 50))`, `lab(25 20 50)`);
 
   // color-mix
   fuzzy_test_computed_color(`lab(from color-mix(in lab, lab(25 20 50), lab(25 20 50)) l a b / alpha)`, `lab(25 20 50)`);
@@ -393,6 +413,10 @@
   fuzzy_test_computed_color(`oklab(from oklab(0.5 .05 0.1 / 0.8) calc(l + 0.01) calc(a + 0.01) calc(b + 0.01) / calc(alpha + 0.01))`, `oklab(0.51 .06 0.11 / 0.81)`);
   fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) calc(l * 100%) calc((a / 0.4) * 100%) calc((b / 0.4) * 100%) / calc(alpha * 100%))`, `oklab(0.25 0.2 0.5)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`oklab(from oklab(from oklab(0.25 0.2 0.5) l a b / calc(alpha + 0.5)) l a b / calc(alpha - 0.5))`, `oklab(0.25 0.2 0.5 / 0.5)`);
+  fuzzy_test_computed_color(`oklab(from oklab(from oklab(0.25 0.2 0.5) l a b / calc(alpha - 1.5)) l a b / calc(alpha + 0.5))`, `oklab(0.25 0.2 0.5 / 0.5)`);
+
   // Testing with 'none'.
   fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) none none none)`, `oklab(none none none)`);
   fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) none none none / none)`, `oklab(none none none / none)`);
@@ -406,6 +430,7 @@
   fuzzy_test_computed_color(`oklab(from oklab(none none none / none) l a b / alpha)`, `oklab(0 0 0 / 0)`);
   fuzzy_test_computed_color(`oklab(from oklab(0.25 none 0.5) l a b)`, `oklab(0.25 0 0.5)`);
   fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / none) l a b / alpha)`, `oklab(0.25 0.2 0.5 / 0)`);
+  fuzzy_test_computed_color(`color-mix(in oklab, oklab(from oklab(0.25 0.2 0.5) none a b), oklab(0.25 0.2 0.5))`, `oklab(0.25 0.2 0.5)`);
 
   // color-mix
   fuzzy_test_computed_color(`oklab(from color-mix(in oklab, oklab(0.25 0.2 0.5), oklab(0.25 0.2 0.5)) l a b / alpha)`, `oklab(0.25 0.2 0.5)`);
@@ -469,6 +494,10 @@
   fuzzy_test_computed_color(`lch(from lch(50 5 10 / 0.8) calc(l + 1) calc(c + 1) calc(h + 1) / calc(alpha + 0.01))`, `lch(51 6 11 / 0.81)`);
   fuzzy_test_computed_color(`lch(from lch(0.7 45 30) calc((l / 100) * 100%) calc((c / 150) * 100%) calc((h / 360) * 360deg) / calc(alpha * 100%))`, `lch(0.7 45 30)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`lch(from lch(from lch(0.7 45 30) l c h / calc(alpha + 0.5)) l c h / calc(alpha - 0.5))`, `lch(0.7 45 30 / 0.5)`);
+  fuzzy_test_computed_color(`lch(from lch(from lch(0.7 45 30) l c h / calc(alpha - 1.5)) l c h / calc(alpha + 0.5))`, `lch(0.7 45 30 / 0.5)`);
+
   // Testing with 'none'.
   fuzzy_test_computed_color(`lch(from lch(0.7 45 30) none none none)`,                                   `lch(none none none)`);
   fuzzy_test_computed_color(`lch(from lch(0.7 45 30) none none none / none)`,                            `lch(none none none / none)`);
@@ -482,6 +511,7 @@
   fuzzy_test_computed_color(`lch(from lch(none none none / none) l c h / alpha)`,                        `lch(0 0 0 / 0)`);
   fuzzy_test_computed_color(`lch(from lch(0.7 none 30) l c h)`,                                          `lch(0.7 0 30)`);
   fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / none) l c h / alpha)`,                             `lch(0.7 45 30 / 0)`);
+  fuzzy_test_computed_color(`color-mix(in lch, lch(from lch(0.7 45 30) l c none), lch(0.7 45 30))`,      `lch(0.7 45 30)`);
 
   // color-mix
   fuzzy_test_computed_color(`lch(from color-mix(in lch, lch(70 45 30), lch(70 45 30)) l c h / alpha)`, `lch(70 45 30)`);
@@ -546,6 +576,10 @@
   fuzzy_test_computed_color(`oklch(from oklch(0.5 .05 0.1 / 0.8) calc(l + 0.01) calc(c + 0.01) calc(h + 0.01) / calc(alpha + 0.01))`, `oklch(0.51 .06 0.11 / 0.81)`);
   fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) calc(l * 100%) calc((c / 0.4) * 100%) calc((h / 360) * 360deg) / calc(alpha * 100%))`, `oklch(0.7 0.45 30)`);
 
+  // Alpha is clamped to [0,1]
+  fuzzy_test_computed_color(`oklch(from oklch(from oklch(0.7 0.45 30) l c h / calc(alpha + 0.5)) l c h / calc(alpha - 0.5))`, `oklch(0.7 0.45 30 / 0.5)`);
+  fuzzy_test_computed_color(`oklch(from oklch(from oklch(0.7 0.45 30) l c h / calc(alpha - 1.5)) l c h / calc(alpha + 0.5))`, `oklch(0.7 0.45 30 / 0.5)`);
+
   // Testing with 'none'.
   fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) none none none)`,                                   `oklch(none none none)`);
   fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) none none none / none)`,                            `oklch(none none none / none)`);
@@ -559,6 +593,7 @@
   fuzzy_test_computed_color(`oklch(from oklch(none none none / none) l c h / alpha)`,                        `oklch(0 0 0 / 0)`);
   fuzzy_test_computed_color(`oklch(from oklch(0.7 none 30) l c h)`,                                          `oklch(0.7 0 30)`);
   fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / none) l c h / alpha)`,                             `oklch(0.7 0.45 30 / 0)`);
+  fuzzy_test_computed_color(`color-mix(in oklch, oklch(from oklch(0.7 0.45 30) l c none), oklch(0.7 0.45 30))`, `oklch(0.7 0.45 30)`);
 
   // color-mix
   fuzzy_test_computed_color(`oklch(from color-mix(in oklch, oklch(0.7 0.45 30), oklch(0.7 0.45 30)) l c h / alpha)`, `oklch(0.7 0.45 30)`);
@@ -637,6 +672,10 @@
       fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 0.8) ${colorSpace} calc(r + 0.01) calc(g + 0.01) calc(b + 0.01) / calc(alpha + 0.01))`,  `color(${colorSpace} 0.71 0.51 0.31 / 0.81)`);
       fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r * 100%) calc(g * 100%) calc(b * 100%) / calc(alpha * 100%))`, `color(${colorSpace} 0.7 0.5 0.3)`);
 
+      // Alpha is clamped to [0,1]
+      fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / calc(alpha + 0.5)) ${colorSpace} r g b / calc(alpha - 0.5))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.5)`);
+      fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / calc(alpha - 1.5)) ${colorSpace} r g b / calc(alpha + 0.5))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.5)`);
+
       // Testing with 'none'.
       fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none)`,                     `color(${colorSpace} none none none)`);
       fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none / none)`,              `color(${colorSpace} none none none / none)`);
@@ -702,6 +741,10 @@
       fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 0.8) ${colorSpace} calc(x + 1) calc(y + 1) calc(z + 1) / calc(alpha + 0.01))`, `color(${resultColorSpace} 8 -19.5 101 / 0.81)`);
       fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x * 100%) calc(y * 100%) calc(z * 100%) / calc(alpha * 100%))`, `color(${resultColorSpace} 7 -20.5 100)`);
 
+      // Alpha is clamped to [0,1]
+      fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / calc(alpha + 0.5)) ${colorSpace} x y z / calc(alpha - 0.5))`, `color(${resultColorSpace} 7 -20.5 100 / 0.5)`);
+      fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / calc(alpha - 1.5)) ${colorSpace} x y z / calc(alpha + 0.5))`, `color(${resultColorSpace} 7 -20.5 100 / 0.5)`);
+
       // Testing with 'none'.
       fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none)`,                     `color(${resultColorSpace} none none none)`);
       fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none / none)`,              `color(${resultColorSpace} none none none / none)`);
@@ -744,6 +787,26 @@
   fuzzy_test_computed_color(`oklch(from color(srgb 0.25 0.5 0.75) l c h)`, `oklch(0.585502 0.118254 250.546)`, 0.02); // Larger values means larger epsilon.
   fuzzy_test_computed_color(`color(from oklch(72.322% 0.12403 247.996) srgb r g b)`, `color(srgb 0.382631 0.672756 0.938904)`, 0.001);
 
+  // Test that conversion are relatively lossless.
+  for (const colorSpace of ["xyz-d50", "xyz-d65"]) {
+    fuzzy_test_computed_color(`color(from rgb(from color(${colorSpace} 0.99 0.88 0.77) r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from hsl(from color(${colorSpace} 0.99 0.88 0.77) h s l) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from hwb(from color(${colorSpace} 0.99 0.88 0.77) h w b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from lab(from color(${colorSpace} 0.99 0.88 0.77) l a b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from lch(from color(${colorSpace} 0.99 0.88 0.77) l c h) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from oklab(from color(${colorSpace} 0.99 0.88 0.77) l a b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from oklch(from color(${colorSpace} 0.99 0.88 0.77) l c h) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) srgb r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) srgb-linear r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) display-p3 r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) a98-rgb r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) prophoto-rgb r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) rec2020 r g b) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) xyz x y z) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) xyz-d50 x y z) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+    fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.99 0.88 0.77) xyz-d65 x y z) ${colorSpace} x y z)`, `color(${colorSpace} 0.99 0.88 0.77)`, 0.0001);
+  }
+
   // Spec Examples: https://www.w3.org/TR/css-color-5/#relative-colors
   // All examples here have multiple stages of calculations so minor disagreements in the values of keyword colors and other constants can compound.
   // These tests require a wider epsilon of 0.02.
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html
index 5a39d42c2d..e02fb44fcb 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html
@@ -12,7 +12,10 @@
 </head>
 <body>
 <script>
-for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) {
+const RGB_SPACES = ["srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb"];
+const XYZ_SPACES = ["xyz", "xyz-d50", "xyz-d65"];
+
+for (const colorSpace of RGB_SPACES) {
     test_invalid_value("color", `color(${colorSpace} 0 0 0 0)`);
     test_invalid_value("color", `color(${colorSpace} 0deg 0% 0)`);
     test_invalid_value("color", `color(${colorSpace} 0% 0 0 1)`);
@@ -29,7 +32,7 @@ for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophot
     test_invalid_value("color", `color(${colorSpace} / 0.5)`);
 }
 
-for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) {
+for (const colorSpace of XYZ_SPACES) {
     test_invalid_value("color", `color(${colorSpace} 0 0 0 0)`);
     test_invalid_value("color", `color(${colorSpace} 0deg 0% 0)`);
     test_invalid_value("color", `color(${colorSpace} 0% 0 0 1)`);
@@ -52,12 +55,17 @@ test_invalid_value("color", "color(displayp3 1 1 1)");  // Bad Display P3 color
 test_invalid_value("color", "color(1 1 1)");  // No color space
 test_invalid_value("color", "color(srgb 1 1)");  // One missing component
 test_invalid_value("color", "color(srgb 1)");  // Two missing components
+test_invalid_value("color", "color(srgb 0, 0, 0)");  // Commas as separators
 
 test_invalid_value("color", "color(srgb 1 1 1 1)");  // Too many parameters
 test_invalid_value("color", "color(srgb 1 1 1 1 1)");  // Way too many parameters
 test_invalid_value("color", "color(srgb 1 eggs 1)");  // Bad parameters
 test_invalid_value("color", "color(srgb 1 1 1 / bacon)");  // Bad alpha
 test_invalid_value("color", "color(srgb 1 1 1 / 1 cucumber)");  // Junk after alpha
+
+for (const colorSpace of [...RGB_SPACES, ...XYZ_SPACES]) {
+    test_invalid_value("color", `${colorSpace}(0 0 0)`);
+}
 </script>
 </body>
 </html>
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html
index 40299644bf..2f815f8140 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html
@@ -74,7 +74,7 @@
         test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing interpolation method.
     }
 
-    for (const colorSpace of [ "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+    for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) -10%, color(${colorSpace} .5 .6 .7))`); // Percentages less than 0 are not valid.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 150%, color(${colorSpace} .5 .6 .7))`); // Percentages greater than 100 are not valid.
         test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7) 0%)`); // Sum of percengates cannot be 0%.
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html
index 2cb3a25291..c6f1370abd 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html
@@ -28,13 +28,15 @@
     test_invalid_value(`color`, `rgb(from rebeccapurple l g b)`);
     test_invalid_value(`color`, `rgb(from rebeccapurple h g b)`);
 
-    // Testing invalid function name variation (only rgb() is valid, rgba() is invalid)
-    test_invalid_value(`color`, `rgba(from rebeccapurple r g b)`);
-    test_invalid_value(`color`, `rgba(from rgb(10%, 20%, 30%, 40%) r g b / alpha)`);
+    // Testing invalid separator
+    test_invalid_value(`color`, `rgb(from rebeccapurple, r, g, b)`);
+    test_invalid_value(`color`, `rgba(from rgb(10%, 20%, 30%, 40%), r, g, b, alpha)`);
 
     // Testing with calc().
     test_invalid_value(`color`, `rgb(from rebeccapurple calc(r + 1%) g b)`);
 
+    // Using a channel keyword without being a relative color.
+    test_invalid_value(`color`, `rgb(0 0 0 / alpha)`);
 
     // hsl(from ...)
 
@@ -47,9 +49,9 @@
     test_invalid_value(`color`, `hsl(from rebeccapurple x s l)`);
     test_invalid_value(`color`, `hsl(from rebeccapurple h g b)`);
 
-    // Testing invalid function name variation (only hsl() is valid, hsla() is invalid)
-    test_invalid_value(`color`, `hsla(from rebeccapurple h s l)`);
-    test_invalid_value(`color`, `hsla(from rgb(10%, 20%, 30%, 40%) h s l / alpha)`);
+    // Testing invalid separator
+    test_invalid_value(`color`, `hsl(from rebeccapurple, h, s, l)`);
+    test_invalid_value(`color`, `hsla(from rgb(10%, 20%, 30%, 40%), h, s, l, alpha)`);
 
     // Testing with calc().
     test_invalid_value(`color`, `hsl(from rebeccapurple calc(h + 1deg) s l)`);
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html
index 90dd082f2a..08d4c6735a 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html
@@ -22,6 +22,8 @@ tests = [
     ["rgb(10%, 50%, 0)", "Values must be all numbers or all percentages"],
     ["rgb(255, 50%, 0%)", "Values must be all numbers or all percentages"],
     ["rgb(0, 0 0)", "Comma optional syntax requires no commas at all"],
+    ["rgb(,0, 0, 0)", "Leading commas are invalid"],
+    ["rgb(0, 0,, 0)", "Double commas are invalid"],
     ["rgb(0, 0, 0deg)", "Angles are not accepted in the rgb function"],
     ["rgb(0, 0, light)", "Keywords are not accepted in the rgb function"],
     ["rgb()", "The rgb function requires 3 or 4 arguments"],
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html
index f11ecc8e47..cd1f381a1a 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html
@@ -380,7 +380,7 @@
     test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 0.5))`);
     test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / none))`);
 
-  for (const colorSpace of [ "srgb", "srgb-linear", "xyz", "xyz-d50", "xyz-d65" ]) {
+  for (const colorSpace of [ "srgb", "srgb-linear", "display-p3", "a98-rgb", "prophoto-rgb", "rec2020", "xyz", "xyz-d50", "xyz-d65" ]) {
       const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace;
 
       test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 0.7))`);
diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html
index 5f83f0f074..eb730b51c5 100644
--- a/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html
+++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html
@@ -24,185 +24,189 @@
 <body>
 <script>
     // rgb(from ...)
+    for (const rgbFunction of ["rgb", "rgba"]) {
 
-    // Testing no modifications.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g b)`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / alpha)`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from hsl(120deg 20% 50% / .5) r g b / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`);
+        // Testing no modifications.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b)`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / alpha)`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from hsl(120deg 20% 50% / .5) r g b / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`);
 
-    // Test nesting relative colors.
-    fuzzy_test_valid_color(`rgb(from rgb(from rebeccapurple r g b) r g b)`, `color(srgb 0.4 0.2 0.6)`);
+        // Test nesting relative colors.
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(from rebeccapurple r g b) r g b)`, `color(srgb 0.4 0.2 0.6)`);
 
-    // Testing replacement with 0.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 0 0 0)`, `color(srgb 0 0 0)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 0 0 0 / 0)`, `color(srgb 0 0 0 / 0)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 0 g b / alpha)`, `color(srgb 0 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r 0 b / alpha)`, `color(srgb 0.4 0 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g 0 / alpha)`, `color(srgb 0.4 0.2 0)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)`, `color(srgb 0 0.4 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)`, `color(srgb 0.2 0 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)`, `color(srgb 0.2 0.4 0 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`);
-
-    // Testing replacement with a number.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 25 g b / alpha)`, `color(srgb 0.098 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r 25 b / alpha)`, `color(srgb 0.4 0.098 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g 25 / alpha)`, `color(srgb 0.4 0.2 0.098)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)`, `color(srgb 0.098 0.4 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)`, `color(srgb 0.2 0.098 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)`, `color(srgb 0.2 0.4 0.098 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / .20)`, `color(srgb 0.2 0.4 0.6 / 0.2)`);
-
-    // Testing replacement with a percentage.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 20% g b / alpha)`, `color(srgb 0.2 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g 20% / alpha)`, `color(srgb 0.4 0.2 0.2)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / 20%)`, `color(srgb 0.4 0.2 0.6 / 0.2)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)`, `color(srgb 0.2 0.2 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)`, `color(srgb 0.2 0.4 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / 20%)`, `color(srgb 0.2 0.4 0.6 / 0.2)`);
-
-    // Testing replacement with a number for r, g, b but percent for alpha.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 25 g b / 25%)`, `color(srgb 0.098 0.2 0.6 / 0.25)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r 25 b / 25%)`, `color(srgb 0.4 0.098 0.6 / 0.25)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g 25 / 25%)`, `color(srgb 0.4 0.2 0.098 / 0.25)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)`, `color(srgb 0.098 0.4 0.6 / 0.25)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)`, `color(srgb 0.2 0.098 0.6 / 0.25)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / 25%)`, `color(srgb 0.2 0.4 0.098 / 0.25)`);
-
-    // Testing permutation.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple g b r)`, `color(srgb 0.2 0.6 0.4)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple b alpha r / g)`, `color(srgb 0.6 1 0.4 / 0.2)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r r r / r)`, `color(srgb 0.4 0.4 0.4 / 0.4)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple alpha alpha alpha / alpha)`, `color(srgb 1 1 1)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) g b r)`, `color(srgb 0.4 0.6 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) b alpha r / g)`, `color(srgb 0.6 0.8 0.2 / 0.4)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r r r / r)`, `color(srgb 0.2 0.2 0.2 / 0.2)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)`, `color(srgb 0.8 0.8 0.8 / 0.8)`);
-
-    // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax).
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r 20% 10)`, `color(srgb 0.4 0.2 0.0392)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r 10 20%)`, `color(srgb 0.4 0.0392 0.2)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple 0% 10 10)`, `color(srgb 0 0.0392 0.0392)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 20% 10)`, `color(srgb 0.2 0.2 0.0392 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 10 20%)`, `color(srgb 0.2 0.0392 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) 0% 10 10)`, `color(srgb 0 0.0392 0.0392 / 0.8)`);
-
-    // r    g    b
-    // 102  51   153
-    // 40%  20%  60%
-    // Testing with calc().
-    fuzzy_test_valid_color(`rgb(from rebeccapurple calc(r) calc(g) calc(b))`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r calc(g * 2) 10)`, `color(srgb 0.4 0.4 0.0392)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple b calc(r * .5) 10)`, `color(srgb 0.6 0.2 0.0392)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r calc(g * .5 + g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
+        // Testing replacement with 0.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0 0 0)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0 0 0 / 0)`, `color(srgb 0 0 0 / 0)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0 g b / alpha)`, `color(srgb 0 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 0 b / alpha)`, `color(srgb 0.4 0 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 0 / alpha)`, `color(srgb 0.4 0.2 0)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)`, `color(srgb 0 0.4 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)`, `color(srgb 0.2 0 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)`, `color(srgb 0.2 0.4 0 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`);
+
+        // Testing replacement with a number.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 25 g b / alpha)`, `color(srgb 0.098 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 25 b / alpha)`, `color(srgb 0.4 0.098 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 25 / alpha)`, `color(srgb 0.4 0.2 0.098)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)`, `color(srgb 0.098 0.4 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)`, `color(srgb 0.2 0.098 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)`, `color(srgb 0.2 0.4 0.098 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / .20)`, `color(srgb 0.2 0.4 0.6 / 0.2)`);
+
+        // Testing replacement with a percentage.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 20% g b / alpha)`, `color(srgb 0.2 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 20% / alpha)`, `color(srgb 0.4 0.2 0.2)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / 20%)`, `color(srgb 0.4 0.2 0.6 / 0.2)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)`, `color(srgb 0.2 0.2 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)`, `color(srgb 0.2 0.4 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g b / 20%)`, `color(srgb 0.2 0.4 0.6 / 0.2)`);
+
+        // Testing replacement with a number for r, g, b but percent for alpha.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 25 g b / 25%)`, `color(srgb 0.098 0.2 0.6 / 0.25)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 25 b / 25%)`, `color(srgb 0.4 0.098 0.6 / 0.25)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g 25 / 25%)`, `color(srgb 0.4 0.2 0.098 / 0.25)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)`, `color(srgb 0.098 0.4 0.6 / 0.25)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)`, `color(srgb 0.2 0.098 0.6 / 0.25)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r g 25 / 25%)`, `color(srgb 0.2 0.4 0.098 / 0.25)`);
+
+        // Testing permutation.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple g b r)`, `color(srgb 0.2 0.6 0.4)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple b alpha r / g)`, `color(srgb 0.6 0.004 0.4)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r r r / r)`, `color(srgb 0.4 0.4 0.4)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple alpha alpha alpha / alpha)`, `color(srgb 0.004 0.004 0.004)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) g b r)`, `color(srgb 0.4 0.6 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) b alpha r / g)`, `color(srgb 0.6 0.003 0.2)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r r r / r)`, `color(srgb 0.2 0.2 0.2)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)`, `color(srgb 0.003 0.003 0.003 / 0.8)`);
+
+        // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax).
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 20% 10)`, `color(srgb 0.4 0.2 0.0392)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r 10 20%)`, `color(srgb 0.4 0.0392 0.2)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple 0% 10 10)`, `color(srgb 0 0.0392 0.0392)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 20% 10)`, `color(srgb 0.2 0.2 0.0392 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) r 10 20%)`, `color(srgb 0.2 0.0392 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) 0% 10 10)`, `color(srgb 0 0.0392 0.0392 / 0.8)`);
+
+        // r    g    b
+        // 102  51   153
+        // 40%  20%  60%
+        // Testing with calc().
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple calc(r) calc(g) calc(b))`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r calc(g * 2) 10)`, `color(srgb 0.4 0.4 0.0392)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple b calc(r * .5) 10)`, `color(srgb 0.6 0.2 0.0392)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r calc(g * .5 + g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20%, 40%, 60%, 80%) calc(r) calc(g) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
 
-    // Testing with 'none'.
-    fuzzy_test_valid_color(`rgb(from rebeccapurple none none none)`, `color(srgb none none none)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g none)`, `color(srgb 0.4 0.2 none)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g none / alpha)`, `color(srgb 0.4 0.2 none)`);
-    fuzzy_test_valid_color(`rgb(from rebeccapurple r g b / none)`, `color(srgb 0.4 0.2 0.6 / none)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20% 40% 60% / 80%) r g none / alpha)`, `color(srgb 0.2 0.4 none / 0.8)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20% 40% 60% / 80%) r g b / none)`, `color(srgb 0.2 0.4 0.6 / none)`);
-    // FIXME: Clarify with spec editors if 'none' should pass through to the constants.
-    fuzzy_test_valid_color(`rgb(from rgb(none none none) r g b)`, `color(srgb 0 0 0)`);
-    fuzzy_test_valid_color(`rgb(from rgb(none none none / none) r g b / alpha)`, `color(srgb 0 0 0 / 0)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`);
-    fuzzy_test_valid_color(`rgb(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`);
+        // Testing with 'none'.
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple none none none)`, `color(srgb none none none)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g none)`, `color(srgb 0.4 0.2 none)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g none / alpha)`, `color(srgb 0.4 0.2 none)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rebeccapurple r g b / none)`, `color(srgb 0.4 0.2 0.6 / none)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% 40% 60% / 80%) r g none / alpha)`, `color(srgb 0.2 0.4 none / 0.8)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% 40% 60% / 80%) r g b / none)`, `color(srgb 0.2 0.4 0.6 / none)`);
+        // FIXME: Clarify with spec editors if 'none' should pass through to the constants.
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(none none none) r g b)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(none none none / none) r g b / alpha)`, `color(srgb 0 0 0 / 0)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% none 60%) r g b)`, `color(srgb 0.2 0 0.6)`);
+        fuzzy_test_valid_color(`${rgbFunction}(from rgb(20% 40% 60% / none) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0)`);
 
-    // Testing with 'currentColor'
-    fuzzy_test_valid_color(`rgb(from currentColor r g b)`, `rgb(from currentColor r g b)`);
+        // Testing with 'currentColor'
+        fuzzy_test_valid_color(`${rgbFunction}(from currentColor r g b)`, `rgb(from currentColor r g b)`);
 
-    // color-mix
-    fuzzy_test_valid_color(`rgb(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`);
+        // color-mix
+        fuzzy_test_valid_color(`${rgbFunction}(from color-mix(in srgb, red, red) r g b / alpha)`, `color(srgb 1 0 0)`);
+    }
 
     // hsl(from ...)
+    for (const hslFunction of ["hsl", "hsla"]) {
 
-    // Testing no modifications.
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s l)`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / alpha)`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`);
+        // Testing no modifications.
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l)`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / alpha)`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s l / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`);
 
-    // Test nesting relative colors.
-    fuzzy_test_valid_color(`hsl(from hsl(from rebeccapurple h s l) h s l)`, `color(srgb 0.4 0.2 0.6)`);
+        // Test nesting relative colors.
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(from rebeccapurple h s l) h s l)`, `color(srgb 0.4 0.2 0.6)`);
 
-    // Testing replacement with 0.
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 0 0% 0%)`, `color(srgb 0 0 0)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 0deg 0% 0%)`, `color(srgb 0 0 0)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s 0% / alpha)`, `color(srgb 0 0 0)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s 0% / alpha)`, `color(srgb 0 0 0 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`);
-
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h 20% l / alpha)`, `color(srgb 0.4 0.32 0.48)`);
-    // hsl(from rebeccapurple h s 20% / alpha) is equivalent to color(srgb 0.2 0.1 0.3).
-    // For the green channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26.
-    // https://www.w3.org/TR/css-color-4/#rgb-functions
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s 20% / alpha)`, `color(srgb 0.2 0.1 0.3)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h 20% l / alpha)`, `color(srgb 0.32 0.4 0.48 / 0.8)`);
-    // hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha) is equivalent to color(srgb 0.1 0.2 0.3).
-    // For the red channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26.
-    // https://www.w3.org/TR/css-color-4/#rgb-functions
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha)`, `color(srgb 0.1 0.2 0.3 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / .2)`, `color(srgb 0.2 0.4 0.6 / 0.2)`);
+        // Testing replacement with 0.
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0 0% 0%)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0deg 0% 0%)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s 0% / alpha)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s 0% / alpha)`, `color(srgb 0 0 0 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s l / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`);
+
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h 20% l / alpha)`, `color(srgb 0.4 0.32 0.48)`);
+        // hsl(from rebeccapurple h s 20% / alpha) is equivalent to color(srgb 0.2 0.1 0.3).
+        // For the green channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26.
+        // https://www.w3.org/TR/css-color-4/#rgb-functions
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s 20% / alpha)`, `color(srgb 0.2 0.1 0.3)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h 20% l / alpha)`, `color(srgb 0.32 0.4 0.48 / 0.8)`);
+        // hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha) is equivalent to color(srgb 0.1 0.2 0.3).
+        // For the red channel: 0.1 * 255 = 25.5. This should get rounded towards infinity to 26.
+        // https://www.w3.org/TR/css-color-4/#rgb-functions
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha)`, `color(srgb 0.1 0.2 0.3 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h s l / .2)`, `color(srgb 0.2 0.4 0.6 / 0.2)`);
 
-    // Testing valid permutation (types match).
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h l s)`, `color(srgb 0.5 0.3 0.7)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0 0.8 / 0.5)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56 / 0.4)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 1 1 1)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l s)`, `color(srgb 0.3 0.5 0.7 / 0.8)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.08 0.4 0.72 / 0.5)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56 / 0.4)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.64 0.8 0.96 / 0.8)`);
+        // Testing valid permutation (types match).
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h l s)`, `color(srgb 0.5 0.3 0.7)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h alpha l / s)`, `color(srgb 0.4 0.396 0.404)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h l l / l)`, `color(srgb 0.4 0.24 0.56)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h l s)`, `color(srgb 0.3 0.5 0.7 / 0.8)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h alpha l / s)`, `color(srgb 0.4 0.4 0.4)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h l l / l)`, `color(srgb 0.24 0.4 0.56)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.01 0.01 / 0.8)`);
 
-    // Testing with calc().
-    fuzzy_test_valid_color(`hsl(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`);
-    fuzzy_test_valid_color(`hsl(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
+        // Testing with calc().
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple calc(h) calc(s) calc(l))`, `color(srgb 0.4 0.2 0.6)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rgb(20%, 40%, 60%, 80%) calc(h) calc(s) calc(l) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
 
-    // Testing with 'none'.
-    fuzzy_test_valid_color(`hsl(from rebeccapurple none none none)`, `color(srgb none none none)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s none)`, `color(srgb 0 0 none)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s none / alpha)`, `color(srgb 0 0 none)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple h s l / none)`, `color(srgb 0.4 0.2 0.6 / none)`);
-    fuzzy_test_valid_color(`hsl(from rebeccapurple none s l / alpha)`, `color(srgb none 0.2 0.2)`);
-    fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) h s none / alpha)`, `color(srgb 0 0 none / 0.5)`);
-    fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) h s l / none)`, `color(srgb 0.4 0.6 0.4 / none)`);
-    fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / .5) none s l / alpha)`, `color(srgb none 0.4 0.4 / 0.5)`);
-    // FIXME: Clarify with spec editors if 'none' should pass through to the constants.
-    fuzzy_test_valid_color(`hsl(from hsl(none none none) h s l)`, `color(srgb 0 0 0)`);
-    fuzzy_test_valid_color(`hsl(from hsl(none none none / none) h s l / alpha)`, `color(srgb 0 0 0 / 0)`);
-    fuzzy_test_valid_color(`hsl(from hsl(120deg none 50% / .5) h s l)`, `color(srgb 0.5 0.5 0.5 / 0.5)`);
-    fuzzy_test_valid_color(`hsl(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`);
-    fuzzy_test_valid_color(`hsl(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`);
+        // Testing with 'none'.
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple none none none)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple none none none / none)`, `color(srgb 0 0 0 / 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s none)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s none / alpha)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple h s l / none)`, `color(srgb 0.4 0.2 0.6 / none)`);
+        fuzzy_test_valid_color(`${hslFunction}(from rebeccapurple none s l / alpha)`, `color(srgb 0.6 0.2 0.2)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) h s none / alpha)`, `color(srgb 0 0 0 / 0.5)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) h s l / none)`, `color(srgb 0.4 0.6 0.4 / none)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / .5) none s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`);
+        // FIXME: Clarify with spec editors if 'none' should pass through to the constants.
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(none none none) h s l)`, `color(srgb 0 0 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(none none none / none) h s l / alpha)`, `color(srgb 0 0 0 / 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg none 50% / .5) h s l)`, `color(srgb 0.5 0.5 0.5 / 0.5)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(120deg 20% 50% / none) h s l / alpha)`, `color(srgb 0.4 0.6 0.4 / 0)`);
+        fuzzy_test_valid_color(`${hslFunction}(from hsl(none 20% 50% / .5) h s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`);
 
-    // Testing with 'currentColor'
-    fuzzy_test_valid_color(`hsl(from currentColor h s l)`, `hsl(from currentColor h s l)`);
+        // Testing with 'currentColor'
+        fuzzy_test_valid_color(`${hslFunction}(from currentColor h s l)`, `hsl(from currentColor h s l)`);
 
-    // color-mix
-    fuzzy_test_valid_color(`hsl(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`);
+        // color-mix
+        fuzzy_test_valid_color(`${hslFunction}(from color-mix(in srgb, red, red) h s l / alpha)`, `color(srgb 1 0 0)`);
+    }
 
     // hwb(from ...)
 
@@ -245,28 +249,28 @@
 
     // Testing valid permutation (types match).
     fuzzy_test_valid_color(`hwb(from rebeccapurple h b w)`, `color(srgb 0.6 0.4 0.8)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.8333 0.8333 0.8333 / 0.4)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8 / 0.2)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha w / b)`, `color(srgb 0.405 0.01 0.8)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple h w w / w)`, `color(srgb 0.5 0.2 0.8)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple h alpha alpha / alpha)`, `color(srgb 0.5 0.01 0.99)`);
     fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h b w)`, `color(srgb 0.4 0.6 0.8 / 0.8)`);
-    fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.8 0.8 0.8 / 0.4)`);
-    fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8 / 0.2)`);
-    fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.5 0.5 0.5 / 0.8)`);
+    fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha w / b)`, `color(srgb 0.01 0.404 0.8)`);
+    fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w w / w)`, `color(srgb 0.2 0.5 0.8)`);
+    fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h alpha alpha / alpha)`, `color(srgb 0.01 0.5 0.99 / 0.8)`);
 
     // Testing with calc().
     fuzzy_test_valid_color(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `color(srgb 0.4 0.2 0.6)`);
     fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) calc(h) calc(w) calc(b) / calc(alpha))`, `color(srgb 0.2 0.4 0.6 / 0.8)`);
 
     // Testing with 'none'.
-    fuzzy_test_valid_color(`hwb(from rebeccapurple none none none)`, `color(srgb none none none)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple none none none / none)`, `color(srgb none none none / none)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple h w none)`, `color(srgb 0.6 0.2 none)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple h w none / alpha)`, `color(srgb 0.6 0.2 none)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple none none none)`, `color(srgb 1 0 0)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple none none none / none)`, `color(srgb 1 0 0 / none)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple h w none)`, `color(srgb 0.6 0.2 1)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple h w none / alpha)`, `color(srgb 0.6 0.2 1)`);
     fuzzy_test_valid_color(`hwb(from rebeccapurple h w b / none)`, `color(srgb 0.4 0.2 0.6 / none)`);
-    fuzzy_test_valid_color(`hwb(from rebeccapurple none w b / alpha)`, `color(srgb none 0.2 0.2)`);
-    fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) h w none / alpha)`, `color(srgb 0.2 1 none / 0.5)`);
+    fuzzy_test_valid_color(`hwb(from rebeccapurple none w b / alpha)`, `color(srgb 0.6 0.2 0.2)`);
+    fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) h w none / alpha)`, `color(srgb 0.2 1 0.2 / 0.5)`);
     fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) h w b / none)`, `color(srgb 0.2 0.5 0.2 / none)`);
-    fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) none w b / alpha)`, `color(srgb none 0.2 0.2 / 0.5)`);
+    fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / .5) none w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`);
     // FIXME: Clarify with spec editors if 'none' should pass through to the constants.
     fuzzy_test_valid_color(`hwb(from hwb(none none none) h w b)`, `color(srgb 1 0 0)`);
     fuzzy_test_valid_color(`hwb(from hwb(none none none / none) h w b / alpha)`, `color(srgb 1 0 0 / 0)`);
@@ -400,7 +404,7 @@
     fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) calc(l) calc(a) calc(b))`, `oklab(0.25 0.2 0.5)`);
     fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `oklab(0.25 0.2 0.5 / 0.4)`);
     fuzzy_test_valid_color(`oklab(from oklab(0.7 0.25 -0.15) calc(l - 0.2) a b)`, `oklab(0.5 0.25 -0.15)`);
-    fuzzy_test_valid_color(`oklab(from oklab(0.7 0.25 -0.15) l calc(a / 2) calc(b / 3))`, `oklab(0.7 0.125 -0.075)`);
+    fuzzy_test_valid_color(`oklab(from oklab(0.7 0.25 -0.15) l calc(a / 2) calc(b / 3))`, `oklab(0.7 0.125 -0.05)`);
 
     // Testing with 'none'.
     fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) none none none)`, `oklab(none none none)`);
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-05-15 03:34:42 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-05-15 03:34:42 +0000
commit	da4c7e7ed675c3bf405668739c3012d140856109 (patch)
tree	cdd868dba063fecba609a1d819de271f0d51b23e /testing/web-platform/tests/css/css-color
parent	Adding upstream version 125.0.3. (diff)
download	firefox-da4c7e7ed675c3bf405668739c3012d140856109.tar.xz firefox-da4c7e7ed675c3bf405668739c3012d140856109.zip