diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-color')
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)`); |