diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-color')
483 files changed, 24109 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-color/009900-image-ref.html b/testing/web-platform/tests/css/css-color/009900-image-ref.html new file mode 100644 index 0000000000..cf1ba5c48f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/009900-image-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Space of Tagged Images. HTML img</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> + + +<body> + <p>Test passes if you see a green square, and no red.</p> + <!-- solid color #009900 PNG image, untagged --> + <p><img src="./support/009900.png" alt="should be green"/></p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/009900-tagged-image-ref.html b/testing/web-platform/tests/css/css-color/009900-tagged-image-ref.html new file mode 100644 index 0000000000..21086fc621 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/009900-tagged-image-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Space of Tagged Images. HTML img</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> + + +<body> + <p>Test passes if you see a green square, and no red.</p> + <!-- + solid color #990000 PNG image, iCCP with v2 profile + red-green swapped to be sure the profile is actually applied + --> + <p><img src="./support/swap-990000-iCCP.png" alt="should be green"/></p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/LICENSE b/testing/web-platform/tests/css/css-color/LICENSE new file mode 100644 index 0000000000..d47f50cca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/LICENSE @@ -0,0 +1,41 @@ +The tests in this directory are Copyright (c) 2007-2008, The +Mozilla Foundation. All rights reserved. + +Redistribution and use in source and binary forms, with or +without modification, are permitted provided that the following +conditions are met: + + * Redistributions of source code must retain the above + copyright notice, this list of conditions and the following + disclaimer. + + * Redistributions in binary form must reproduce the above + copyright notice, this list of conditions and the following + disclaimer in the documentation and/or other materials + provided with the distribution. + + * Neither the name of the The Mozilla Foundation nor the + names of its contributors may be used to endorse or promote + products derived from this software without specific prior + written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND +CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, +INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS +BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, +EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED +TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON +ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY +OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE +POSSIBILITY OF SUCH DAMAGE. + + +Alternatively, these tests may be used under the terms of the W3C +Document License at +http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231 +in which case the provisions of the W3C Document License are +applicable instead of those above. diff --git a/testing/web-platform/tests/css/css-color/META.yml b/testing/web-platform/tests/css/css-color/META.yml new file mode 100644 index 0000000000..f5030db7cb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/META.yml @@ -0,0 +1,8 @@ +spec: https://drafts.csswg.org/css-color/ +suggested_reviewers: + - dbaron + - svgeesus + - tabatkins + - weinig + - leaverou + diff --git a/testing/web-platform/tests/css/css-color/a98rgb-001.html b/testing/web-platform/tests/css/css-color/a98rgb-001.html new file mode 100644 index 0000000000..727a0aef7d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/a98rgb-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: a98-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-a98-rgb"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="a98-rgb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(a98-rgb 0.281363 0.498012 0.116746); } /* green (sRGB #008000) converted to a98-rgb */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/a98rgb-002.html b/testing/web-platform/tests/css/css-color/a98rgb-002.html new file mode 100644 index 0000000000..930c769252 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/a98rgb-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: a98-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-a98-rgb"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="a98-rgb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(a98-rgb 0 0 0); } /* black (sRGB #000000) converted to a98-rgb */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/a98rgb-003-ref.html b/testing/web-platform/tests/css/css-color/a98rgb-003-ref.html new file mode 100644 index 0000000000..9db28b6de5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/a98rgb-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: a98-rgb</title> +<style> + body { background-color: grey; } + .test { background-color: rgb(99.993% 100% 100%); width: 12em; height: 12em; } /* color(a98-rgb 1 1 1) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/a98rgb-003.html b/testing/web-platform/tests/css/css-color/a98rgb-003.html new file mode 100644 index 0000000000..f4ad2b7bd9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/a98rgb-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: a98-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-a98-rgb"> +<link rel="match" href="a98rgb-003-ref.html"> +<meta name="assert" content="a98-rgb with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(99.993% 100% 100%); width: 12em; height: 6em; margin-bottom: 0; } /* color(a98-rgb 1 1 1) converted to sRGB */ + .test { background-color: color(a98-rgb 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/a98rgb-004-ref.html b/testing/web-platform/tests/css/css-color/a98rgb-004-ref.html new file mode 100644 index 0000000000..3b8771a704 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/a98rgb-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: a98-rgb</title> +<style> + .test { background-color: lab(83.2141% -129.1072 87.1718); width: 12em; height: 12em; } /* color(a98-rgb 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/a98rgb-004.html b/testing/web-platform/tests/css/css-color/a98rgb-004.html new file mode 100644 index 0000000000..24c476b7c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/a98rgb-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: a98-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-a98-rgb"> +<link rel="match" href="a98rgb-004-ref.html"> +<meta name="assert" content="a98-rgb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(83.2141% -129.1072 87.1718); width: 12em; height: 6em; margin-bottom: 0; } /* color(a98-rgb 0 1 0) converted to Lab */ + .test { background-color: color(a98-rgb 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/animation/color-composition.html b/testing/web-platform/tests/css/css-color/animation/color-composition.html new file mode 100644 index 0000000000..c3e481830b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/animation/color-composition.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>color composition</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#the-color-property"> +<meta name="assert" content="color supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.target { + width: 40px; + height: 40px; + background-color: black; +} +.expected { + background-color: green; +} +</style> + +<body> +<script> +test_composition({ + property: 'color', + underlying: 'rgb(50, 50, 50)', + addFrom: 'rgb(10, 10, 10)', + replaceTo: 'rgb(30, 30, 30)', +}, [ + {at: 0, expect: 'rgb(60, 60, 60)'}, + {at: 0.2, expect: 'rgb(54, 54, 54)'}, + {at: 1, expect: 'rgb(30, 30, 30)'}, + {at: 1.2, expect: 'rgb(24, 24, 24)'}, + {at: 1.5, expect: 'rgb(15, 15, 15)'}, +]); + +test_composition({ + property: 'color', + underlying: 'rgb(60, 60, 60)', + addFrom: 'rgb(0, 0, 0)', + replaceTo: 'rgb(50, 50, 50)', +}, [ + {at: 0, expect: 'rgb(60, 60, 60)'}, + {at: 0.5, expect: 'rgb(55, 55, 55)'}, + {at: 1, expect: 'rgb(50, 50, 50)'}, + {at: 1.2, expect: 'rgb(48, 48, 48)'}, + {at: 1.5, expect: 'rgb(45, 45, 45)'}, +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-color/animation/color-interpolation.html b/testing/web-platform/tests/css/css-color/animation/color-interpolation.html new file mode 100644 index 0000000000..d22f53409c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/animation/color-interpolation.html @@ -0,0 +1,133 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>color interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#the-color-property"> +<meta name="assert" content="color supports animation by computed value type"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + color: blue; +} +.target { + display: inline-block; + font-size: 60pt; + color: yellow; +} +.expected { + margin-right: 15px; +} +</style> + +<body> + <template id="target-template">T</template> +</body> + +<script> +test_interpolation({ + property: 'color', + from: neutralKeyframe, + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(255, 255, 0)'}, + {at: 0, expect: 'rgb(255, 255, 0)'}, + {at: 0.3, expect: 'rgb(179, 217, 0)'}, + {at: 0.6, expect: 'rgb(102, 179, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 65, 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'initial', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(0, 38, 0)'}, + {at: 0.6, expect: 'rgb(0, 77, 0)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'inherit', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'unset', + to: 'green', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 255)'}, + {at: 0, expect: 'rgb(0, 0, 255)'}, + {at: 0.3, expect: 'rgb(0, 38, 179)'}, + {at: 0.6, expect: 'rgb(0, 77, 102)'}, + {at: 1, expect: 'rgb(0, 128, 0)'}, + {at: 1.5, expect: 'rgb(0, 192, 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'black', + to: 'orange', +}, [ + {at: -0.3, expect: 'rgb(0, 0, 0)'}, + {at: 0, expect: 'rgb(0, 0, 0)'}, + {at: 0.3, expect: 'rgb(77, 50, 0)'}, + {at: 0.6, expect: 'rgb(153, 99, 0)'}, + {at: 1, expect: 'rgb(255, 165, 0)'}, + {at: 1.5, expect: 'rgb(255, 248, 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'rgb(0 0 0)', + to: 'color(srgb 1 1 1)', +}, [ + {at: -0.3, expect: 'oklab(0 0 0)'}, + {at: 0, expect: 'oklab(0 0 0)'}, + {at: 0.3, expect: 'oklab(0.3 0 0)'}, + {at: 0.6, expect: 'oklab(0.6 0 0)'}, + {at: 1, expect: 'oklab(1 0 0)'}, + {at: 1.5, expect: 'oklab(1 0 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'color(srgb 0 0 0)', + to: 'rgb(255 255 255)', +}, [ + {at: -0.3, expect: 'oklab(0 0 0)'}, + {at: 0, expect: 'oklab(0 0 0)'}, + {at: 0.3, expect: 'oklab(0.3 0 0)'}, + {at: 0.6, expect: 'oklab(0.6 0 0)'}, + {at: 1, expect: 'oklab(1 0 0)'}, + {at: 1.5, expect: 'oklab(1 0 0)'}, +]); + +test_interpolation({ + property: 'color', + from: 'color(srgb 0 0 0)', + to: 'color(srgb 1 1 1)', +}, [ + {at: -0.3, expect: 'oklab(0 0 0)'}, + {at: 0, expect: 'oklab(0 0 0)'}, + {at: 0.3, expect: 'oklab(0.3 0 0)'}, + {at: 0.6, expect: 'oklab(0.6 0 0)'}, + {at: 1, expect: 'oklab(1 0 0)'}, + {at: 1.5, expect: 'oklab(1 0 0)'}, +]); +</script> diff --git a/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-001-ref.html b/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-001-ref.html new file mode 100644 index 0000000000..ca55dc66f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-001-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE HTML> +<html> +<title>CSS Test Reference (Color): ending of opacity animation</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="https://www.google.com/"> + +<style> +#test { + position: sticky; + top: 0; + height: 50px; + background: blue; + opacity: 0.2; +} + +.tall { + height: 5000px; +} +</style> + +<div id="test"> +</div> +<div class="tall"> +</div> diff --git a/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-001.html b/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-001.html new file mode 100644 index 0000000000..1fb36cd366 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>CSS Test (Color): ending of opacity animation</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="https://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1330438"> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#transparency"> +<link rel="match" href="opacity-animation-ending-correctly-001-ref.html"> + +<style> +#test { + position: sticky; + top: 0; + height: 50px; + background: blue; + transition: opacity 50ms step-start; +} + +#test.fade { + opacity: 0.2; +} + +.tall { + height: 5000px; +} +</style> + +<div id="test"> +</div> +<div class="tall"> +</div> + +<script> +function flushStyleLayoutAndPrePaint() { + document.elementFromPoint(10, 10); +} + +document.getElementById("test").addEventListener("transitionend", function(e) { + document.documentElement.classList.remove("reftest-wait"); +}); +requestAnimationFrame(function() { + flushStyleLayoutAndPrePaint(); + requestAnimationFrame(function() { + document.getElementById("test").classList.add("fade"); + flushStyleLayoutAndPrePaint(); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-002.html b/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-002.html new file mode 100644 index 0000000000..7ba097fb10 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/animation/opacity-animation-ending-correctly-002.html @@ -0,0 +1,50 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<title>CSS Test (Color): ending of opacity animation</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/"> +<link rel="author" title="Google" href="https://www.google.com/"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1330438"> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#transparency"> +<link rel="match" href="opacity-animation-ending-correctly-001-ref.html"> + +<style> +#test { + position: sticky; + top: 0; + height: 50px; + background: blue; + transform: translate(0); + filter: grayscale(0%); + transition: opacity 50ms step-start; +} + +#test.fade { + opacity: 0.2; +} + +.tall { + height: 5000px; +} +</style> + +<div id="test"> +</div> +<div class="tall"> +</div> + +<script> +function flushStyleLayoutAndPrePaint() { + document.elementFromPoint(10, 10); +} + +document.getElementById("test").addEventListener("transitionend", function(e) { + document.documentElement.classList.remove("reftest-wait"); +}); +requestAnimationFrame(function() { + flushStyleLayoutAndPrePaint(); + requestAnimationFrame(function() { + document.getElementById("test").classList.add("fade"); + flushStyleLayoutAndPrePaint(); + }); +}); +</script> diff --git a/testing/web-platform/tests/css/css-color/animation/opacity-interpolation.html b/testing/web-platform/tests/css/css-color/animation/opacity-interpolation.html new file mode 100644 index 0000000000..ce26a8c799 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/animation/opacity-interpolation.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="UTF-8"> +<title>opacity interpolation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-3/#opacity"> +<meta name="assert" content="opacity supports animation"> + +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<style> +.parent { + opacity: 0.8; +} + +.target { + width: 100px; + height: 100px; + background-color: black; + display: inline-block; + opacity: 0.1; +} + +.expected { + background-color: green; +} +</style> + +<body> +<script> +test_interpolation({ + property: 'opacity', + from: neutralKeyframe, + to: '0.2', +}, [ + {at: -0.3, expect: '0.07'}, + {at: 0, expect: '0.1'}, + {at: 0.3, expect: '0.13'}, + {at: 0.6, expect: '0.16'}, + {at: 1, expect: '0.2'}, + {at: 1.5, expect: '0.25'}, +]); + +test_interpolation({ + property: 'opacity', + from: 'initial', + to: '0.2', +}, [ + {at: -0.3, expect: '1'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '0.76'}, + {at: 0.6, expect: '0.52'}, + {at: 1, expect: '0.2'}, + {at: 1.5, expect: '0'}, +]); + +test_interpolation({ + property: 'opacity', + from: 'inherit', + to: '0.2', +}, [ + {at: -0.3, expect: '0.98'}, + {at: 0, expect: '0.8'}, + {at: 0.3, expect: '0.62'}, + {at: 0.6, expect: '0.44'}, + {at: 1, expect: '0.2'}, + {at: 1.5, expect: '0'}, +]); + +test_interpolation({ + property: 'opacity', + from: 'unset', + to: '0.2', +}, [ + {at: -0.3, expect: '1'}, + {at: 0, expect: '1'}, + {at: 0.3, expect: '0.76'}, + {at: 0.6, expect: '0.52'}, + {at: 1, expect: '0.2'}, + {at: 1.5, expect: '0'}, +]); + +test_interpolation({ + property: 'opacity', + from: '0', + to: '1' +}, [ + {at: -0.3, expect: '0'}, // CSS opacity is [0-1]. + {at: 0, expect: '0'}, + {at: 0.3, expect: '0.3'}, + {at: 0.6, expect: '0.6'}, + {at: 1, expect: '1'}, + {at: 1.5, expect: '1'} +]); +</script> +</body> diff --git a/testing/web-platform/tests/css/css-color/at-color-profile-001.html b/testing/web-platform/tests/css/css-color/at-color-profile-001.html new file mode 100644 index 0000000000..f2a971532c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/at-color-profile-001.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 5: Specifying a color profile: the @color-profile at-rule</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#at-profile"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#custom-color"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="custom colorspace, ICC profile"> +<style> + /* sRGB except red and green colorants are swapped */ + @color-profile --foo { + src: url(support/swapped.icc); + } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: #090; width: 12em; height: 6em; margin-bottom: 0; } /* red-green swap of #900 sRGB */ + .test { background-color: color(--foo 0.6 0 0); } /* hex 99 / FF is decimal 0.6 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-001-ref.html b/testing/web-platform/tests/css/css-color/background-color-hsl-001-ref.html new file mode 100644 index 0000000000..f37a73d170 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: hsla() syntax accepts comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: hsla(120, 75%, 50%, 0.2); } + #p2 { background-color: hsla(120, 75%, 50%, 0.4); } + #p3 { background-color: hsla(120, 75%, 50%, 0.6); } + #p4 { background-color: hsl(120, 75%, 50%); } + #p5 { background-color: hsl(120, 75%, 50%); } + #p6 { background-color: hsl(120, 75%, 50%); } + #p7 { background-color: hsl(120, 75%, 50%); } + #p8 { background-color: hsl(120, 75%, 50%); } + #p9 { background-color: hsl(120, 75%, 50%); } + #p10 { background-color: hsl(120, 75%, 50%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-001.html b/testing/web-platform/tests/css/css-color/background-color-hsl-001.html new file mode 100644 index 0000000000..2b8c7d313c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: hsla() syntax accepts comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" /> + <meta name="assert" content="hsla() should accept comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component." /> + <link rel="match" href="background-color-hsl-001-ref.html" /> + <style type="text/css"> + #p1 { background-color: hsla(120.0, 75%, 50%, 20%); } + #p2 { background-color: hsla(120, 75%, 50%, 0.4); } + #p3 { background-color: hsla(120 75% 50% / 60%); } + #p4 { background-color: hsla(120.0 75% 50% / 1.0); } + #p5 { background-color: hsla(120/* comment */75%/* comment */50%/1.0); } + #p6 { background-color: hsla(120,/* comment */75%,/* comment */50%,100%); } + #p7 { background-color: hsla(120.0, 75%, 50%); } + #p8 { background-color: hsla(120 75% 50%); } + #p9 { background-color: hsla(120/* comment */75%/* comment */50%); } + #p10 { background-color: hsla(120/* comment */,75%,/* comment */50%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-002-ref.html b/testing/web-platform/tests/css/css-color/background-color-hsl-002-ref.html new file mode 100644 index 0000000000..90284b999f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: hsl() syntax accepts comma-less expressions (and comments as separators) and alpha component (and percentage alpha) - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: hsla(120, 75%, 50%, 0.2); } + #p2 { background-color: hsla(120, 75%, 50%, 0.4); } + #p3 { background-color: hsla(120, 75%, 50%, 0.6); } + #p4 { background-color: hsla(120, 75%, 50%, 0.8); } + #p5 { background-color: hsla(120.0, 75%, 50%, 1.0); } + #p6 { background-color: hsla(120.0, 75%, 50%, 1.0); } + #p7 { background-color: hsla(120.0, 75%, 50%, 1.0); } + #p8 { background-color: hsla(120, 75%, 50%, 1.0); } + #p9 { background-color: hsla(120, 75%, 50%, 1.0); } + #p10 { background-color: hsla(120, 75%, 50%, 1.0); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-002.html b/testing/web-platform/tests/css/css-color/background-color-hsl-002.html new file mode 100644 index 0000000000..a1e9a0127e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: hsl() syntax accepts comma-less expressions (and comments as separators) and alpha component (and percentage alpha) - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" /> + <meta name="assert" content="hsl() should accept comma-less expressions (and comments as separators) and alpha component (and percentage alpha)." /> + <link rel="match" href="background-color-hsl-002-ref.html" /> + <style type="text/css"> + #p1 { background-color: hsl(120, 75%, 50%, 0.2); } + #p2 { background-color: hsl(120, 75%, 50%, 40%); } + #p3 { background-color: hsl(120 75% 50% / 0.6); } + #p4 { background-color: hsl(120 75% 50% / 80%); } + #p5 { background-color: hsl(120/* comment */75%/* comment */50%/1.0); } + #p6 { background-color: hsl(120/* comment */75%/* comment */50%/100%); } + #p7 { background-color: hsl(120,/* comment */75%,/* comment */50%,1.0); } + #p8 { background-color: hsl(120,/* comment */75%,/* comment */50%,100%); } + #p9 { background-color: hsl(120/* comment */75%/* comment */50%); } + #p10 { background-color: hsl(120/* comment */,75%,/* comment */50%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-003-ref.html b/testing/web-platform/tests/css/css-color/background-color-hsl-003-ref.html new file mode 100644 index 0000000000..e0db417c99 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-003-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: support <angle> value for hsl()/hsla() hue component - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: hsla(120, 75%, 50%, 0.2); } + #p2 { background-color: hsla(120.0, 75%, 50%, 0.4); } + #p3 { background-color: hsla(1.2e2, 75%, 50%, 0.6); } + #p4 { background-color: hsla(120, 75%, 50%, 0.8); } + #p5 { background-color: hsla(120, 75%, 50%, 1.0); } + #p6 { background-color: hsl(240, 75%, 50%); } + #p7 { background-color: hsl(600.0, 75%, 50%); } + #p8 { background-color: hsl(9.6e2, 75%, 50%); } + #p9 { background-color: hsl(600, 75%, 50%); } + #p10 { background-color: hsl(240, 75%, 50%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-003.html b/testing/web-platform/tests/css/css-color/background-color-hsl-003.html new file mode 100644 index 0000000000..f9c256e177 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: support <angle> value for hsl()/hsla() hue component - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" /> + <meta name="assert" content="hsl()/hsla() hue component should support <angle> value." /> + <link rel="match" href="background-color-hsl-003-ref.html" /> + <style type="text/css"> + #p1 { background-color: hsla(120, 75%, 50%, 0.2); } + #p2 { background-color: hsla(120deg, 75%, 50%, 0.4); } + #p3 { background-color: hsla(133.33333333grad, 75%, 50%, 0.6); } + #p4 { background-color: hsla(2.0943951024rad, 75%, 50%, 0.8); } + #p5 { background-color: hsla(0.3333333333turn, 75%, 50%, 1.0); } + #p6 { background-color: hsl(240, 75%, 50%); } + #p7 { background-color: hsl(600deg, 75%, 50%); } + #p8 { background-color: hsl(1066.66666666grad, 75%, 50%); } + #p9 { background-color: hsl(10.4719755118rad, 75%, 50%); } + #p10 { background-color: hsl(2.6666666666turn, 75%, 50%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-004-ref.html b/testing/web-platform/tests/css/css-color/background-color-hsl-004-ref.html new file mode 100644 index 0000000000..f630740fae --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-004-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: hsla() and hsl() are aliases of each other - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: hsl(120, 75%, 50%); } + #p2 { background-color: hsl(120.0, 75%, 50%); } + #p3 { background-color: hsl(1.2e2, 75%, 50%); } + #p4 { background-color: hsl(1.2E2, 75%, 50%); } + #p5 { background-color: hsl(60, 75%, 50%); } + #p6 { background-color: hsla(120, 75%, 50%, 0.2); } + #p7 { background-color: hsla(120.0, 75%, 50%, 0.4); } + #p8 { background-color: hsla(1.2e2, 75%, 50%, 0.6); } + #p9 { background-color: hsla(1.2E2, 75%, 50%, 0.8); } + #p10 { background-color: hsla(60.0, 75%, 50%, 1.0); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-hsl-004.html b/testing/web-platform/tests/css/css-color/background-color-hsl-004.html new file mode 100644 index 0000000000..1cd6684c71 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-hsl-004.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: hsla() and hsl() are aliases of each other - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation" /> + <meta name="assert" content="hsla() should have the identical grammar and behavior to hsl()." /> + <link rel="match" href="background-color-hsl-004-ref.html" /> + <style type="text/css"> + #p1 { background-color: hsla(120, 75%, 50%); } + #p2 { background-color: hsla(120.0, 75%, 50%); } + #p3 { background-color: hsla(1.2e2, 75%, 50%); } + #p4 { background-color: hsla(1.2E2, 75%, 50%); } + #p5 { background-color: hsla(60, 75%, 50%); } + #p6 { background-color: hsl(120, 75%, 50%, 0.2); } + #p7 { background-color: hsl(120.0, 75%, 50%, 0.4); } + #p8 { background-color: hsl(1.2e2, 75%, 50%, 0.6); } + #p9 { background-color: hsl(1.2E2, 75%, 50%, 0.8); } + #p10 { background-color: hsl(60.0, 75%, 50%, 1.0); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-rgb-001-ref.html b/testing/web-platform/tests/css/css-color/background-color-rgb-001-ref.html new file mode 100644 index 0000000000..b03f0a3fb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-rgb-001-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: rgb() syntax accepts alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators) - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: rgba(10%, 60%, 10%, 0.2); } + #p2 { background-color: rgba(10, 175, 10, 0.4); } + #p3 { background-color: rgba(10, 175, 10, 0.6); } + #p4 { background-color: rgba(10, 175, 10, 0.8); } + #p5 { background-color: rgba(10, 175, 10, 1.0); } + #p6 { background-color: rgba(10, 150, 50, 1.0); } + #p7 { background-color: rgba(10%, 60%, 10%, 1.0); } + #p8 { background-color: rgb(10, 100, 100); } + #p9 { background-color: rgb(10, 75, 125); } + #p10 { background-color: rgb(10, 50, 150); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-rgb-001.html b/testing/web-platform/tests/css/css-color/background-color-rgb-001.html new file mode 100644 index 0000000000..061eeac2fa --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-rgb-001.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: rgb() syntax accepts alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators) - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions" /> + <meta name="assert" content="rgb() should accept alpha component (and percentage alpha value), non-integer components and comma-less expressions (and comments as separators)." /> + <link rel="match" href="background-color-rgb-001-ref.html" /> + <style type="text/css"> + #p1 { background-color: rgb(10%, 60%, 10%, 20%); } + #p2 { background-color: rgb(10, 175, 10, 0.4); } + #p3 { background-color: rgb(10 175 10 / 60%); } + #p4 { background-color: rgb(10.0 175.0 10.0 / 0.8); } + #p5 { background-color: rgb(10/* comment */175/* comment */10/100%); } + #p6 { background-color: rgb(10,/* comment */150,/* comment */50); } + #p7 { background-color: rgb(10%, 60%, 10%); } + #p8 { background-color: rgb(10.0 100.0 100.0); } + #p9 { background-color: rgb(10/* comment */75/* comment */125); } + #p10 { background-color: rgb(10.0, 50.0, 150.0); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-rgb-002-ref.html b/testing/web-platform/tests/css/css-color/background-color-rgb-002-ref.html new file mode 100644 index 0000000000..be29c86ca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-rgb-002-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: rgba() syntax accepts non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: rgba(10, 175, 10, 0.2); } + #p2 { background-color: rgba(10, 175, 10, 0.4); } + #p3 { background-color: rgba(10%, 75%, 10%, 0.6); } + #p4 { background-color: rgba(10, 175, 10, 0.8); } + #p5 { background-color: rgb(10, 175, 10); } + #p6 { background-color: rgb(10, 150, 50); } + #p7 { background-color: rgb(10, 125, 75); } + #p8 { background-color: rgb(10%, 45%, 45%); } + #p9 { background-color: rgb(10, 75, 125); } + #p10 { background-color: rgb(10, 50, 150); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-rgb-002.html b/testing/web-platform/tests/css/css-color/background-color-rgb-002.html new file mode 100644 index 0000000000..8919f0ea3e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-rgb-002.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: rgba() syntax accepts non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha component - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions" /> + <meta name="assert" content="rgba() should accept non-integer components, comma-less expressions (and comments as separators), percentage alpha and omitting of alpha." /> + <link rel="match" href="background-color-rgb-002-ref.html" /> + <style type="text/css"> + #p1 { background-color: rgba(10.0, 175.0, 10.0, 0.2); } + #p2 { background-color: rgba(10, 175, 10, 40%); } + #p3 { background-color: rgba(10% 75% 10% / 0.6); } + #p4 { background-color: rgba(10 175 10 / 80%); } + #p5 { background-color: rgba(10/* comment */175/* comment */10/100%); } + #p6 { background-color: rgba(10,/* comment */150,/* comment */50); } + #p7 { background-color: rgba(10.0, 125.0, 75.0); } + #p8 { background-color: rgba(10%, 45%, 45%); } + #p9 { background-color: rgba(10/* comment */75/* comment */125); } + #p10 { background-color: rgba(10.0, 50.0, 150.0); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-rgb-003-ref.html b/testing/web-platform/tests/css/css-color/background-color-rgb-003-ref.html new file mode 100644 index 0000000000..70227ad382 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-rgb-003-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: rgb() and rgba() are aliases of each other - ref</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <style type="text/css"> + #p1 { background-color: rgba(10, 175, 10, 0.2); } + #p2 { background-color: rgba(10, 175, 10, 0.4); } + #p3 { background-color: rgba(10, 175, 10, 0.6); } + #p4 { background-color: rgba(10%, 70%, 10%, 0.8); } + #p5 { background-color: rgba(10%, 70%, 10%, 1.0); } + #p6 { background-color: rgb(10, 150, 50); } + #p7 { background-color: rgb(10, 125, 75); } + #p8 { background-color: rgb(10%,40%, 40%); } + #p9 { background-color: rgb(10%, 45%, 50%); } + #p10 { background-color: rgb(10%, 50%, 60%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/background-color-rgb-003.html b/testing/web-platform/tests/css/css-color/background-color-rgb-003.html new file mode 100644 index 0000000000..6a22ba0dbb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/background-color-rgb-003.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS-Color-4: rgb() and rgba() are aliases of each other - test</title> + <link rel="author" title="Jerry Shih" href="mailto:bignose1007@gmail.com" /> + <link rel="author" title="Mozilla" href="http://www.mozilla.org/" /> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions" /> + <meta name="assert" content="rgb() should have the identical grammar and behavior to rgba()." /> + <link rel="match" href="background-color-rgb-003-ref.html" /> + <style type="text/css"> + #p1 { background-color: rgb(10, 175, 10, 0.2); } + #p2 { background-color: rgb(10, 175, 10, 0.4); } + #p3 { background-color: rgb(10, 175, 10, 0.6); } + #p4 { background-color: rgb(10%, 70%, 10%, 0.8); } + #p5 { background-color: rgb(10%, 70%, 10%, 1.0); } + #p6 { background-color: rgba(10, 150, 50); } + #p7 { background-color: rgba(10, 125, 75); } + #p8 { background-color: rgba(10%,40%, 40%); } + #p9 { background-color: rgba(10%, 45%, 50%); } + #p10 { background-color: rgba(10%, 50%, 60%); } + </style> + </head> + <body> + <p id="p1">color</p> + <p id="p2">color</p> + <p id="p3">color</p> + <p id="p4">color</p> + <p id="p5">color</p> + <p id="p6">color</p> + <p id="p7">color</p> + <p id="p8">color</p> + <p id="p9">color</p> + <p id="p10">color</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/blacksquare-ref.html b/testing/web-platform/tests/css/css-color/blacksquare-ref.html new file mode 100644 index 0000000000..14bc74b33f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/blacksquare-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Black square reference</title> +<style> + .test { background-color: #000000; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/blacktext-ref.html b/testing/web-platform/tests/css/css-color/blacktext-ref.html new file mode 100644 index 0000000000..ddfa9100cb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/blacktext-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Black text reference</title> +<style> + .test { color: #000000} +</style> +<body> + <p class="test">Test passes if this text is black</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/body-opacity-0-to-1-stacking-context.html b/testing/web-platform/tests/css/css-color/body-opacity-0-to-1-stacking-context.html new file mode 100644 index 0000000000..c2cd4d5504 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/body-opacity-0-to-1-stacking-context.html @@ -0,0 +1,18 @@ +<!doctype html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-color-3/#transparency"> +<link rel="match" href="greensquare-ref.html"> +<script src="/common/reftest-wait.js"></script> +<script src="/common/rendering-utils.js"></script> +<body style="opacity: 0"> + <p>Test passes if you see a green square, and no red.</p> + <div style="position: absolute; background: red"> + <div style="will-change: opacity; width: 12em; height: 12em; background: green"></div> + </div> +</body> +<script> + waitForAtLeastOneFrame().then(() => { + document.body.style.opacity = 1; + takeScreenshot(); + }); +</script> diff --git a/testing/web-platform/tests/css/css-color/border-bottom-color.xht b/testing/web-platform/tests/css/css-color/border-bottom-color.xht new file mode 100644 index 0000000000..994bb4e904 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-bottom-color.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Border-bottom-color set to hex with three digits with the maximum plus one value of #1000</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="author" title="Jack Moffitt" href="http://metajack.im/"/> + <link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"/> + <link rel="match" href="border-color-ref.xht"/> + + <meta name="assert" content="The 'border-bottom-color' set to #1000 is a transparent dark red square." /> + <style type="text/css"> + div.test + { + border: 5px solid blue; + height: 1in; + width: 1in; + } + div.test div + { + border-bottom-style: solid; + border-bottom-width: 1in; + border-bottom-color: #1000; + height: 0; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a transparent square surrounded by a blue border.</p> + <div class="test"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/border-color-currentcolor-ref.html b/testing/web-platform/tests/css/css-color/border-color-currentcolor-ref.html new file mode 100644 index 0000000000..6efc0c4141 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-color-currentcolor-ref.html @@ -0,0 +1,23 @@ +<!doctype html> +<title>CSS Test Reference</title> +<style> +div { + border-width: 5px; + border-color: green; + color: green; + margin-bottom: 2px; +} +</style> +<p>Test passes if all the border colors are green</p> +<div style="border-style: inset"> +inset +</div> +<div style="border-style: outset"> +outset +</div> +<div style="border-style: ridge"> +ridge +</div> +<div style="border-style: groove"> +groove +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/border-color-currentcolor.html b/testing/web-platform/tests/css/css-color/border-color-currentcolor.html new file mode 100644 index 0000000000..525a89e312 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-color-currentcolor.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>`border-color: currentColor` resolves to `color` value</title> +<link rel=help href="https://www.w3.org/TR/css-color-3/#currentcolor"> +<link rel=author title="Vitaly Dyachkov" href="mailto:vitaly@igalia.com"> +<link rel=match href="border-color-currentcolor-ref.html"> +<style> +div { + border-width: 5px; + border-color: currentColor; + color: green; + margin-bottom: 2px; +} +</style> +<p>Test passes if all the border colors are green</p> +<div style="border-style: inset"> +inset +</div> +<div style="border-style: outset"> +outset +</div> +<div style="border-style: ridge"> +ridge +</div> +<div style="border-style: groove"> +groove +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/border-color-ref.xht b/testing/web-platform/tests/css/css-color/border-color-ref.xht new file mode 100644 index 0000000000..28f6784054 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-color-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> +<title>CSS Reftest Reference</title> +<link rel="author" title="Jack Moffitt" href="http://metajack.im/"/> +<link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> +<style type="text/css"> +div { + border: 5px solid blue; + height: 1in; + width: 1in; +} +</style> +</head> +<body> +<p>Test passes if there is a transparent square surrounded by a blue border.</p> +<div></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/border-left-color.xht b/testing/web-platform/tests/css/css-color/border-left-color.xht new file mode 100644 index 0000000000..3214f2d814 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-left-color.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Border-left-color set to hex with three digits with the maximum plus one value of #1000</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="author" title="Jack Moffitt" href="http://metajack.im/"/> + <link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"/> + <link rel="match" href="border-color-ref.xht"/> + + <meta name="assert" content="The 'border-top-color' set to #1000 is a transparent dark red square." /> + <style type="text/css"> + div.test + { + border: 5px solid blue; + height: 1in; + width: 1in; + } + div.test div + { + border-left-style: solid; + border-left-width: 1in; + border-left-color: #1000; + height: 1in; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a transparent square surrounded by a blue border.</p> + <div class="test"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/border-right-color.xht b/testing/web-platform/tests/css/css-color/border-right-color.xht new file mode 100644 index 0000000000..70f7721c22 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-right-color.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Border-right-color set to hex with three digits with the maximum plus one value of #1000</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="author" title="Jack Moffitt" href="http://metajack.im/"/> + <link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"/> + <link rel="match" href="border-color-ref.xht"/> + + <meta name="assert" content="The 'border-right-color' set to #1000 is a transparent dark red square." /> + <style type="text/css"> + div.test + { + border: 5px solid blue; + height: 1in; + width: 1in; + } + div.test div + { + border-right-style: solid; + border-right-width: 1in; + border-right-color: #1000; + height: 1in; + width: 0; + } + </style> + </head> + <body> + <p>Test passes if there is a transparent square surrounded by a blue border.</p> + <div class="test"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/border-top-color.xht b/testing/web-platform/tests/css/css-color/border-top-color.xht new file mode 100644 index 0000000000..706da7e3c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/border-top-color.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Border-top-color set to hex with three digits with the maximum plus one value of #1000</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="author" title="Jack Moffitt" href="http://metajack.im/"/> + <link rel="author" title="Ms2ger" href="mailto:Ms2ger@gmail.com"/> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"/> + <link rel="match" href="border-color-ref.xht"/> + + <meta name="assert" content="The 'border-top-color' set to #1000 is a transparent dark red square." /> + <style type="text/css"> + div.test + { + border: 5px solid blue; + height: 1in; + width: 1in; + } + div.test div + { + border-top-style: solid; + border-top-width: 1in; + border-top-color: #1000; + height: 0; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a transparent square surrounded by a blue border.</p> + <div class="test"><div></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/canvas-change-opacity.html b/testing/web-platform/tests/css/css-color/canvas-change-opacity.html new file mode 100644 index 0000000000..1c1ea718bf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/canvas-change-opacity.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency"> +<link rel="help" href="http://crbug.com/1296899"> +<link rel="match" href="greensquare-ref.html"> +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> +<p>Test passes if you see a green square, and no red.</p> +<div style="position: absolute; width: 12em; height: 12em; background: red"></div> +<canvas id="canvas" style="position: relative; width: 12em; height: 12em; opacity: 0.2"></canvas> +<script> + const ctx = canvas.getContext("2d"); + ctx.fillStyle = "green"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + waitForAtLeastOneFrame().then(() => { + canvas.style.opacity = 1; + takeScreenshot(); + }); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-color/color-001.html b/testing/web-platform/tests/css/css-color/color-001.html new file mode 100644 index 0000000000..580307ba07 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: color property</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-color-property"> +<link rel="match" href="greentext-ref.html"> +<meta name="assert" content="This property describes the foreground fill color of an element’s text content."> +<style> + .test {color: green} +</style> +<body> + <p class="test">Test passes if this text is green</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-002.html b/testing/web-platform/tests/css/css-color/color-002.html new file mode 100644 index 0000000000..7d2f5b318e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-002.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: color property, initial value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-color-property"> +<link rel="match" href="blacktext-ref.html"> +<meta name="assert" content="The initial value of this property is black."> +<style> + .test {color: initial} +</style> +<body> + <p class="test">Test passes if this text is black</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-003.html b/testing/web-platform/tests/css/css-color/color-003.html new file mode 100644 index 0000000000..c9ed7c773b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: color property, initial value</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-color-property"> +<link rel="match" href="greentext-ref.html"> +<meta name="assert" content="If the currentcolor keyword is set on the color property itself, it is treated as color: inherit."> +<style> + .outer {color: green;} + .inner {color: currentcolor;} +</style> +<body> + <p class="outer"><span class="inner">Test passes if this text is green</span></p> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-contrast-001.html b/testing/web-platform/tests/css/css-color/color-contrast-001.html new file mode 100644 index 0000000000..d2fd196a33 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-contrast-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 5: color-contrast()</title> +<link rel="author" title="Adam Argyle" href="mailto:argyle@google.com"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#colorcontrast"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="green has higher contrast with red than deeppink"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: color-contrast(red vs deeppink, #008000)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-initial-canvastext.html b/testing/web-platform/tests/css/css-color/color-initial-canvastext.html new file mode 100644 index 0000000000..97ea2b7b68 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-initial-canvastext.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>CSS Color 4: Initial value of the color property</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#the-color-property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #ref { color: canvastext } + #initial { color: initial } +</style> +<div id="ref"></div> +<div id="initial"></div> +<script> + const canvastext = getComputedStyle(ref).color; + + test(() => { + assert_equals(getComputedStyle(document.documentElement).color, canvastext); + }, "Check that the resolved value for the initial color on the root element matches canvastext."); + + test(() => { + assert_equals(getComputedStyle(initial).color, canvastext); + }, "Check that the resolved value of an explicit color:initial matches canvastext."); +</script> diff --git a/testing/web-platform/tests/css/css-color/color-mix-basic-001-ref.html b/testing/web-platform/tests/css/css-color/color-mix-basic-001-ref.html new file mode 100644 index 0000000000..7296d17fba --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-basic-001-ref.html @@ -0,0 +1,50 @@ +<!doctype html> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> +.ref { width: 14em; height: 1em; margin-top: 0; margin-bottom: 0;} +</style> +<body> +<div id="ref"></div> +<script> +const TEST_CASES = [ + ["blue", "red"], + ["blue", "green"], + ["rgb(255, 0, 0, .2)", "red"], + ["blue", "red", 0.9], + ["blue", "red", 0], + ["currentColor", "white"], + ["currentColor", "rgba(0, 0, 0, .5)"], +]; + +const refElement = document.getElementById("ref"); +const refStyle = getComputedStyle(refElement); + +let animation = null; + +for (let [from, to, animationProgress] of TEST_CASES) { + const animationProgressExplicit = animationProgress !== undefined; + animationProgress = animationProgressExplicit ? animationProgress : 0.5; + // Set up the ref. + if (animation) { + animation.cancel(); + } + animation = refElement.animate({ + backgroundColor: [from, to], + }, { duration: 1000 }); + animation.pause(); + animation.currentTime = 1000 * animationProgress; + + let results = animationProgress == 0.5 ? 4 : 3; + + for (let i = 0; i < results; ++i) { + let element = document.createElement("div") + element.classList.add('ref') + element.style.backgroundColor = refStyle.backgroundColor; + document.body.appendChild(element) + } +} + +refElement.remove() +</script> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-mix-basic-001.html b/testing/web-platform/tests/css/css-color/color-mix-basic-001.html new file mode 100644 index 0000000000..c69a292159 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-basic-001.html @@ -0,0 +1,47 @@ +<!doctype html> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1695376"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="color-mix-basic-001-ref.html"> +<style> +div { color: black; } +.test { background-color: red; width: 14em; height: 1em; margin-top: 0; margin-bottom: 0; } +</style> +<body> +<script> +const TEST_CASES = [ + ["blue", "red"], + ["blue", "green"], + ["rgb(255, 0, 0, .2)", "red"], + ["blue", "red", 0.9], + ["blue", "red", 0], + ["currentColor", "white"], + ["currentColor", "rgba(0, 0, 0, .5)"], +]; + +for (let [from, to, animationProgress] of TEST_CASES) { + const animationProgressExplicit = animationProgress !== undefined; + animationProgress = animationProgressExplicit ? animationProgress : 0.5; + + let progress = ` ${animationProgress * 100}%`; + let oneMinusProgress = ` ${(1 - animationProgress) * 100}%`; + let values = [ + `color-mix(in srgb, ${from}, ${to} ${progress})`, + `color-mix(in srgb, ${from} ${oneMinusProgress}, ${to})`, + `color-mix(in srgb, ${from} ${oneMinusProgress}, ${to} ${progress})`, + ]; + + if (animationProgress == 0.5) { + values.push(`color-mix(in srgb, ${from}, ${to})`); + } + + for (let value of values) { + const element = document.createElement("div") + element.classList.add('test') + element.style.backgroundColor = value; + document.body.appendChild(element) + } +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-001-ref.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-001-ref.html new file mode 100644 index 0000000000..ba9b8b9622 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-001-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: green; +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-001.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-001.html new file mode 100644 index 0000000000..0f502d22ec --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-001.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="color-mix-currentcolor-001-ref.html"> +<title>currentColor is inherited correctly in color-mix()</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color-mix(in srgb, currentColor 50%, green); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-002-ref.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-002-ref.html new file mode 100644 index 0000000000..64e60fbf29 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-002-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color-mix(in lch, green 50%, blue); +} +</style> +<div></div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-002.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-002.html new file mode 100644 index 0000000000..fb05068837 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-002.html @@ -0,0 +1,22 @@ +<!doctype html> +<link rel="match" href="color-mix-currentcolor-002-ref.html"> +<title>currentColor is mixed with the correct color-space in color-mix()</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color-mix(in lch, currentColor 50%, blue); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-003-ref.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-003-ref.html new file mode 100644 index 0000000000..b47ee5942b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: currentColor is inherited correctly in color-mix()</title> +<style> +div { + color: color-mix(in srgb, green 50%, white); +} +</style> +<div> + <div>This text should be pale green</div> +</div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-003.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-003.html new file mode 100644 index 0000000000..7d9b110aeb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="match" href="color-mix-currentcolor-003-ref.html"> +<title>currentColor is inherited correctly in color-mix()</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> +<style> +body { + color: green; +} +div { + color: color-mix(in srgb, currentColor 50%, white); +} +div > div { + color: inherit; +} +</style> +<div> + <div>This text should be pale green</div> +</div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-nested-for-color-property-ref.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-nested-for-color-property-ref.html new file mode 100644 index 0000000000..0d2f49c2e2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-nested-for-color-property-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Reference: currentColor is inherited correctly with a nested color-mix() for the color attribute</title> +<style> +div { + color: color(srgb 0.5 0.75 0.75); +} +</style> +<div> + <div>This text should be a light blue-green</div> +</div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-nested-for-color-property.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-nested-for-color-property.html new file mode 100644 index 0000000000..ddcce29e74 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-nested-for-color-property.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="match" href="color-mix-currentcolor-nested-for-color-property-ref.html"> +<title>currentColor is inherited correctly with a nested color-mix() for the color attribute</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="author" title="Aaron Krajeski" href="https://github.com/mysterydate"> +<style> +body { + color: color(srgb 0 0 1); +} +div { + color: color-mix(in srgb, color-mix(in srgb, currentColor 50%, color(srgb 0 1 0)), white); +} +div > div { + color: inherit; +} +</style> +<div> + <div>This text should be a light blue-green</div> +</div> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited-getcomputedstyle.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited-getcomputedstyle.html new file mode 100644 index 0000000000..754fe56a96 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited-getcomputedstyle.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>color-mix and currentcolor with :visited don't leak information via getComputedStyle</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> + +<style> +a:link { color: red; } +a:visited { color: green; } +</style> + +<a href=""><span id="target">This background should be green and not red</span></a> + +<script> +test_computed_value("background-color", "color-mix(in srgb, currentcolor, white)", "color(srgb 1 0.5 0.5)", "should not leak :visited for computed style"); +</script> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited-ref.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited-ref.html new file mode 100644 index 0000000000..35376a2ccf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<meta charset="utf-8"> +<title>currentcolor is taken from :visited pseudo-class correctly in color-mix()</title> +<style> +a { color: green; background-color: color-mix(in srgb, green, white 75%); } +</style> + +<a href="unvisited">This background should be green and not red</a> +</html> diff --git a/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited.html b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited.html new file mode 100644 index 0000000000..28db2d6736 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-currentcolor-visited.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="match" href="color-mix-currentcolor-visited-ref.html"> +<title>currentcolor is taken from :visited pseudo-class correctly in color-mix()</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="author" title="Matthieu Dubet" href="https://github.com/mdubet"> +<style> +a:link { color: red; } +a:visited { color: green; } +span { + background-color: color-mix(in srgb, currentcolor, white 75%); +} +</style> +<a href=""><span>This background should be green and not red</span></a> diff --git a/testing/web-platform/tests/css/css-color/color-mix-non-srgb-001-ref.html b/testing/web-platform/tests/css/css-color/color-mix-non-srgb-001-ref.html new file mode 100644 index 0000000000..15556737c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-non-srgb-001-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" href="mailto:barret@brennie.ca" title="Barret Rennie"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> +div { color: black; } +.test { background-color: black; width: 14em; height: 1em; margin-top: 0; margin-bottom: 0; } +</style> +<body> +<script> +const TEST_CASES = [ + ["red", "green", "xyz", "rgb(188, 92, 0)"], + ["red", "green", "lab", "rgb(161, 108, 0)"], + ["red", "green", "lch", "rgb(145, 116, 0)"], + ["red", "green 90%", "xyz", "rgb(89, 122, 0)"], + ["red", "green 90%", "lab", "rgb(65, 126, 0)"], + ["red", "green 90%", "lch", "rgb(49, 128, 0)"], + ["red 90%", "green", "xyz", "rgb(243, 40, 0)"], + ["red 90%", "green", "lab", "rgb(237, 55, 0)"], + ["red 90%", "green", "lch", "rgb(235, 59, 0)"], +]; + +for (let [from, to, space, expected] of TEST_CASES) { + const value = expected + const element = document.createElement("div") + element.classList.add('test') + element.style.backgroundColor = value; + document.body.appendChild(element) +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-mix-non-srgb-001.html b/testing/web-platform/tests/css/css-color/color-mix-non-srgb-001.html new file mode 100644 index 0000000000..7563581a4c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-non-srgb-001.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1703356"> +<link rel="author" href="mailto:barret@brennie.ca" title="Barret Rennie"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="match" href="./color-mix-non-srgb-001-ref.html"> +<style> +div { color: black; } +.test { background-color: black; width: 14em; height: 1em; margin-top: 0; margin-bottom: 0; } +</style> +<body> +<script> +const TEST_CASES = [ + ["red", "green", "xyz", "rgb(188, 92, 0)"], + ["red", "green", "lab", "rgb(161, 108, 0)"], + ["red", "green", "lch", "rgb(145, 116, 0)"], + ["red", "green 90%", "xyz", "rgb(89, 122, 0)"], + ["red", "green 90%", "lab", "rgb(65, 126, 0)"], + ["red", "green 90%", "lch", "rgb(49, 128, 0)"], + ["red 90%", "green", "xyz", "rgb(243, 40, 0)"], + ["red 90%", "green", "lab", "rgb(237, 55, 0)"], + ["red 90%", "green", "lch", "rgb(235, 59, 0)"], +]; + +for (let [from, to, space, expected] of TEST_CASES) { + const value = `color-mix(in ${space}, ${from}, ${to})`; + + const element = document.createElement("div") + element.classList.add('test') + element.style.backgroundColor = value; + document.body.appendChild(element) +} +</script> +</body> diff --git a/testing/web-platform/tests/css/css-color/color-mix-percents-01-ref.html b/testing/web-platform/tests/css/css-color/color-mix-percents-01-ref.html new file mode 100644 index 0000000000..2d9a1380b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-percents-01-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 5: color-mix</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<style> + .test { background-color: rgb(68.4898% 36.015% 68.3102%); width: 14em; height: 14em; margin-top: 0; margin-bottom: 0;} +</style> +<body> + <p>Test passes if you see a purple square, and no red.</p> + <div class="test"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/color-mix-percents-01.html b/testing/web-platform/tests/css/css-color/color-mix-percents-01.html new file mode 100644 index 0000000000..425ef9a636 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-percents-01.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 5: color-mix</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#interpolation-space"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hue-interpolation"> +<link rel="match" href="./color-mix-percents-01-ref.html"> +<meta name="assert" content="missing percentages, percent normalization"> +<style> + .test { background-color: red; width: 14em; height: 2em; margin-top: 0; margin-bottom: 0;} + .t1 { background-color: rgb(68.4898% 36.015% 68.3102%); } + .t2 { background-color: color-mix(in lch, purple 50%, plum 50%);} + .t3 { background-color: color-mix(in lch, purple 50%, plum);} + .t4 { background-color: color-mix(in lch, purple, plum 50%); } + .t5 { background-color: color-mix(in lch, purple, plum);} + .t6 { background-color: color-mix(in lch, plum, purple);} + .t7 { background-color: color-mix(in lch, purple 80%, plum 80%);} +</style> +<body> + <p>Test passes if you see a purple square, and no red.</p> + <div class="test t1"></div> + <div class="test t2"></div> + <div class="test t3"></div> + <div class="test t4"></div> + <div class="test t5"></div> + <div class="test t6"></div> + <div class="test t7"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/color-mix-percents-02.html b/testing/web-platform/tests/css/css-color/color-mix-percents-02.html new file mode 100644 index 0000000000..27939f5109 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/color-mix-percents-02.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 5: color-mix</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#interpolation-space"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hue-interpolation"> +<link rel="match" href="./color-mix-percents-01-ref.html"> +<meta name="assert" content="percent normalization for opaque mixes"> +<style> + .test { background-color: red; width: 14em; height: 2em; margin-top: 0; margin-bottom: 0;} + .negative-test { background-color: rgb(68.4898% 36.015% 68.3102%); width: 14em; height: 2em; margin-top: 0; margin-bottom: 0;} + .t1 { background-color: rgb(68.4898% 36.015% 68.3102%); } + .t2 { background-color: color-mix(in lch, purple 50%, plum 50%);} + .t3 { background-color: color-mix(in lch, purple 55%, plum 55%);} + .t4 { background-color: color-mix(in lch, purple 70%, plum 70%); } + .t5 { background-color: color-mix(in lch, purple 95%, plum 95%);} + .t6 { background-color: color-mix(in lch, purple 125%, plum 125%);} + .t7 { background-color: color-mix(in lch, purple 9999%, plum 9999%);} +</style> +<body> + <p>Test passes if you see a purple square, and no red.</p> + <div class="test t1"></div> + <div class="test t2"></div> + <div class="test t3"></div> + <div class="test t4"></div> + <div class="test t5"></div> + <div class="negative-test t6"></div> + <div class="negative-test t7"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/composited-filters-under-opacity-ref.html b/testing/web-platform/tests/css/css-color/composited-filters-under-opacity-ref.html new file mode 100644 index 0000000000..73b420189e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/composited-filters-under-opacity-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<style> +div { + position: absolute; +} +.content { + width: 100px; + height: 150px; + position: absolute; + background: blue; +} +</style> +Below should be a light blue square in uniform color. +<div style="opacity: 0.5; will-change: opacity"> + <div class="content" style="left: 0"></div> + <div class="content" style="left: 50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-color/composited-filters-under-opacity.html b/testing/web-platform/tests/css/css-color/composited-filters-under-opacity.html new file mode 100644 index 0000000000..f613748af3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/composited-filters-under-opacity.html @@ -0,0 +1,20 @@ +<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency"> +<link rel="match" href="composited-filters-under-opacity-ref.html"> +<style> +div { + position: absolute; + will-change: opacity; +} +.content { + width: 100px; + height: 150px; + position: absolute; + background: yellow; + filter: invert(100%); +} +</style> +Below should be a light blue square in uniform color. +<div style="opacity: 0.5"> + <div class="content" style="left: 0"></div> + <div class="content" style="left: 50px"></div> +</div> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-001.html b/testing/web-platform/tests/css/css-color/currentcolor-001.html new file mode 100644 index 0000000000..e08129ee52 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: currentcolor</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="The keyword currentcolor takes its value from the value of the color property on the same element."> +<style> + .outer {color: red; background-color: red; font-size: 200%; width: 6em; height: 6em; } + .inner {color: green; background-color: currentColor; width: 6em; height: 6em; font-weight: bold;} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="outer"><div class="inner">FAIL</div></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-002.html b/testing/web-platform/tests/css/css-color/currentcolor-002.html new file mode 100644 index 0000000000..aa5d736c68 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: currentcolor</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="This happens at used-value time, which means that if the value is inherited, it’s inherited as currentcolor, not as the value of the color property, so descendants will use their own color property to resolve it."> +<style> + .outer {color: red; background-color: currentColor; font-size: 200%; width: 6em; height: 6em; } + .middle {background-color: inherit; width: 6em; height: 6em;} + .inner {color: green; background-color: inherit; width: 6em; height: 6em; font-weight: bold;} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="outer"><div class="middle"><div class="inner">FAIL</div></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-003-ref.html b/testing/web-platform/tests/css/css-color/currentcolor-003-ref.html new file mode 100644 index 0000000000..7cabf85f3b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-003-ref.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <style> + div.red { + color: red; + } + div.green { + color: green; + } + span { + box-decoration-break: clone; + -webkit-box-decoration-break: clone; + line-height: 50px; + background-image: linear-gradient(currentcolor, currentcolor); + background-color: currentColor; + background-size: 100% 75%; + background-repeat: no-repeat; + border: 5px solid currentColor; + outline: 5px solid currentColor; + box-shadow: 111px 0 5px currentColor; + text-shadow: 222px 0 2px currentColor; + filter: drop-shadow(333px 0 0 currentColor); + } + </style> + </head> + <body> + <p>The first and third lines should have no red. The second line should have no green</p> + <div class="green"><span>Lorem ipsum</span></div> + <div class="red"><span>dolor amet.</span></div> + <div class="green"><span>Lorem ipsum.</span></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-003.html b/testing/web-platform/tests/css/css-color/currentcolor-003.html new file mode 100644 index 0000000000..d3ad9c4c15 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-003.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>CSS Color 4: currentcolor</title> + <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> + <link rel="author" title="Mike Bremford" href="mailto:mike@bfo.com"> + <link rel="help" href="https://drafts.csswg.org/css-color-4/#currentcolor-color"> + <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#fragments"> + <link rel="match" href="currentcolor-003-ref.html"> + <meta name="assert" content="The currentcolor value applies to the first-line fragment, as discussed in https://github.com/w3c/csswg-drafts/issues/1510"> + <style> + div { + color: red; + } + div::first-line { + color: green; + } + br { + line-height: 0; + } + span { + box-decoration-break: clone; + -webkit-box-decoration-break: clone; + line-height: 50px; + background-image: linear-gradient(currentcolor, currentcolor); + background-color: currentColor; + background-size: 100% 75%; + background-repeat: no-repeat; + border: 5px solid currentColor; + outline: 5px solid currentColor; + box-shadow: 111px 0 5px currentColor; + text-shadow: 222px 0 2px currentColor; + filter: drop-shadow(333px 0 0 currentColor); + } + </style> + </head> + <body> + <p>The first and third lines should have no red. The second line should have no green</p> + <div><span>Lorem ipsum<br />dolor amet.</span></div> + <div><span>Lorem ipsum.</span></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-004-ref.html b/testing/web-platform/tests/css/css-color/currentcolor-004-ref.html new file mode 100644 index 0000000000..835e4b81e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +* { + color: green; +} +</style> +<div> + <a href=""><div>This should be green and not red.</div></a> +</div> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-004.html b/testing/web-platform/tests/css/css-color/currentcolor-004.html new file mode 100644 index 0000000000..06a429071a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-004.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="match" href="currentcolor-004-ref.html"> +<title>currentcolor and visited inherited parent color</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-other-colors"> +<link rel="author" title="Matthieu Dubet" href="https://github.com/mdubet"> +<style> +a { color: red; } +a:visited { color: green; } +div { + color: currentcolor; +} +</style> +<div> + <a href=""><div>This should be green and not red.</div></a> +</div> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-visited-fallback-ref.html b/testing/web-platform/tests/css/css-color/currentcolor-visited-fallback-ref.html new file mode 100644 index 0000000000..8e6bf0d336 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-visited-fallback-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>currentcolor and visited inherited parent color fallback</title> +<style> +a { + color: green; +} +</style> +<div> + <a href="">This should be green</a> +</div> +<div> + <a href="">This should be green</a> +</div> diff --git a/testing/web-platform/tests/css/css-color/currentcolor-visited-fallback.html b/testing/web-platform/tests/css/css-color/currentcolor-visited-fallback.html new file mode 100644 index 0000000000..a83506b5e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/currentcolor-visited-fallback.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="match" href="currentcolor-visited-fallback-ref.html"> +<title>currentcolor and visited inherited parent color fallback</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-other-colors"> +<link rel="author" title="Matthieu Dubet" href="https://github.com/mdubet"> +<style> +body { color: red; } +div { color: green; } +a { + color: currentcolor; +} +</style> +<div> + <a href="">This should be green</a> +</div> +<div> + <a href="unvisited">This should be green</a> +</div> diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-001.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-001.html new file mode 100644 index 0000000000..b03af9eb29 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-001.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder"> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: ActiveBorder) { + .test { background-color: ActiveBorder; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-002.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-002.html new file mode 100644 index 0000000000..873b320251 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas"> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: ActiveCaption) { + .test { background-color: ActiveCaption; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-003.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-003.html new file mode 100644 index 0000000000..b0a5466e8f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: AppWorkspace) { + .test { background-color: AppWorkspace; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-004.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-004.html new file mode 100644 index 0000000000..8be2be1eb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-004.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: Background) { + .test { background-color: Background; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-005.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-005.html new file mode 100644 index 0000000000..8ed192f2b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-005.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonFace-ref.html"> +<meta name="assert" content="Same as ButtonFace. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonFace; width: 12em; height: 6em; } + @supports (color: ButtonHighlight) { + .test { background-color: ButtonHighlight; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-006.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-006.html new file mode 100644 index 0000000000..1a1a4776ef --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-006.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonFace-ref.html"> +<meta name="assert" content="Same as ButtonFace. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonFace; width: 12em; height: 6em; } + @supports (color: ButtonShadow) { + .test { background-color: ButtonShadow; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-007.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-007.html new file mode 100644 index 0000000000..b10783723d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-007.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-CanvasText-ref.html"> +<meta name="assert" content="Same as CanvasText. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: CanvasText; width: 12em; height: 6em; } + @supports (color: CaptionText) { + .test { background-color: CaptionText; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-008.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-008.html new file mode 100644 index 0000000000..e8ffb84574 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-008.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: InactiveBorder) { + .test { background-color: InactiveBorder; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-009.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-009.html new file mode 100644 index 0000000000..4940e6de67 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-009.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: InactiveCaption) { + .test { background-color: InactiveCaption; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-010.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-010.html new file mode 100644 index 0000000000..53e2588f9b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-010.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-GrayText-ref.html"> +<meta name="assert" content="Same as GrayText. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: GrayText; width: 12em; height: 6em; } + @supports (color: InactiveCaptionText) { + .test { background-color: InactiveCaptionText; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-011.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-011.html new file mode 100644 index 0000000000..3a15d01501 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-011.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: InfoBackground) { + .test { background-color: InfoBackground; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-012.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-012.html new file mode 100644 index 0000000000..14d7ebf834 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-012.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-CanvasText-ref.html"> +<meta name="assert" content="Same as CanvasText. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: CanvasText; width: 12em; height: 6em; } + @supports (color: InfoText) { + .test { background-color: InfoText; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-013.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-013.html new file mode 100644 index 0000000000..374ab4775a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-013.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: Menu) { + .test { background-color: Menu; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-014.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-014.html new file mode 100644 index 0000000000..3ee9a8e088 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-014.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-CanvasText-ref.html"> +<meta name="assert" content="Same as CanvasText. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: CanvasText; width: 12em; height: 6em; } + @supports (color: MenuText) { + .test { background-color: MenuText; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-015.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-015.html new file mode 100644 index 0000000000..71aba26527 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-015.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas. "> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: Scrollbar) { + .test { background-color: Scrollbar; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-016.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-016.html new file mode 100644 index 0000000000..3a1e9cbf1f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-016.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: ThreeDDarkShadow) { + .test { background-color: ThreeDDarkShadow; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-017.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-017.html new file mode 100644 index 0000000000..eed5571ff2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-017.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonFace-ref.html"> +<meta name="assert" content="Same as ButtonFace."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonFace; width: 12em; height: 6em; } + @supports (color: ThreeDFace) { + .test { background-color: ThreeDFace; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-018.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-018.html new file mode 100644 index 0000000000..11e3e3a1bd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-018.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: ThreeDHighlight) { + .test { background-color: ThreeDHighlight; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-019.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-019.html new file mode 100644 index 0000000000..c99239e2ef --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-019.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: ThreeDLightShadow) { + .test { background-color: ThreeDLightShadow; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-020.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-020.html new file mode 100644 index 0000000000..85dc1261d3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-020.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: ThreeDShadow) { + .test { background-color: ThreeDShadow; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-021.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-021.html new file mode 100644 index 0000000000..ce3de2f3b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-021.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-Canvas-ref.html"> +<meta name="assert" content="Same as Canvas."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: Canvas; width: 12em; height: 6em; } + @supports (color: Window) { + .test { background-color: Window; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-022.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-022.html new file mode 100644 index 0000000000..c873dc2d10 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-022.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-ButtonBorder-ref.html"> +<meta name="assert" content="Same as ButtonBorder."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: ButtonBorder; width: 12em; height: 6em; } + @supports (color: WindowFrame) { + .test { background-color: WindowFrame; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-023.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-023.html new file mode 100644 index 0000000000..a074329c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-023.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#deprecated-system-colors"> +<link rel="match" href="deprecated-sameas-CanvasText-ref.html"> +<meta name="assert" content="Same as CanvasText."> +<style> + .test { background-color: red; width: 12em; height: 6em; } + .ref { background-color: CanvasText; width: 12em; height: 6em; } + @supports (color: WindowText) { + .test { background-color: WindowText; } + } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="test"></div> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-ButtonBorder-ref.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-ButtonBorder-ref.html new file mode 100644 index 0000000000..99359aa4a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-ButtonBorder-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<style> + .ref { background-color: ButtonBorder; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-ButtonFace-ref.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-ButtonFace-ref.html new file mode 100644 index 0000000000..63b14e4fda --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-ButtonFace-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<style> + .ref { background-color: ButtonFace; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-Canvas-ref.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-Canvas-ref.html new file mode 100644 index 0000000000..503cc13e7a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-Canvas-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<style> + .ref { background-color: Canvas; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-CanvasText-ref.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-CanvasText-ref.html new file mode 100644 index 0000000000..a66c6ebce3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-CanvasText-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<style> + .ref { background-color: CanvasText; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/deprecated-sameas-GrayText-ref.html b/testing/web-platform/tests/css/css-color/deprecated-sameas-GrayText-ref.html new file mode 100644 index 0000000000..83d736c664 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/deprecated-sameas-GrayText-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: deprecated system colors</title> +<style> + .ref { background-color: GrayText; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a square, not two rectangles of different colors; and no red.</p> + <div class="ref"></div> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/display-p3-001.html b/testing/web-platform/tests/css/css-color/display-p3-001.html new file mode 100644 index 0000000000..74fe34a7ca --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: display-p3</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="display-p3 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(display-p3 0.21604 0.49418 0.13151); } /* green (sRGB #008000) converted to display-p3 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/display-p3-002.html b/testing/web-platform/tests/css/css-color/display-p3-002.html new file mode 100644 index 0000000000..6a930298d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: display-p3</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="display-p3 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(display-p3 0 0 0); } /* black (sRGB #000000) converted to display-p3 */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/display-p3-003.html b/testing/web-platform/tests/css/css-color/display-p3-003.html new file mode 100644 index 0000000000..122c0f0a13 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: display-p3</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined"> +<link rel="match" href="./whitesquare-ref.html"> +<meta name="assert" content="display-p3 with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(100% 100% 100%); width: 12em; height: 6em; margin-bottom: 0; } /* color(display-p3 1 1 1) converted to sRGB */ + .test { background-color: color(display-p3 1 1 1); } +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/display-p3-004-ref.html b/testing/web-platform/tests/css/css-color/display-p3-004-ref.html new file mode 100644 index 0000000000..fd1c8a67c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4:display-p3</title> +<style> + .test { background-color: lab(86.61399% -106.539 102.871); width: 12em; height: 12em; } /* color(display-p3 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/display-p3-004.html b/testing/web-platform/tests/css/css-color/display-p3-004.html new file mode 100644 index 0000000000..8b0999adbe --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-004.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: display-p3</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="display-p3-004-ref.html"> +<meta name="assert" content="display-p3 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(86.61399% -106.539 102.871); width: 12em; height: 6em; margin-bottom: 0; } /* color(display-p3 0 1 0) converted to Lab */ + .test { background-color: color(display-p3 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/display-p3-005.html b/testing/web-platform/tests/css/css-color/display-p3-005.html new file mode 100644 index 0000000000..db255dc60c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-005.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: display-p3</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-predefined"> +<link rel="match" href="./yellowsquare-ref.html"> +<meta name="assert" content="display-p3 with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: yellow; width: 12em; height: 6em; margin-bottom: 0; } /* sRGB yellow converted to display-p3 */ + .test { background-color: color(display-p3 1 1 0.330897); } +</style> +<body> + <p>Test passes if you see a yellow square, and no red.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/display-p3-006.html b/testing/web-platform/tests/css/css-color/display-p3-006.html new file mode 100644 index 0000000000..0285af8ba2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/display-p3-006.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: display-p3 and sRGB with medium chroma</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-sRGB"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="mossgreensquare-ref.html"> +<meta name="assert" content="display-p3 with no alpha"> +<style> + .test, .test2 { background-color: red; width: 12em; height: 4em; } + .ref {background-color: rgb(44.8436% 53.537% 28.8112%); width: 12em; height: 4em; } + /* lch(54% 35 118) converted to legacy sRGB */ + .test { background-color: color(display-p3 0.465377 0.532768 0.317713); } + /* lch(54% 35 118) converted to display-p3 */ + .test2 {background-color: color(srgb 0.448436 0.53537 0.288113); } + /* lch(54% 35 118) converted to color(sRGB) */ +</style> +<body> + <p>Test passes if you see a moss green square, and no red.</p> + <div class="test"></div> + <div class="ref"></div> + <div class="test2"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/filters-under-will-change-opacity.html b/testing/web-platform/tests/css/css-color/filters-under-will-change-opacity.html new file mode 100644 index 0000000000..feb5355f8b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/filters-under-will-change-opacity.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency"> +<link rel="match" href="composited-filters-under-opacity-ref.html"> +<script src="/common/rendering-utils.js"></script> +<script src="/common/reftest-wait.js"></script> +<style> +div { + position: absolute; + will-change: opacity; +} +.filter { + width: 100px; + height: 150px; + position: absolute; + background: yellow; + filter: invert(100%); +} +</style> +Below should be a light blue square in uniform color. +<div id="target" style="opacity: 1"> + <div class="filter" style="left: 0"></div> + <div class="filter" style="left: 50px"></div> +</div> +<script> +waitForAtLeastOneFrame().then(() => { + target.style.opacity = 0.5; + takeScreenshot(); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-color/greensquare-090-ref.html b/testing/web-platform/tests/css/css-color/greensquare-090-ref.html new file mode 100644 index 0000000000..18bdcf55c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/greensquare-090-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Green square #009900 reference</title> +<style> + .test { background-color: #009900; width: 12em; height: 12em;} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/greensquare-display-p3-ref.html b/testing/web-platform/tests/css/css-color/greensquare-display-p3-ref.html new file mode 100644 index 0000000000..2134c9681f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/greensquare-display-p3-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Green square color(display-p3 0 1 0) reference</title> +<style> + .test { background-color: color(display-p3 0 1 0); width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/greensquare-ref.html b/testing/web-platform/tests/css/css-color/greensquare-ref.html new file mode 100644 index 0000000000..35a31f8f56 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/greensquare-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Green square reference</title> +<style> + .test { background-color: #008000; width: 12em; height: 12em;} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/greentext-ref.html b/testing/web-platform/tests/css/css-color/greentext-ref.html new file mode 100644 index 0000000000..1f6d079700 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/greentext-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Green text reference</title> +<style> + .test { color: #008000} +</style> +<body> + <p class="test">Test passes if this text is green</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hex-001.html b/testing/web-platform/tests/css/css-color/hex-001.html new file mode 100644 index 0000000000..0c90f87787 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hex-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="6 digit hex"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: #008000} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hex-002.html b/testing/web-platform/tests/css/css-color/hex-002.html new file mode 100644 index 0000000000..ee3f5a45ee --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hex-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="8 digit hex, fully opaque"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: #008000FF} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hex-003-ref.html b/testing/web-platform/tests/css/css-color/hex-003-ref.html new file mode 100644 index 0000000000..dc7e324e0e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hex-003-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Green text reference for hex shorthand tests</title> +<style> + .test { background-color: #007700; width: 12em; height: 12em;} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hex-003.html b/testing/web-platform/tests/css/css-color/hex-003.html new file mode 100644 index 0000000000..2ee4ec61e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hex-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"> +<link rel="match" href="hex-003-ref.html"> +<meta name="assert" content="3 digit hex"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #007700; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: #070} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hex-004.html b/testing/web-platform/tests/css/css-color/hex-004.html new file mode 100644 index 0000000000..39e12ffee1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hex-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: The RGB hexadecimal notations: #RRGGBB</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"> +<meta name="assert" content="4 digit hex, fully opaque"> +<link rel="match" href="hex-003-ref.html"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #007700; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: #070F} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-001.html b/testing/web-platform/tests/css/css-color/hsl-001.html new file mode 100644 index 0000000000..a71ce6bad6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hsl() with number and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsl(120 100% 25%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-002.html b/testing/web-platform/tests/css/css-color/hsl-002.html new file mode 100644 index 0000000000..fae6126fdc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hsl() with angle and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: hsl(120deg 100% 25%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-003.html b/testing/web-platform/tests/css/css-color/hsl-003.html new file mode 100644 index 0000000000..e175e2a2ff --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hsl() with number and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: hsl(120 100% 25% / 1.0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-004.html b/testing/web-platform/tests/css/css-color/hsl-004.html new file mode 100644 index 0000000000..2af529158e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hsl() with angle and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsl(120deg 100% 25% / 1)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-005.html b/testing/web-platform/tests/css/css-color/hsl-005.html new file mode 100644 index 0000000000..7dc793595b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hsl() with number and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsl(120 100% 25% / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-006.html b/testing/web-platform/tests/css/css-color/hsl-006.html new file mode 100644 index 0000000000..348a8a80c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hsl() with angle and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsl(120deg 100% 25% / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-007.html b/testing/web-platform/tests/css/css-color/hsl-007.html new file mode 100644 index 0000000000..9e1bc08add --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-007.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsl() with number and percent alpha, and commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsl(120, 100%, 25%, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsl-008.html b/testing/web-platform/tests/css/css-color/hsl-008.html new file mode 100644 index 0000000000..1024a1f83c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsl-008.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsl() with angle and percent alpha, with commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsl(120deg, 100%, 25%, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-001.html b/testing/web-platform/tests/css/css-color/hsla-001.html new file mode 100644 index 0000000000..c3b2633a0a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with number and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120 100% 25%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-002.html b/testing/web-platform/tests/css/css-color/hsla-002.html new file mode 100644 index 0000000000..a51c5f2b96 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-002.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with angle and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120deg 100% 25%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-003.html b/testing/web-platform/tests/css/css-color/hsla-003.html new file mode 100644 index 0000000000..c984593436 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with number and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120 100% 25% / 1.0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-004.html b/testing/web-platform/tests/css/css-color/hsla-004.html new file mode 100644 index 0000000000..aa095cafa5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with angle and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120deg 100% 25% / 1)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-005.html b/testing/web-platform/tests/css/css-color/hsla-005.html new file mode 100644 index 0000000000..ab88515c57 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with number and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120 100% 25% / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-006.html b/testing/web-platform/tests/css/css-color/hsla-006.html new file mode 100644 index 0000000000..f9a93cd2c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with angle and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120deg 100% 25% / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-007.html b/testing/web-platform/tests/css/css-color/hsla-007.html new file mode 100644 index 0000000000..8c583fcda0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-007.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with number and percent alpha, and commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120, 100%, 25%, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/hsla-008.html b/testing/web-platform/tests/css/css-color/hsla-008.html new file mode 100644 index 0000000000..e5aaa24373 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hsla-008.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: HSL functions hsl() and hsla()</title> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy hsla() with angle and percent alpha, with commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: hsla(120deg, 100%, 25%, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/htaccess b/testing/web-platform/tests/css/css-color/htaccess new file mode 100644 index 0000000000..26cbb024e8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/htaccess @@ -0,0 +1,23 @@ +# Define some types +AddType application/xhtml+xml .xht +AddType text/html .htm +AddType text/css .css +AddType image/png .png + +# Set the default character set +AddDefaultCharset utf-8 + +# Indexing Options +Options +Indexes +IndexOptions DescriptionWidth=* NameWidth=* FancyIndexing FoldersFirst ScanHTMLTitles +IndexIgnore .htaccess *~ .#* #*# CVS README +ReadmeName README + +# Set up the README files to be plain text +<files README> + ForceType text/plain + SetHandler default-handler +</files> + +# Add some default descriptions +AddDescription "Information about the files in this directory" README diff --git a/testing/web-platform/tests/css/css-color/hwb-001.html b/testing/web-platform/tests/css/css-color/hwb-001.html new file mode 100644 index 0000000000..d1dce30c8e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: hwb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="hwb() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: hwb(120 0% 49.8039%); } /* green (sRGB #008000) converted to hwb */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-002.html b/testing/web-platform/tests/css/css-color/hwb-002.html new file mode 100644 index 0000000000..1850c999b5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: hwb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="hwb() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: hwb(0 0% 100%); } /* black (sRGB #000000) converted to hwb */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-003-ref.html b/testing/web-platform/tests/css/css-color/hwb-003-ref.html new file mode 100644 index 0000000000..ae89347ea5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-003-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: hwb</title> +<style> + .test { background-color: rgb(50% 50% 50%); width: 12em; height: 12em; } /* hwb(0 100% 100%) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-003.html b/testing/web-platform/tests/css/css-color/hwb-003.html new file mode 100644 index 0000000000..f56a68a5dc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: hwb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="match" href="hwb-003-ref.html"> +<meta name="assert" content="hwb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(50% 50% 50%); width: 12em; height: 6em; margin-bottom: 0; } /* hwb(0 100% 100%) converted to sRGB */ + .test { background-color: hwb(0 100% 100%); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-004-ref.html b/testing/web-platform/tests/css/css-color/hwb-004-ref.html new file mode 100644 index 0000000000..ac0035accc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: hwb</title> +<style> + .test { background-color: rgb(20% 70% 20%); width: 12em; height: 12em; } /* hwb(120 20% 30%) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-004.html b/testing/web-platform/tests/css/css-color/hwb-004.html new file mode 100644 index 0000000000..31b1dc5ad5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: hwb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="match" href="hwb-004-ref.html"> +<meta name="assert" content="hwb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(20% 70% 20%); width: 12em; height: 6em; margin-bottom: 0; } /* hwb(120 20% 30%) converted to sRGB */ + .test { background-color: hwb(120 20% 30%); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-005-ref.html b/testing/web-platform/tests/css/css-color/hwb-005-ref.html new file mode 100644 index 0000000000..1476e69d47 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-005-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: hwb</title> +<style> + .test { background-color: rgb(53.8462% 53.8462% 53.8462%); width: 12em; height: 12em; } /* hwb(120 70% 60%) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/hwb-005.html b/testing/web-platform/tests/css/css-color/hwb-005.html new file mode 100644 index 0000000000..e3603e9a90 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/hwb-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: hwb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="match" href="hwb-005-ref.html"> +<meta name="assert" content="hwb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(53.8462% 53.8462% 53.8462%); width: 12em; height: 6em; margin-bottom: 0; } /* hwb(120 70% 60%) converted to sRGB */ + .test { background-color: hwb(120 70% 60%); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/inheritance.html b/testing/web-platform/tests/css/css-color/inheritance.html new file mode 100644 index 0000000000..2928bfa3bb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/inheritance.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>Inheritance of CSS Color properties</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#property-index"> +<meta name="assert" content="Properties inherit or not according to the spec."> +<meta name="assert" content="Properties have initial values according to the spec."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/inheritance-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<script> +assert_inherited('color', 'rgb(0, 0, 0)', 'rgb(42, 53, 64)'); +assert_not_inherited('opacity', '1', '0.5'); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/inline-opacity-float-child.html b/testing/web-platform/tests/css/css-color/inline-opacity-float-child.html new file mode 100644 index 0000000000..98afcbcc2d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/inline-opacity-float-child.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content="Opacity on an inline element should apply on float child."> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; background: green"> + <span style="opacity: 0"> + <div style="width: 100px; height: 100px; float: left; background: red"></div> + </span> +</div> diff --git a/testing/web-platform/tests/css/css-color/lab-001.html b/testing/web-platform/tests/css/css-color/lab-001.html new file mode 100644 index 0000000000..177cf96ef1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="lab() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lab(46.2775% -47.5621 48.5837); } /* green (sRGB #008000) converted to Lab */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-002.html b/testing/web-platform/tests/css/css-color/lab-002.html new file mode 100644 index 0000000000..e30696995d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="lab() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lab(0% 0 0); } /* black (sRGB #000000) converted to Lab */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-003.html b/testing/web-platform/tests/css/css-color/lab-003.html new file mode 100644 index 0000000000..9308e16456 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="whitesquare-ref.html"> +<meta name="assert" content="lab() with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lab(100% 0 0); } /* white (sRGB #FFFFFF) converted to Lab */ +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-004-ref.html b/testing/web-platform/tests/css/css-color/lab-004-ref.html new file mode 100644 index 0000000000..d7c83b0766 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 12em; } /* lab(50% 50 0) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-004.html b/testing/web-platform/tests/css/css-color/lab-004.html new file mode 100644 index 0000000000..b2ebfc187a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lab-004-ref.html"> +<meta name="assert" content="lab() with no alpha, positive a axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 6em; margin-bottom: 0; }/* lab(50% 50 0) converted to sRGB */ + .test { background-color: lab(50% 50 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-005-ref.html b/testing/web-platform/tests/css/css-color/lab-005-ref.html new file mode 100644 index 0000000000..d7b01c4c86 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-005-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(10.751% 75.558% 66.398%); width: 12em; height: 12em; } /* lab(70% -45 0) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-005.html b/testing/web-platform/tests/css/css-color/lab-005.html new file mode 100644 index 0000000000..532d84f14b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lab-005-ref.html"> +<meta name="assert" content="lab() with no alpha, negative a axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(10.751% 75.558% 66.398%); width: 12em; height: 6em; margin-bottom: 0; } /* lab(70% -45 0) converted to sRGB */ + .test { background-color: lab(70% -45 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-006-ref.html b/testing/web-platform/tests/css/css-color/lab-006-ref.html new file mode 100644 index 0000000000..1525205772 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-006-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 12em; } /* lab(70% 0 70) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-006.html b/testing/web-platform/tests/css/css-color/lab-006.html new file mode 100644 index 0000000000..55d6351ddb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lab-006-ref.html"> +<meta name="assert" content="lab() with no alpha, positive b axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 6em; margin-bottom: 0; } /* lab(70% 0 70) converted to sRGB */ + .test { background-color: lab(70% 0 70); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-007-ref.html b/testing/web-platform/tests/css/css-color/lab-007-ref.html new file mode 100644 index 0000000000..9d0bc0c6c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-007-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(12.8128% 53.105% 92.7645%); width: 12em; height: 12em; } /* lab(55% 0 -60) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-007.html b/testing/web-platform/tests/css/css-color/lab-007.html new file mode 100644 index 0000000000..89edbb7549 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-007.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lab-007-ref.html"> +<meta name="assert" content="lab() with no alpha, negative b axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(12.8128% 53.105% 92.7645%); width: 12em; height: 6em; margin-bottom: 0; } /* lab(55% 0 -60) converted to sRGB */ + .test { background-color: lab(55% 0 -60); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lab-008.html b/testing/web-platform/tests/css/css-color/lab-008.html new file mode 100644 index 0000000000..b0510a620e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-008.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="lab() outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lab(86.6146% -106.5599 102.8717); } /* green color(display-p3 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> 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 new file mode 100644 index 0000000000..287eba9824 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0 to 100</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#cie-lab"> +<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} + /* l = 150 should clamp back to 100 */ + .test { background-color: lab(150 150 20); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..e85d289d21 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in Lab is always clamped to a value between 0% to 100%</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#cie-lab"> +<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} + /* l = 150 should clamp back to 100 */ + .test { background-color: lab(150% 150 20); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..57328cfa7c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lab-l-over-100-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<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} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-001.html b/testing/web-platform/tests/css/css-color/lch-001.html new file mode 100644 index 0000000000..904e2e5bd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="lch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lch(46.2775% 67.9892 134.3912); } /* green (sRGB #008000) converted to LCH */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-002.html b/testing/web-platform/tests/css/css-color/lch-002.html new file mode 100644 index 0000000000..7eec1a14ac --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="lch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lch(0% 0 0); } /* black (sRGB #000000) converted to LCH */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-003.html b/testing/web-platform/tests/css/css-color/lch-003.html new file mode 100644 index 0000000000..f323d4978c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="whitesquare-ref.html"> +<meta name="assert" content="lch() with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lch(100% 0 0); } /* white (sRGB #FFFFFF) converted to LCH */ +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-004-ref.html b/testing/web-platform/tests/css/css-color/lch-004-ref.html new file mode 100644 index 0000000000..2bc1e82857 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 12em; } /* lch(50% 50 0) converted to sRGB (happens to be the same as lab(50% 50 0)) */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-004.html b/testing/web-platform/tests/css/css-color/lch-004.html new file mode 100644 index 0000000000..30eac45422 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lch-004-ref.html"> +<meta name="assert" content="lch() with no alpha, positive a axis (when converted to Lab)"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(75.6208% 30.4487% 47.5634%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(50% 50 0) converted to sRGB (happens to be the same as lab(50% 50 0)) */ + .test { background-color: lch(50% 50 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-005-ref.html b/testing/web-platform/tests/css/css-color/lch-005-ref.html new file mode 100644 index 0000000000..d2164159fe --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-005-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(10.7506% 75.5575% 66.3981%); width: 12em; height: 12em; } /* lch(70% 45 180) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-005.html b/testing/web-platform/tests/css/css-color/lch-005.html new file mode 100644 index 0000000000..3986ddc11b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lch-005-ref.html"> +<meta name="assert" content="lch() with no alpha, negative a axis (when converted to Lab)"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(10.7506% 75.5575% 66.3981%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(70% 45 180) converted to sRGB */ + .test { background-color: lch(70% 45 -180); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-006-ref.html b/testing/web-platform/tests/css/css-color/lch-006-ref.html new file mode 100644 index 0000000000..bfe6d8dbf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-006-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 12em; } /* lch(70% 70 90) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-006.html b/testing/web-platform/tests/css/css-color/lch-006.html new file mode 100644 index 0000000000..457e88d405 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lch-006-ref.html"> +<meta name="assert" content="lch() with no alpha, positive b axis (when converted to Lab)"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(76.6254% 66.3607% 5.5775%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(70% 70 90) converted to sRGB */ + .test { background-color: lch(70% 70 90); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-007-ref.html b/testing/web-platform/tests/css/css-color/lch-007-ref.html new file mode 100644 index 0000000000..95a260e8f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-007-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<style> + .test { background-color: rgb(12.8128% 53.105% 92.7645%); width: 12em; height: 12em; } /* lch(55% 60 270) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-007.html b/testing/web-platform/tests/css/css-color/lch-007.html new file mode 100644 index 0000000000..009347c1af --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-007.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="lch-007-ref.html"> +<meta name="assert" content="lch() with no alpha, negative b axis (when converted to Lab)"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(12.8128% 53.105% 92.7645%); width: 12em; height: 6em; margin-bottom: 0; } /* lch(55% 60 270) converted to sRGB */ + .test { background-color: lch(55% 60 270); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-008.html b/testing/web-platform/tests/css/css-color/lch-008.html new file mode 100644 index 0000000000..feedb9853b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-008.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="lch() outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: lch(86.6146% 148.1135 136.0089); } /* green color(display-p3 0 1 0) converted to LCH */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-009.html b/testing/web-platform/tests/css/css-color/lch-009.html new file mode 100644 index 0000000000..375fd08de5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-009.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Vasilis van Gemert" href="mailto:wpt@vasilis.nl"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="whitesquare-ref.html"> +<meta name="assert" content="lch() with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: hsl(0, 100%, 63%); width: 12em; height: 12em; } + .test { background-color: lch(100% 110 60); } /* l = 100% should always be white */ +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/lch-010.html b/testing/web-platform/tests/css/css-color/lch-010.html new file mode 100644 index 0000000000..965e05ff5d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-010.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Specifying Lab and LCH</title> +<link rel="author" title="Vasilis van Gemert" href="mailto:wpt@vasilis.nl"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-lab-lch"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="lch() with no alpha"> +<style> + .test { background-color: hsl(0, 100%, 63%); width: 12em; height: 12em; } + .test { background-color: lch(0% 110 60); } /* l = 0% should always be black */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></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 new file mode 100644 index 0000000000..6e0c62330c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in LCH is always clamped to a value between 0 to 100</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#cie-lab"> +<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} + /* l = 150 should clamp back to 100 */ + .test { background-color: lch(150 150 20); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..7752d0dc0e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in LCH is always clamped to a value between 0% to 100%</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#cie-lab"> +<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} + /* l = 150% should clamp back to 100% */ + .test { background-color: lch(150% 150 20); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..67766274e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/lch-l-over-100-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<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} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/light-dark-basic.html b/testing/web-platform/tests/css/css-color/light-dark-basic.html new file mode 100644 index 0000000000..ee05332238 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/light-dark-basic.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>light-dark() color-scheme propagation</title> +<script src=/resources/testharness.js></script> +<script src=/resources/testharnessreport.js></script> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7561"> +<div id="system"></div> +<div id="light" style="color-scheme: light"></div> +<div id="dark" style="color-scheme: dark"></div> +<script> +const system_is_dark = matchMedia("(prefers-color-scheme: dark)").matches; +const elements = ["system", "light", "dark"].map(document.getElementById.bind(document)); +function test_light_dark(color, expected_light, expected_dark) { + test(() => { + for (let element of elements) { + let should_be_dark = element.id == "dark" || (element.id == "system" && system_is_dark); + element.style.backgroundColor = color; + assert_not_equals(element.style.backgroundColor, "", "Should be valid"); + assert_equals(getComputedStyle(element).backgroundColor, should_be_dark ? expected_dark : expected_light); + } + }, color); +} + +test_light_dark("light-dark(white, black)", "rgb(255, 255, 255)", "rgb(0, 0, 0)"); +test_light_dark("light-dark(light-dark(white, red), red)", "rgb(255, 255, 255)", "rgb(255, 0, 0)"); +</script> diff --git a/testing/web-platform/tests/css/css-color/light-dark-currentcolor-in-color.html b/testing/web-platform/tests/css/css-color/light-dark-currentcolor-in-color.html new file mode 100644 index 0000000000..7a95ea0b8f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/light-dark-currentcolor-in-color.html @@ -0,0 +1,21 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CurrentColor can be used inside light-dark for the color property</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#light-dark"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #parent { color: green; } + #child { + color-scheme: dark; + color: light-dark(red, currentColor); + } +</style> +<div id="parent"> + <div id="child">Text should be green</div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(child).color, "rgb(0, 128, 0)"); + }, "curentColor in light-dark() refers to parent color"); +</script> diff --git a/testing/web-platform/tests/css/css-color/light-dark-currentcolor.html b/testing/web-platform/tests/css/css-color/light-dark-currentcolor.html new file mode 100644 index 0000000000..512a492b29 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/light-dark-currentcolor.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CurrentColor can be used inside light-dark</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7561"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<style> +.square { + width: 100px; + height: 100px; + color: green; + background-color: light-dark(currentColor, currentColor); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="square"></div> diff --git a/testing/web-platform/tests/css/css-color/light-dark-inheritance.html b/testing/web-platform/tests/css/css-color/light-dark-inheritance.html new file mode 100644 index 0000000000..1128b57319 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/light-dark-inheritance.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<title>light-dark() computes to the actual value, like system colors</title> +<link rel="help" href="https://drafts.csswg.org/css-color-adjust/#color-scheme-effect"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7561"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square-only.html"> +<style> +.square { + width: 100px; + height: 100px; + color-scheme: dark; + background-color: currentColor; +} +.container { + color-scheme: light; + color: light-dark(green, red); +} +</style> +<p>Test passes if there is a filled green square.</p> +<div class="container"> + <div class="square"></div> +</div> diff --git a/testing/web-platform/tests/css/css-color/mossgreensquare-ref.html b/testing/web-platform/tests/css/css-color/mossgreensquare-ref.html new file mode 100644 index 0000000000..06f866c02d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/mossgreensquare-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Moss green (medium chroma) square reference</title> +<style> + .test { background-color: rgb(44.8436% 53.537% 28.8112%); width: 12em; height: 12em;} +</style> +<body> + <p>Test passes if you see a moss green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/named-001.html b/testing/web-platform/tests/css/css-color/named-001.html new file mode 100644 index 0000000000..61a98dcb7b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/named-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Named colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#named-colors"> +<link rel="match" href="rebeccapurple-ref.html"> +<meta name="assert" content="New named color, rebeccapurple"> +<style> + .outer {background: red; width: 10em; height: 10em;} + .inner {background: rebeccapurple; width: 10em; height: 10em;} +</style> +<body> + <p>Test passes if you see a purple square and no red.</p> + <div class="outer"><div class="inner"></div></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/nested-color-mix-with-currentcolor.html b/testing/web-platform/tests/css/css-color/nested-color-mix-with-currentcolor.html new file mode 100644 index 0000000000..2f24d62b54 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/nested-color-mix-with-currentcolor.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Color: Nested color-mix() with currentColor</title> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#color-mix"> +<link rel="help" href="https://www.w3.org/TR/css-color-5/#resolving-color-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #parent { + color: red; + background-color: color-mix(in lch, color-mix(in lch, black, currentColor), black); + } + #child { + color: black; + background-color: inherit; + } +</style> +<div id="parent"> + <div id="child"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(child).backgroundColor, "lch(0 0 none)"); + }, "Nested color-mix function with inner currentColor should inherit unresolved"); +</script> diff --git a/testing/web-platform/tests/css/css-color/oklab-001.html b/testing/web-platform/tests/css/css-color/oklab-001.html new file mode 100644 index 0000000000..835a8ca4a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="oklab() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklab(51.975% -0.1403 0.10768); } /* green (sRGB #008000) converted to OKLab */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-002.html b/testing/web-platform/tests/css/css-color/oklab-002.html new file mode 100644 index 0000000000..4ddf4d9e7e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="oklab() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklab(0% 0 0); } /* black (sRGB #000000) converted to OKLab */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-003.html b/testing/web-platform/tests/css/css-color/oklab-003.html new file mode 100644 index 0000000000..38c921e31a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="whitesquare-ref.html"> +<meta name="assert" content="oklab() with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklab(100% 0 0); } /* white (sRGB #FFFFFF) converted to OKLab */ +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-004-ref.html b/testing/web-platform/tests/css/css-color/oklab-004-ref.html new file mode 100644 index 0000000000..d947445321 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(48.477% 34.29% 38.412%); width: 12em; height: 12em; } /* oklab(50% 0.05 0) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-004.html b/testing/web-platform/tests/css/css-color/oklab-004.html new file mode 100644 index 0000000000..c403f244f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklab-004-ref.html"> +<meta name="assert" content="oklab() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(48.477% 34.29% 38.412%); width: 12em; height: 6em; margin-bottom: 0; }/* oklab(50% 0.05 0) converted to sRGB */ + .test { background-color: oklab(50% 0.05 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-005-ref.html b/testing/web-platform/tests/css/css-color/oklab-005-ref.html new file mode 100644 index 0000000000..7edd82a4cd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-005-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(29.264% 70.096% 63.017%); width: 12em; height: 12em; } /* oklab(70% -0.1 0) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-005.html b/testing/web-platform/tests/css/css-color/oklab-005.html new file mode 100644 index 0000000000..0738d21017 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklab-005-ref.html"> +<meta name="assert" content="oklab() with no alpha, negative a axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(29.264% 70.096% 63.017%); width: 12em; height: 6em; margin-bottom: 0; } /* oklab(70% -0.1 0) converted to sRGB */ + .test { background-color: oklab(70% -0.1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-006-ref.html b/testing/web-platform/tests/css/css-color/oklab-006-ref.html new file mode 100644 index 0000000000..98a5b9de21 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-006-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(73.942% 60.484% 19.65%); width: 12em; height: 12em; } /* oklab(70% 0 0.125) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-006.html b/testing/web-platform/tests/css/css-color/oklab-006.html new file mode 100644 index 0000000000..2a918ecbda --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklab-006-ref.html"> +<meta name="assert" content="oklab() with no alpha, positive b axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(73.942% 60.484% 19.65%); width: 12em; height: 6em; margin-bottom: 0; } /* oklab(70% 0 0.125) converted to sRGB */ + .test { background-color: oklab(70% 0 0.125); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-007-ref.html b/testing/web-platform/tests/css/css-color/oklab-007-ref.html new file mode 100644 index 0000000000..c71e428aa2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-007-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(27.888% 38.072% 89.414%); width: 12em; height: 12em; } /* oklab(55% 0 -0.2) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-007.html b/testing/web-platform/tests/css/css-color/oklab-007.html new file mode 100644 index 0000000000..5fdf0ab15b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-007.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklab-007-ref.html"> +<meta name="assert" content="oklab() with no alpha, negative b axis"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(27.888% 38.072% 89.414%); width: 12em; height: 6em; margin-bottom: 0; } /* oklab(55% 0 -0.2) converted to sRGB */ + .test { background-color: oklab(55% 0 -0.2); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-008.html b/testing/web-platform/tests/css/css-color/oklab-008.html new file mode 100644 index 0000000000..be8b4ae596 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-008.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="oklab() outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklab(84.883% -0.3042 0.20797); } /* green color(display-p3 0 1 0) converted to OKLab */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklab-009.html b/testing/web-platform/tests/css/css-color/oklab-009.html new file mode 100644 index 0000000000..49bd916f5d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-009.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="James Stuckey Weber" href="mailto:james@jamessw.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="oklab() specifying a and b with percentages"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklab(51.975% -35.075% 26.92%); } /* green (sRGB #008000) converted to OKLab */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></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 new file mode 100644 index 0000000000..612fe32acb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in Oklab is always clamped to a value between 0 to 1</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab"> +<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} + /* l = 1.5 should clamp back to 1 */ + .test { background-color: oklab(1.5 0.5 0.2); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..11948f014b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in Oklab is always clamped to a value between 0% to 100%</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab"> +<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} + /* l = 150 should clamp back to 100 */ + .test { background-color: oklab(150% 0.5 0.2); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..eb380dcb75 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklab-l-over-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<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} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-001.html b/testing/web-platform/tests/css/css-color/oklch-001.html new file mode 100644 index 0000000000..f32b7fe888 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-001.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklch(51.975% 0.17686 142.495); } /* green (sRGB #008000) converted to OKLCH */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-002.html b/testing/web-platform/tests/css/css-color/oklch-002.html new file mode 100644 index 0000000000..5c456319db --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklch(0% 0 0); } /* black (sRGB #000000) converted to OKLCH */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-003.html b/testing/web-platform/tests/css/css-color/oklch-003.html new file mode 100644 index 0000000000..abfaff1d79 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="whitesquare-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklch(100% 0 0); } /* white (sRGB #FFFFFF) converted to OKLCH */ +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-004-ref.html b/testing/web-platform/tests/css/css-color/oklch-004-ref.html new file mode 100644 index 0000000000..58117583ee --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(70.492% 2.351% 37.073%); width: 12em; height: 12em; } /* oklch(50% 0.2 0) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-004.html b/testing/web-platform/tests/css/css-color/oklch-004.html new file mode 100644 index 0000000000..c5fc4d09c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-004.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklch-004-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(70.492% 2.351% 37.073%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(50% 0.2 0) converted to sRGB */ + .test { background-color: oklch(50% 0.2 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-005-ref.html b/testing/web-platform/tests/css/css-color/oklch-005-ref.html new file mode 100644 index 0000000000..1fa8c48701 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-005-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(23.056% 31.73% 82.628%); width: 12em; height: 12em; } /* oklch(50% 0.2 270) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-005.html b/testing/web-platform/tests/css/css-color/oklch-005.html new file mode 100644 index 0000000000..0c7623315c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-005.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklch-005-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(23.056% 31.73% 82.628%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(50% 0.2 270) converted to sRGB */ + .test { background-color: oklch(50% 0.2 270); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-006-ref.html b/testing/web-platform/tests/css/css-color/oklch-006-ref.html new file mode 100644 index 0000000000..04c823efd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-006-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(32.022% 85.805% 61.147%); width: 12em; height: 12em; } /* oklch(80% 0.15 160) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-006.html b/testing/web-platform/tests/css/css-color/oklch-006.html new file mode 100644 index 0000000000..dc0193e52d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-006.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklch-006-ref.html"> +<meta name="assert" content="oklch() with no alpha, positive b axis (when converted to Lab)"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(32.022% 85.805% 61.147%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(80% 0.15 160) converted to sRGB */ + .test { background-color: oklch(80% 0.15 160); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-007-ref.html b/testing/web-platform/tests/css/css-color/oklch-007-ref.html new file mode 100644 index 0000000000..fd1deb36f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-007-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<style> + .test { background-color: rgb(67.293% 27.791% 52.28%); width: 12em; height: 12em; } /* oklch(55% 0.15 345) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-007.html b/testing/web-platform/tests/css/css-color/oklch-007.html new file mode 100644 index 0000000000..3ff21b25e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-007.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#oklab-lab-to-predefined"> +<link rel="match" href="oklch-007-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(67.293% 27.791% 52.28%); width: 12em; height: 6em; margin-bottom: 0; } /* oklch(55% 0.15 345); converted to sRGB */ + .test { background-color: oklch(55% 0.15 345); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-008.html b/testing/web-platform/tests/css/css-color/oklch-008.html new file mode 100644 index 0000000000..baa7c5c372 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-008.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="oklch() outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklch(84.883% 0.36853 145.645); } /* green color(display-p3 0 1 0) converted to OKLCH */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-009.html b/testing/web-platform/tests/css/css-color/oklch-009.html new file mode 100644 index 0000000000..1882c476c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-009.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Vasilis van Gemert" href="mailto:wpt@vasilis.nl"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="whitesquare-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: hsl(0, 100%, 50%); width: 12em; height: 12em; } + .test { background-color: oklch(100% 110 60); } /* l = 100% should always be white */ +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-010.html b/testing/web-platform/tests/css/css-color/oklch-010.html new file mode 100644 index 0000000000..b5f9ac206b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-010.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="Vasilis van Gemert" href="mailto:wpt@vasilis.nl"> +<link rel="help" href="https://drafts.csswg.org/css-color/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="oklch() with no alpha"> +<style> + .test { background-color: hsl(0, 100%, 50%); width: 12em; height: 12em; } + .test { background-color: oklch(0% 1.1 60); } /* l = 0% should always be black */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/oklch-011.html b/testing/web-platform/tests/css/css-color/oklch-011.html new file mode 100644 index 0000000000..6944867cd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-011.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: OKLab and OKLCH</title> +<link rel="author" title="James Stuckey Weber" href="mailto:james@jamessw.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#specifying-oklab-oklch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined-to-lab-oklab"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="oklch() specifying C with percentage"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: oklch(51.975% 44.215% 142.495); } /* green (sRGB #008000) converted to OKLCH */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body>
\ No newline at end of file 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 new file mode 100644 index 0000000000..4eb3cda846 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in Oklch is always clamped to a value between 0 to 1</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab"> +<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} + /* l = 1.5 should clamp back to 1 */ + .test { background-color: oklch(1.5 0.5 50); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..de8b1a6cdd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-2.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Verify lightness in Oklch is always clamped to a value between 0% to 100%</title> +<link rel="help" href="https://drafts.csswg.org/css-color/#ok-lab"> +<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} + /* l = 150% should clamp back to 100% */ + .test { background-color: oklch(150% 0.5 50); width: 100px; height: 100px} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> + <div class="test"></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 new file mode 100644 index 0000000000..2c7815c5f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/oklch-l-over-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<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} +</style> + +<body> + <p>Test passes if you see a single color.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/opacity-overlapping-letters-ref.html b/testing/web-platform/tests/css/css-color/opacity-overlapping-letters-ref.html new file mode 100644 index 0000000000..bab1f80f68 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/opacity-overlapping-letters-ref.html @@ -0,0 +1,3 @@ +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="flags" content="ahem"> +<div style="opacity: 0.5; letter-spacing: -0.6em; font: 100px/1 Ahem; white-space: pre">X X X</div> diff --git a/testing/web-platform/tests/css/css-color/opacity-overlapping-letters.html b/testing/web-platform/tests/css/css-color/opacity-overlapping-letters.html new file mode 100644 index 0000000000..65ab3742de --- /dev/null +++ b/testing/web-platform/tests/css/css-color/opacity-overlapping-letters.html @@ -0,0 +1,6 @@ +<link rel="help" href="http://www.w3.org/TR/css3-color/#transparency"> +<link rel="match" href="opacity-overlapping-letters-ref.html"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<meta name="flags" content="ahem"> +<meta name="assert" content="Opacity should be apply on the whole text content atomically."> +<div style="opacity: 0.5; letter-spacing: -0.6em; font: 100px/1 Ahem">XXXXX</div> diff --git a/testing/web-platform/tests/css/css-color/out-of-gamut-legacy-rgb-ref.html b/testing/web-platform/tests/css/css-color/out-of-gamut-legacy-rgb-ref.html new file mode 100644 index 0000000000..4b1079569f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/out-of-gamut-legacy-rgb-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<style> + body { + background-color: black; + } + div { + height: 100px; + background-color: rgba(255, 255, 255, 0.5); + } +</style> +<body> + <div></div> +</body> + diff --git a/testing/web-platform/tests/css/css-color/out-of-gamut-legacy-rgb.html b/testing/web-platform/tests/css/css-color/out-of-gamut-legacy-rgb.html new file mode 100644 index 0000000000..e872dec314 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/out-of-gamut-legacy-rgb.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Out Of Gamut Legacy SRGB Color with Transparency</title> +<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="out-of-gamut-legacy-rgb-ref.html"> +<style> + /* See crbug.com/1483736. + Values above 255 were being stored for legacy colors which was causing + them to be rendered a if their alphas were greater. + */ + body { + background-color: black; + } + div { + height: 100px; + background-color: rgba(500, 500, 500, 0.5); + } +</style> +<body> + <div></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-contrast-function.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-contrast-function.html new file mode 100644 index 0000000000..74be5ced37 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-contrast-function.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 6: Computation of colors using color-contrast() function syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#colorcontrast"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#resolving-contrast"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#serial-color-contrast"> +<meta name="assert" content="computed value of color-contrast() matches expected values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + // Test with no specified target contrast + test_computed_value(`color`, `color-contrast(white vs red, blue)`, `rgb(0, 0, 255)`); + test_computed_value(`color`, `color-contrast(white vs blue, red)`, `rgb(0, 0, 255)`); + test_computed_value(`color`, `color-contrast(white vs red, blue, green)`, `rgb(0, 0, 255)`); + test_computed_value(`color`, `color-contrast(white vs white, white)`, `rgb(255, 255, 255)`); + test_computed_value(`color`, `color-contrast(blue vs red, white)`, `rgb(255, 255, 255)`); + test_computed_value(`color`, `color-contrast(red vs blue, white, red)`, `rgb(255, 255, 255)`); + test_computed_value(`color`, `color-contrast(black vs red, blue)`, `rgb(255, 0, 0)`); + test_computed_value(`color`, `color-contrast(black vs blue, red)`, `rgb(255, 0, 0)`); + test_computed_value(`color`, `color-contrast(black vs white, white)`, `rgb(255, 255, 255)`); + test_computed_value(`color`, `color-contrast(red vs blue, rgb(255, 255, 255, .5))`, `rgba(255, 255, 255, 0.5)`); + + // Test with specified target contrast. + test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)`, `rgb(0, 100, 0)`); // darkgreen + test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)`, `rgb(128, 128, 0)`); // olive + test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)`, `rgb(128, 0, 0)`); // maroon + test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)`, `rgb(0, 100, 0)`); // darkgreen + test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)`, `rgb(128, 0, 0)`); // maroon + + // Test with specified target contrast that none meet. + test_computed_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)`, `rgb(0, 0, 0)`); // black + test_computed_value(`color`, `color-contrast(green vs bisque, darkgoldenrod, olive to 100)`, `rgb(255, 255, 255)`); // white + + // Test non-sRGB colors. + test_computed_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`); + test_computed_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`); + test_computed_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))`, `lch(0.2 50 20)`); + test_computed_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))`, `lch(0.2 50 20)`); + + // Test with extra whitespace + test_computed_value(`color`, `color-contrast( white vs red, blue )`, `rgb(0, 0, 255)`); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-color-function.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-function.html new file mode 100644 index 0000000000..cafa79a1e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-function.html @@ -0,0 +1,282 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using color() function syntax</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-function"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-function-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-color-function-values"> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) { + test_computed_value("color", `color(${colorSpace} 0% 0% 0%)`, `color(${colorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 10% 10% 10%)`, `color(${colorSpace} 0.1 0.1 0.1)`); + test_computed_value("color", `color(${colorSpace} .2 .2 25%)`, `color(${colorSpace} 0.2 0.2 0.25)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 1)`, `color(${colorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 0% 0 0 / 0.5)`, `color(${colorSpace} 0 0 0 / 0.5)`); + test_computed_value("color", `color(${colorSpace} 20% 0 10/0.5)`, `color(${colorSpace} 0.2 0 10 / 0.5)`); + test_computed_value("color", `color(${colorSpace} 20% 0 10/50%)`, `color(${colorSpace} 0.2 0 10 / 0.5)`); + test_computed_value("color", `color(${colorSpace} 400% 0 10/50%)`, `color(${colorSpace} 4 0 10 / 0.5)`); + test_computed_value("color", `color(${colorSpace} 50% -160 160)`, `color(${colorSpace} 0.5 -160 160)`); + test_computed_value("color", `color(${colorSpace} 50% -200 200)`, `color(${colorSpace} 0.5 -200 200)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / -10%)`, `color(${colorSpace} 0 0 0 / 0)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 110%)`, `color(${colorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 300%)`, `color(${colorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 200 200 200)`, `color(${colorSpace} 200 200 200)`); + test_computed_value("color", `color(${colorSpace} 200 200 200 / 200)`, `color(${colorSpace} 200 200 200)`); + test_computed_value("color", `color(${colorSpace} -200 -200 -200)`, `color(${colorSpace} -200 -200 -200)`); + test_computed_value("color", `color(${colorSpace} -200 -200 -200 / -200)`, `color(${colorSpace} -200 -200 -200 / 0)`); + test_computed_value("color", `color(${colorSpace} 200% 200% 200%)`, `color(${colorSpace} 2 2 2)`); + test_computed_value("color", `color(${colorSpace} 200% 200% 200% / 200%)`, `color(${colorSpace} 2 2 2)`); + test_computed_value("color", `color(${colorSpace} -200% -200% -200% / -200%)`, `color(${colorSpace} -2 -2 -2 / 0)`); + test_computed_value("color", `color(${colorSpace} calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))`, `color(${colorSpace} 1.5 -0.5 0.5 / 0.5)`); + test_computed_value("color", `color(${colorSpace} calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))`, `color(${colorSpace} 1.5 -0.5 0.5 / 0)`); + + test_computed_value("color", `color(${colorSpace} none none none / none)`, `color(${colorSpace} none none none / none)`); + test_computed_value("color", `color(${colorSpace} none none none)`, `color(${colorSpace} none none none)`); + test_computed_value("color", `color(${colorSpace} 10% none none / none)`, `color(${colorSpace} 0.1 none none / none)`); + test_computed_value("color", `color(${colorSpace} none none none / 0.5)`, `color(${colorSpace} none none none / 0.5)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / none)`, `color(${colorSpace} 0 0 0 / none)`); + + test_computed_value("color", `color(${colorSpace} calc(NaN) 0 0)`, `color(${colorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} calc(0 / 0) 0 0)`, `color(${colorSpace} 0 0 0)`); +} + +for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { + const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; + + test_computed_value("color", `color(${colorSpace} 0 0 0)`, `color(${resultColorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 1)`, `color(${resultColorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 1 1 1)`, `color(${resultColorSpace} 1 1 1)`); + test_computed_value("color", `color(${colorSpace} 1 1 1 / 1)`, `color(${resultColorSpace} 1 1 1)`); + test_computed_value("color", `color(${colorSpace} -1 -1 -1)`, `color(${resultColorSpace} -1 -1 -1)`); + test_computed_value("color", `color(${colorSpace} 0.1 0.1 0.1)`, `color(${resultColorSpace} 0.1 0.1 0.1)`); + test_computed_value("color", `color(${colorSpace} 10 10 10)`, `color(${resultColorSpace} 10 10 10)`); + test_computed_value("color", `color(${colorSpace} .2 .2 .25)`, `color(${resultColorSpace} 0.2 0.2 0.25)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 0.5)`, `color(${resultColorSpace} 0 0 0 / 0.5)`); + test_computed_value("color", `color(${colorSpace} .20 0 10/0.5)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`); + test_computed_value("color", `color(${colorSpace} .20 0 10/50%)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / -10%)`, `color(${resultColorSpace} 0 0 0 / 0)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 110%)`, `color(${resultColorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / 300%)`, `color(${resultColorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))`, `color(${resultColorSpace} 1.5 -0.5 0.5 / 0.5)`); + + test_computed_value("color", `color(${colorSpace} none none none / none)`, `color(${resultColorSpace} none none none / none)`); + test_computed_value("color", `color(${colorSpace} none none none)`, `color(${resultColorSpace} none none none)`); + test_computed_value("color", `color(${colorSpace} 0.2 none none / none)`, `color(${resultColorSpace} 0.2 none none / none)`); + test_computed_value("color", `color(${colorSpace} none none none / 0.5)`, `color(${resultColorSpace} none none none / 0.5)`); + test_computed_value("color", `color(${colorSpace} 0 0 0 / none)`, `color(${resultColorSpace} 0 0 0 / none)`); + + test_computed_value("color", `color(${colorSpace} calc(NaN) 0 0)`, `color(${resultColorSpace} 0 0 0)`); + test_computed_value("color", `color(${colorSpace} calc(0 / 0) 0 0)`, `color(${resultColorSpace} 0 0 0)`); +} + +// Opaque sRGB in color() +test_computed_value("color", "color(srgb 1.00 0.50 0.200)", "color(srgb 1 0.5 0.2)", "[sRGB all numbers]"); +test_computed_value("color", "color(srgb 100% 50% 20%)", "color(srgb 1 0.5 0.2)", "[sRGB all percent]"); +test_computed_value("color", "color(srgb 100% 0.5 20%)", "color(srgb 1 0.5 0.2)", "[sRGB mixed number and percent]"); +test_computed_value("color", "color(srgb 1.00 50% 0.2)", "color(srgb 1 0.5 0.2)", "[sRGB mixed number and percent 2]"); +test_computed_value("color", "color(srgb none none none)", "color(srgb none none none)", "[sRGB all none]"); +test_computed_value("color", "color(srgb 1.00 none 0.2)", "color(srgb 1 none 0.2)", "[sRGB number and none]"); +test_computed_value("color", "color(srgb 100% none 20%)", "color(srgb 1 none 0.2)", "[sRGB percent and none]"); +test_computed_value("color", "color(srgb 100% none 0.2)", "color(srgb 1 none 0.2)", "[sRGB number, percent and none]"); + +// non-unity alpha, sRGB in color() +test_computed_value("color", "color(srgb 1.00 0.50 0.200 / 0.6)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, all numbers]"); +test_computed_value("color", "color(srgb 100% 50% 20% / 60%)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, all percent]"); +test_computed_value("color", "color(srgb 100% 0.5 20% / 0.6)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, mixed number and percent]"); +test_computed_value("color", "color(srgb 1.00 50% 0.2 / 60%)", "color(srgb 1 0.5 0.2 / 0.6)", "[sRGB with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(srgb none none none / none)", "color(srgb none none none / none)", "[sRGB with alpha, all none]"); +test_computed_value("color", "color(srgb 1.00 none 0.2 / none)", "color(srgb 1 none 0.2 / none)", "[sRGB with alpha, number and none]"); +test_computed_value("color", "color(srgb 100% none 20% / 30%)", "color(srgb 1 none 0.2 / 0.3)", "[sRGB with alpha, percent and none]"); +test_computed_value("color", "color(srgb 100% none 0.2 / 23.7%)", "color(srgb 1 none 0.2 / 0.237)", "[sRGB with alpha, number, percent and none]"); + +// Opaque linear-light sRGB in color() +test_computed_value("color", "color(srgb-linear 1.00 0.50 0.200)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB all numbers]"); +test_computed_value("color", "color(srgb-linear 100% 50% 20%)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB all percent]"); +test_computed_value("color", "color(srgb-linear 100% 0.5 20%)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB mixed number and percent]"); +test_computed_value("color", "color(srgb-linear 1.00 50% 0.2)", "color(srgb-linear 1 0.5 0.2)", "[Linear-light sRGB mixed number and percent 2]"); +test_computed_value("color", "color(srgb-linear none none none)", "color(srgb-linear none none none)", "[Linear-light sRGB all none]"); +test_computed_value("color", "color(srgb-linear 1.00 none 0.2)", "color(srgb-linear 1 none 0.2)", "[Linear-light sRGB number and none]"); +test_computed_value("color", "color(srgb-linear 100% none 20%)", "color(srgb-linear 1 none 0.2)", "[Linear-light sRGB percent and none]"); +test_computed_value("color", "color(srgb-linear 100% none 0.2)", "color(srgb-linear 1 none 0.2)", "[Linear-light sRGB number, percent and none]"); + +// non-unity alpha, linear-light sRGB in color() +test_computed_value("color", "color(srgb-linear 1.00 0.50 0.200 / 0.6)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, all numbers]"); +test_computed_value("color", "color(srgb-linear 100% 50% 20% / 60%)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, all percent]"); +test_computed_value("color", "color(srgb-linear 100% 0.5 20% / 0.6)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, mixed number and percent]"); +test_computed_value("color", "color(srgb-linear 1.00 50% 0.2 / 60%)", "color(srgb-linear 1 0.5 0.2 / 0.6)", "[Linear-light sRGB with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(srgb-linear none none none / none)", "color(srgb-linear none none none / none)", "[Linear-light sRGB with alpha, all none]"); +test_computed_value("color", "color(srgb-linear 1.00 none 0.2 / none)", "color(srgb-linear 1 none 0.2 / none)", "[Linear-light sRGB with alpha, number and none]"); +test_computed_value("color", "color(srgb-linear 100% none 20% / 30%)", "color(srgb-linear 1 none 0.2 / 0.3)", "[Linear-light sRGB with alpha, percent and none]"); +test_computed_value("color", "color(srgb-linear 100% none 0.2 / 23.7%)", "color(srgb-linear 1 none 0.2 / 0.237)", "[Linear-light sRGB with alpha, number, percent and none]"); + +// Opaque Display P3 in color() +test_computed_value("color", "color(display-p3 1.00 0.50 0.200)", "color(display-p3 1 0.5 0.2)", "[Display P3 all numbers]"); +test_computed_value("color", "color(display-p3 100% 50% 20%)", "color(display-p3 1 0.5 0.2)", "[Display P3 all percent]"); +test_computed_value("color", "color(display-p3 100% 0.5 20%)", "color(display-p3 1 0.5 0.2)", "[Display P3 mixed number and percent]"); +test_computed_value("color", "color(display-p3 1.00 50% 0.2)", "color(display-p3 1 0.5 0.2)", "[Display P3 mixed number and percent 2]"); +test_computed_value("color", "color(display-p3 none none none)", "color(display-p3 none none none)", "[Display P3 all none]"); +test_computed_value("color", "color(display-p3 1.00 none 0.2)", "color(display-p3 1 none 0.2)", "[Display P3 number and none]"); +test_computed_value("color", "color(display-p3 100% none 20%)", "color(display-p3 1 none 0.2)", "[Display P3 percent and none]"); +test_computed_value("color", "color(display-p3 100% none 0.2)", "color(display-p3 1 none 0.2)", "[Display P3 number, percent and none]"); + +// non-unity alpha, Display P3 in color() +test_computed_value("color", "color(display-p3 1.00 0.50 0.200 / 0.6)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, all numbers]"); +test_computed_value("color", "color(display-p3 100% 50% 20% / 60%)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, all percent]"); +test_computed_value("color", "color(display-p3 100% 0.5 20% / 0.6)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, mixed number and percent]"); +test_computed_value("color", "color(display-p3 1.00 50% 0.2 / 60%)", "color(display-p3 1 0.5 0.2 / 0.6)", "[Display P3 with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(display-p3 none none none / none)", "color(display-p3 none none none / none)", "[Display P3 with alpha, all none]"); +test_computed_value("color", "color(display-p3 1.00 none 0.2 / none)", "color(display-p3 1 none 0.2 / none)", "[Display P3 with alpha, number and none]"); +test_computed_value("color", "color(display-p3 100% none 20% / 30%)", "color(display-p3 1 none 0.2 / 0.3)", "[Display P3 with alpha, percent and none]"); +test_computed_value("color", "color(display-p3 100% none 0.2 / 23.7%)", "color(display-p3 1 none 0.2 / 0.237)", "[Display P3 with alpha, number, percent and none]"); + +// Opaque A98 RGB in color() +test_computed_value("color", "color(a98-rgb 1.00 0.50 0.200)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB all numbers]"); +test_computed_value("color", "color(a98-rgb 100% 50% 20%)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB all percent]"); +test_computed_value("color", "color(a98-rgb 100% 0.5 20%)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB mixed number and percent]"); +test_computed_value("color", "color(a98-rgb 1.00 50% 0.2)", "color(a98-rgb 1 0.5 0.2)", "[A98 RGB mixed number and percent 2]"); +test_computed_value("color", "color(a98-rgb none none none)", "color(a98-rgb none none none)", "[A98 RGB all none]"); +test_computed_value("color", "color(a98-rgb 1.00 none 0.2)", "color(a98-rgb 1 none 0.2)", "[A98 RGB number and none]"); +test_computed_value("color", "color(a98-rgb 100% none 20%)", "color(a98-rgb 1 none 0.2)", "[A98 RGB percent and none]"); +test_computed_value("color", "color(a98-rgb 100% none 0.2)", "color(a98-rgb 1 none 0.2)", "[A98 RGB number, percent and none]"); + +// non-unity alpha, A98 RGB in color() +test_computed_value("color", "color(a98-rgb 1.00 0.50 0.200 / 0.6)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, all numbers]"); +test_computed_value("color", "color(a98-rgb 100% 50% 20% / 60%)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, all percent]"); +test_computed_value("color", "color(a98-rgb 100% 0.5 20% / 0.6)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, mixed number and percent]"); +test_computed_value("color", "color(a98-rgb 1.00 50% 0.2 / 60%)", "color(a98-rgb 1 0.5 0.2 / 0.6)", "[A98 RGB with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(a98-rgb none none none / none)", "color(a98-rgb none none none / none)", "[A98 RGB with alpha, all none]"); +test_computed_value("color", "color(a98-rgb 1.00 none 0.2 / none)", "color(a98-rgb 1 none 0.2 / none)", "[A98 RGB with alpha, number and none]"); +test_computed_value("color", "color(a98-rgb 100% none 20% / 30%)", "color(a98-rgb 1 none 0.2 / 0.3)", "[A98 RGB with alpha, percent and none]"); +test_computed_value("color", "color(a98-rgb 100% none 0.2 / 23.7%)", "color(a98-rgb 1 none 0.2 / 0.237)", "[A98 RGB with alpha, number, percent and none]"); + +// Opaque ProPhoto RGB in color() +test_computed_value("color", "color(prophoto-rgb 1.00 0.50 0.200)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB all numbers]"); +test_computed_value("color", "color(prophoto-rgb 100% 50% 20%)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB all percent]"); +test_computed_value("color", "color(prophoto-rgb 100% 0.5 20%)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB mixed number and percent]"); +test_computed_value("color", "color(prophoto-rgb 1.00 50% 0.2)", "color(prophoto-rgb 1 0.5 0.2)", "[ProPhoto RGB mixed number and percent 2]"); +test_computed_value("color", "color(prophoto-rgb none none none)", "color(prophoto-rgb none none none)", "[ProPhoto RGB all none]"); +test_computed_value("color", "color(prophoto-rgb 1.00 none 0.2)", "color(prophoto-rgb 1 none 0.2)", "[ProPhoto RGB number and none]"); +test_computed_value("color", "color(prophoto-rgb 100% none 20%)", "color(prophoto-rgb 1 none 0.2)", "[ProPhoto RGB percent and none]"); +test_computed_value("color", "color(prophoto-rgb 100% none 0.2)", "color(prophoto-rgb 1 none 0.2)", "[ProPhoto RGB number, percent and none]"); + +// non-unity alpha, ProPhoto RGB in color() +test_computed_value("color", "color(prophoto-rgb 1.00 0.50 0.200 / 0.6)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, all numbers]"); +test_computed_value("color", "color(prophoto-rgb 100% 50% 20% / 60%)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, all percent]"); +test_computed_value("color", "color(prophoto-rgb 100% 0.5 20% / 0.6)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, mixed number and percent]"); +test_computed_value("color", "color(prophoto-rgb 1.00 50% 0.2 / 60%)", "color(prophoto-rgb 1 0.5 0.2 / 0.6)", "[ProPhoto RGB with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(prophoto-rgb none none none / none)", "color(prophoto-rgb none none none / none)", "[ProPhoto RGB with alpha, all none]"); +test_computed_value("color", "color(prophoto-rgb 1.00 none 0.2 / none)", "color(prophoto-rgb 1 none 0.2 / none)", "[ProPhoto RGB with alpha, number and none]"); +test_computed_value("color", "color(prophoto-rgb 100% none 20% / 30%)", "color(prophoto-rgb 1 none 0.2 / 0.3)", "[ProPhoto RGB with alpha, percent and none]"); +test_computed_value("color", "color(prophoto-rgb 100% none 0.2 / 23.7%)", "color(prophoto-rgb 1 none 0.2 / 0.237)", "[ProPhoto RGB with alpha, number, percent and none]"); + +// Opaque Rec BT.2020 in color() +test_computed_value("color", "color(rec2020 1.00 0.50 0.200)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 all numbers]"); +test_computed_value("color", "color(rec2020 100% 50% 20%)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 all percent]"); +test_computed_value("color", "color(rec2020 100% 0.5 20%)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 mixed number and percent]"); +test_computed_value("color", "color(rec2020 1.00 50% 0.2)", "color(rec2020 1 0.5 0.2)", "[Rec BT.2020 mixed number and percent 2]"); +test_computed_value("color", "color(rec2020 none none none)", "color(rec2020 none none none)", "[Rec BT.2020 all none]"); +test_computed_value("color", "color(rec2020 1.00 none 0.2)", "color(rec2020 1 none 0.2)", "[Rec BT.2020 number and none]"); +test_computed_value("color", "color(rec2020 100% none 20%)", "color(rec2020 1 none 0.2)", "[Rec BT.2020 percent and none]"); +test_computed_value("color", "color(rec2020 100% none 0.2)", "color(rec2020 1 none 0.2)", "[Rec BT.2020 number, percent and none]"); + +// non-unity alpha, Rec BT.2020 in color() +test_computed_value("color", "color(rec2020 1.00 0.50 0.200 / 0.6)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, all numbers]"); +test_computed_value("color", "color(rec2020 100% 50% 20% / 60%)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, all percent]"); +test_computed_value("color", "color(rec2020 100% 0.5 20% / 0.6)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, mixed number and percent]"); +test_computed_value("color", "color(rec2020 1.00 50% 0.2 / 60%)", "color(rec2020 1 0.5 0.2 / 0.6)", "[Rec BT.2020 with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(rec2020 none none none / none)", "color(rec2020 none none none / none)", "[Rec BT.2020 with alpha, all none]"); +test_computed_value("color", "color(rec2020 1.00 none 0.2 / none)", "color(rec2020 1 none 0.2 / none)", "[Rec BT.2020 with alpha, number and none]"); +test_computed_value("color", "color(rec2020 100% none 20% / 30%)", "color(rec2020 1 none 0.2 / 0.3)", "[Rec BT.2020 with alpha, percent and none]"); +test_computed_value("color", "color(rec2020 100% none 0.2 / 23.7%)", "color(rec2020 1 none 0.2 / 0.237)", "[Rec BT.2020 with alpha, number, percent and none]"); + +// Opaque CIE XYZ D50 in color() +test_computed_value("color", "color(xyz-d50 1.00 0.50 0.200)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 all numbers]"); +test_computed_value("color", "color(xyz-d50 100% 50% 20%)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 all percent]"); +test_computed_value("color", "color(xyz-d50 100% 0.5 20%)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 mixed number and percent]"); +test_computed_value("color", "color(xyz-d50 1.00 50% 0.2)", "color(xyz-d50 1 0.5 0.2)", "[CIE XYZ D50 mixed number and percent 2]"); +test_computed_value("color", "color(xyz-d50 none none none)", "color(xyz-d50 none none none)", "[CIE XYZ D50 all none]"); +test_computed_value("color", "color(xyz-d50 1.00 none 0.2)", "color(xyz-d50 1 none 0.2)", "[CIE XYZ D50 number and none]"); +test_computed_value("color", "color(xyz-d50 100% none 20%)", "color(xyz-d50 1 none 0.2)", "[CIE XYZ D50 percent and none]"); +test_computed_value("color", "color(xyz-d50 100% none 0.2)", "color(xyz-d50 1 none 0.2)", "[CIE XYZ D50 number, percent and none]"); + +// non-unity alpha, CIE XYZ D50 in color() +test_computed_value("color", "color(xyz-d50 1.00 0.50 0.200 / 0.6)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, all numbers]"); +test_computed_value("color", "color(xyz-d50 100% 50% 20% / 60%)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, all percent]"); +test_computed_value("color", "color(xyz-d50 100% 0.5 20% / 0.6)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, mixed number and percent]"); +test_computed_value("color", "color(xyz-d50 1.00 50% 0.2 / 60%)", "color(xyz-d50 1 0.5 0.2 / 0.6)", "[CIE XYZ D50 with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(xyz-d50 none none none / none)", "color(xyz-d50 none none none / none)", "[CIE XYZ D50 with alpha, all none]"); +test_computed_value("color", "color(xyz-d50 1.00 none 0.2 / none)", "color(xyz-d50 1 none 0.2 / none)", "[CIE XYZ D50 with alpha, number and none]"); +test_computed_value("color", "color(xyz-d50 100% none 20% / 30%)", "color(xyz-d50 1 none 0.2 / 0.3)", "[CIE XYZ D50 with alpha, percent and none]"); +test_computed_value("color", "color(xyz-d50 100% none 0.2 / 23.7%)", "color(xyz-d50 1 none 0.2 / 0.237)", "[CIE XYZ D50 with alpha, number, percent and none]"); + +// Opaque CIE XYZ D65 in color() +test_computed_value("color", "color(xyz-d65 1.00 0.50 0.200)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 all numbers]"); +test_computed_value("color", "color(xyz-d65 100% 50% 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 all percent]"); +test_computed_value("color", "color(xyz-d65 100% 0.5 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 mixed number and percent]"); +test_computed_value("color", "color(xyz-d65 1.00 50% 0.2)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ D65 mixed number and percent 2]"); +test_computed_value("color", "color(xyz-d65 none none none)", "color(xyz-d65 none none none)", "[CIE XYZ D65 all none]"); +test_computed_value("color", "color(xyz-d65 1.00 none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ D65 number and none]"); +test_computed_value("color", "color(xyz-d65 100% none 20%)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ D65 percent and none]"); +test_computed_value("color", "color(xyz-d65 100% none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ D65 number, percent and none]"); + +// non-unity alpha, CIE XYZ D65 in color() +test_computed_value("color", "color(xyz-d65 1.00 0.50 0.200 / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, all numbers]"); +test_computed_value("color", "color(xyz-d65 100% 50% 20% / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, all percent]"); +test_computed_value("color", "color(xyz-d65 100% 0.5 20% / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, mixed number and percent]"); +test_computed_value("color", "color(xyz-d65 1.00 50% 0.2 / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ D65 with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(xyz-d65 none none none / none)", "color(xyz-d65 none none none / none)", "[CIE XYZ D65 with alpha, all none]"); +test_computed_value("color", "color(xyz-d65 1.00 none 0.2 / none)", "color(xyz-d65 1 none 0.2 / none)", "[CIE XYZ D65 with alpha, number and none]"); +test_computed_value("color", "color(xyz-d65 100% none 20% / 30%)", "color(xyz-d65 1 none 0.2 / 0.3)", "[CIE XYZ D65 with alpha, percent and none]"); +test_computed_value("color", "color(xyz-d65 100% none 0.2 / 23.7%)", "color(xyz-d65 1 none 0.2 / 0.237)", "[CIE XYZ D65 with alpha, number, percent and none]"); + +// Opaque CIE XYZ (implicit D65) in color() +test_computed_value("color", "color(xyz 1.00 0.50 0.200)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) all numbers]"); +test_computed_value("color", "color(xyz 100% 50% 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) all percent]"); +test_computed_value("color", "color(xyz 100% 0.5 20%)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) mixed number and percent]"); +test_computed_value("color", "color(xyz 1.00 50% 0.2)", "color(xyz-d65 1 0.5 0.2)", "[CIE XYZ (implicit D65) mixed number and percent 2]"); +test_computed_value("color", "color(xyz none none none)", "color(xyz-d65 none none none)", "[CIE XYZ (implicit D65) all none]"); +test_computed_value("color", "color(xyz 1.00 none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ (implicit D65) number and none]"); +test_computed_value("color", "color(xyz 100% none 20%)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ (implicit D65) percent and none]"); +test_computed_value("color", "color(xyz 100% none 0.2)", "color(xyz-d65 1 none 0.2)", "[CIE XYZ (implicit D65) number, percent and none]"); + +// non-unity alpha, CIE XYZ (implicit D65) in color() +test_computed_value("color", "color(xyz 1.00 0.50 0.200 / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, all numbers]"); +test_computed_value("color", "color(xyz 100% 50% 20% / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, all percent]"); +test_computed_value("color", "color(xyz 100% 0.5 20% / 0.6)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, mixed number and percent]"); +test_computed_value("color", "color(xyz 1.00 50% 0.2 / 60%)", "color(xyz-d65 1 0.5 0.2 / 0.6)", "[CIE XYZ (implicit D65) with alpha, mixed number and percent 2]"); +test_computed_value("color", "color(xyz none none none / none)", "color(xyz-d65 none none none / none)", "[CIE XYZ (implicit D65) with alpha, all none]"); +test_computed_value("color", "color(xyz 1.00 none 0.2 / none)", "color(xyz-d65 1 none 0.2 / none)", "[CIE XYZ (implicit D65) with alpha, number and none]"); +test_computed_value("color", "color(xyz 100% none 20% / 30%)", "color(xyz-d65 1 none 0.2 / 0.3)", "[CIE XYZ (implicit D65) with alpha, percent and none]"); +test_computed_value("color", "color(xyz 100% none 0.2 / 23.7%)", "color(xyz-d65 1 none 0.2 / 0.237)", "[CIE XYZ (implicit D65) with alpha, number, percent and none]"); + +// Tests basic parsing of the color function +test_computed_value("color", "color(srgb 1 1 1)", "color(srgb 1 1 1)", "[Basic sRGB white]"); +test_computed_value("color", "color( srgb 1 1 1 )", "color(srgb 1 1 1)", "[White with lots of space]"); +test_computed_value("color", "color(srgb 0.25 0.5 0.75)", "color(srgb 0.25 0.5 0.75)", "[sRGB color]"); +test_computed_value("color", "color(SrGb 0.25 0.5 0.75)", "color(srgb 0.25 0.5 0.75)", "[Different case for sRGB]"); +test_computed_value("color", "color(srgb 1.00000 0.500000 0.20)", "color(srgb 1 0.5 0.2)", "[sRGB color with unnecessary decimals]"); +test_computed_value("color", "color(srgb 1 1 1 / 0.5)", "color(srgb 1 1 1 / 0.5)", "[sRGB white with 0.5 alpha]"); +test_computed_value("color", "color(srgb 1 1 1 / 0)", "color(srgb 1 1 1 / 0)", "[sRGB white with 0 alpha]"); +test_computed_value("color", "color(srgb 1 1 1 / 50%)", "color(srgb 1 1 1 / 0.5)", "[sRGB white with 50% alpha]"); +test_computed_value("color", "color(srgb 1 1 1 / 0%)", "color(srgb 1 1 1 / 0)", "[sRGB white with 0% alpha]"); +test_computed_value("color", "color(display-p3 0.6 0.7 0.8)", "color(display-p3 0.6 0.7 0.8)", "[Display P3 color]"); +test_computed_value("color", "color(dIspLaY-P3 0.6 0.7 0.8)", "color(display-p3 0.6 0.7 0.8)", "[Different case for Display P3]"); + +test_computed_value("color", "color(srgb -0.25 0.5 0.75)", "color(srgb -0.25 0.5 0.75)", "[sRGB color with negative component should not clamp to 0]"); +test_computed_value("color", "color(srgb 0.25 1.5 0.75)", "color(srgb 0.25 1.5 0.75)", "[sRGB color with component > 1 should not clamp]"); +test_computed_value("color", "color(display-p3 0.5 -199 0.75)", "color(display-p3 0.5 -199 0.75)", "[Display P3 color with negative component should not clamp to 0]"); +test_computed_value("color", "color(display-p3 184 1.00001 1103)", "color(display-p3 184 1.00001 1103)", "[Display P3 color with component > 1 should not clamp]"); +test_computed_value("color", "color(srgb 0.1 0.2 0.3 / 1.9)", "color(srgb 0.1 0.2 0.3)", "[Alpha > 1 should clamp]"); +test_computed_value("color", "color(srgb 1 1 1 / -0.2)", "color(srgb 1 1 1 / 0)", "[Negative alpha should clamp]"); +</script> 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 new file mode 100644 index 0000000000..f0e2f6cce0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-color-mix-function.html @@ -0,0 +1,477 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Computation of colors using color-mix() function syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-color-mix"> +<meta name="assert" content="computed value of color-mix() works for all interpolation methods"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/color-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + // hsl() + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color(srgb 0.33 0.36 0.24)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))`, `color(srgb 0.4375 0.415625 0.2625)`); + fuzzy_test_computed_color(`color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color(srgb 0.4375 0.415625 0.2625)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))`, `color(srgb 0.240625 0.2875 0.2125)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)`, `color(srgb 0.240625 0.2875 0.2125)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)`, `color(srgb 0.4375 0.415625 0.2625)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)`, `color(srgb 0.4375 0.415625 0.2625)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `color(srgb 0.4375 0.415625 0.2625 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))`, `color(srgb 0.52 0.4 0.28)`); + + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color(srgb 0.372222 0.411111 0.255556 / 0.6)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))`, `color(srgb 0.42346 0.402889 0.258893 / 0.85)`); + fuzzy_test_computed_color(`color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color(srgb 0.472245 0.447041 0.270612 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))`, `color(srgb 0.2674 0.3304 0.2296 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)`, `color(srgb 0.2674 0.3304 0.2296 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)`, `color(srgb 0.472245 0.447041 0.270612 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)`, `color(srgb 0.472245 0.447041 0.270612 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)`, `color(srgb 0.472245 0.447041 0.270612 / 0.35)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))`, `color(srgb 0.52 0.4 0.28 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in hsl, transparent, hsl(30deg 30% 40%))`, `color(srgb 0.52 0.4 0.28 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, transparent 10%, hsl(30deg 30% 40%))`, `color(srgb 0.52 0.4 0.28 / 0.9)`); + 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, 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)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color(srgb 0.75 0.25 0.333333)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color(srgb 0.75 0.25 0.333333)`); + + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color(srgb 0.75 0.25 0.333333)`); + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color(srgb 0.75 0.25 0.333333)`); + fuzzy_test_computed_color(`color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.75 0.25)`); + + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.25 0.333333 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.25 0.333333 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color(srgb 0.25 0.666667 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color(srgb 0.25 0.666667 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color(srgb 0.25 0.75 0.666667)`); + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color(srgb 0.25 0.75 0.666667)`); + fuzzy_test_computed_color(`color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.25 0.25 0.75)`); + + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.25 0.333333 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color(srgb 0.25 0.666667 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color(srgb 0.25 0.75 0.666667)`); + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color(srgb 0.75 0.25 0.333333)`); + fuzzy_test_computed_color(`color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.75 0.25)`); + + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.25 0.333333 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color(srgb 0.75 0.666667 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color(srgb 0.75 0.333333 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color(srgb 0.25 0.666667 0.75)`); + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color(srgb 0.75 0.25 0.333333)`); + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color(srgb 0.25 0.75 0.666667)`); + fuzzy_test_computed_color(`color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(60deg 50% 50%))`, `color(srgb 0.75 0.75 0.25)`); + + fuzzy_test_computed_color(`color-mix(in hsl, hsl(none none none), hsl(none none none))`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(none none none), hsl(30deg 40% 80%))`, `color(srgb 0.88 0.8 0.72)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))`, `color(srgb 0.32 0.48 0.32)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))`, `color(srgb 0.66 0.72 0.48)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))`, `color(srgb 0.44 0.48 0.32)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))`, `color(srgb 0.68 0.6 0.52)`); + + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))`, `color(srgb 0.56 0.56 0.24)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))`, `color(srgb 0.56 0.56 0.24 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))`, `color(srgb 0.56 0.56 0.24 / none)`); + + fuzzy_test_computed_color(`color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(90deg none none / none))`, `color(srgb 0.8 0.88 0.72 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(none 50% none / none))`, `color(srgb 0.9 0.8 0.7 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(none none 50% / none))`, `color(srgb 0.7 0.5 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(90deg 50% none / none))`, `color(srgb 0.8 0.9 0.7 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(none none none / 0.5))`, `color(srgb 0.88 0.8 0.72 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hsl, hsl(30deg 40% 80% / 25%) 0%, hsl(90deg none none / 0.5))`, `color(srgb 0.8 0.88 0.72 / 0.5)`); + + // hwb() + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color(srgb 0.575 0.7 0.2)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))`, `color(srgb 0.65 0.6 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color(srgb 0.65 0.6 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))`, `color(srgb 0.375 0.75 0.15)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)`, `color(srgb 0.375 0.75 0.15)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)`, `color(srgb 0.65 0.6 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)`, `color(srgb 0.65 0.6 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `color(srgb 0.65 0.6 0.25 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))`, `color(srgb 0.6 0.45 0.3)`); + + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color(srgb 0.558333 0.666667 0.233333 / 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))`, `color(srgb 0.628571 0.583929 0.271429 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color(srgb 0.628571 0.583929 0.271429 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))`, `color(srgb 0.373026 0.757895 0.142105 / 0.95)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)`, `color(srgb 0.3825 0.72 0.18 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)`, `color(srgb 0.628571 0.583929 0.271429 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)`, `color(srgb 0.628571 0.583929 0.271429 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)`, `color(srgb 0.628571 0.583929 0.271429 / 0.35)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))`, `color(srgb 0.6 0.45 0.3 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in hwb, transparent, hwb(30deg 30% 40%))`, `color(srgb 0.6 0.45 0.3 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, transparent 10%, hwb(30deg 30% 40%))`, `color(srgb 0.6 0.45 0.3 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / 0), hwb(30deg 30% 40%))`, `color(srgb 0.525 0.6 0.3 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / 0) 10%, hwb(30deg 30% 40%))`, `color(srgb 0.6 0.495 0.3 / 0.9)`); + + fuzzy_test_computed_color(`color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color(srgb 0.6 0.3 0.35)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color(srgb 0.6 0.3 0.35)`); + + fuzzy_test_computed_color(`color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color(srgb 0.6 0.3 0.35)`); + fuzzy_test_computed_color(`color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color(srgb 0.6 0.3 0.35)`); + + fuzzy_test_computed_color(`color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color(srgb 0.3 0.35 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color(srgb 0.3 0.35 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color(srgb 0.3 0.55 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color(srgb 0.3 0.55 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color(srgb 0.3 0.6 0.55)`); + fuzzy_test_computed_color(`color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color(srgb 0.3 0.6 0.55)`); + + fuzzy_test_computed_color(`color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color(srgb 0.3 0.35 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color(srgb 0.3 0.55 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color(srgb 0.3 0.6 0.55)`); + fuzzy_test_computed_color(`color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color(srgb 0.6 0.3 0.35)`); + + fuzzy_test_computed_color(`color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color(srgb 0.3 0.35 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color(srgb 0.6 0.55 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color(srgb 0.6 0.35 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color(srgb 0.3 0.55 0.6)`); + fuzzy_test_computed_color(`color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color(srgb 0.6 0.3 0.35)`); + fuzzy_test_computed_color(`color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color(srgb 0.3 0.6 0.55)`); + + fuzzy_test_computed_color(`color-mix(in hwb, hwb(none none none), hwb(none none none))`, `color(srgb 1 0 0)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(none none none), hwb(30deg 30% 40%))`, `color(srgb 0.6 0.45 0.3)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(none none none))`, `color(srgb 0.1 0.8 0.1)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% none), hwb(30deg 30% 40%))`, `color(srgb 0.5 0.6 0.2)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% none))`, `color(srgb 0.65 0.8 0.2)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(none 10% 20%), hwb(30deg none 40%))`, `color(srgb 0.7 0.4 0.1)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40%))`, `color(srgb 0.575 0.7 0.2)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / 0.5))`, `color(srgb 0.575 0.7 0.2 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / none))`, `color(srgb 0.575 0.7 0.2 / none)`); + + fuzzy_test_computed_color(`color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(90deg none none / none))`, `color(srgb 0.45 0.6 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(none 50% none / none))`, `color(srgb 0.6 0.55 0.5 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(none none 50% / none))`, `color(srgb 0.5 0.4 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(90deg 50% none / none))`, `color(srgb 0.55 0.6 0.5 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(none none none / 0.5))`, `color(srgb 0.6 0.45 0.3 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in hwb, hwb(30deg 30% 40% / 25%) 0%, hwb(90deg none none / 0.5))`, `color(srgb 0.45 0.6 0.3 / 0.5)`); + + // lch() + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))`, `lch(30 40 50)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))`, `lch(40 50 60)`); + fuzzy_test_computed_color(`color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))`, `lch(40 50 60)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg), 25% lch(50 60 70deg))`, `lch(20 30 40)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg) 25%)`, `lch(20 30 40)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg) 75%)`, `lch(40 50 60)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg) 30%, lch(50 60 70deg) 90%)`, `lch(40 50 60)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg) 12.5%, lch(50 60 70deg) 37.5%)`, `lch(40 50 60 / 0.5)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg) 0%, lch(50 60 70deg))`, `lch(50 60 70)`); + + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `lch(36.666664 46.666664 50 / 0.6)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8))`, `lch(44.285713 54.285717 60 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in lch, 25% lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `lch(44.285713 54.285717 60 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4), 25% lch(50 60 70deg / .8))`, `lch(26 36 40 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8) 25%)`, `lch(26 36 40 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8) 75%)`, `lch(44.285713 54.285717 60 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4) 30%, lch(50 60 70deg / .8) 90%)`, `lch(44.285713 54.285717 60 / 0.7)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4) 12.5%, lch(50 60 70deg / .8) 37.5%)`, `lch(44.285713 54.285717 60 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / .4) 0%, lch(50 60 70deg / .8))`, `lch(50 60 70 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in lch, transparent, lch(0.3 0.4 30deg))`, `lch(0.3 0.4 30 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lch, transparent 10%, lch(0.3 0.4 30deg))`, `lch(0.3 0.4 30 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 120deg / 0), lch(0.3 0.4 30deg))`, `lch(0.3 0.4 75 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 120deg / 0) 10%, lch(0.3 0.4 30deg))`, `lch(0.3 0.4 39 / 0.9)`); + + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))`, `lch(100 0 50)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))`, `lch(100 0 50)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))`, `lch(100 0 10)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 330deg), lch(100 0 50deg))`, `lch(100 0 10)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 20deg), lch(100 0 320deg))`, `lch(100 0 350)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(100 0 320deg), lch(100 0 20deg))`, `lch(100 0 350)`); + + fuzzy_test_computed_color(`color-mix(in lch shorter hue, lch(100 0 40deg), lch(100 0 60deg))`, `lch(100 0 50)`); + fuzzy_test_computed_color(`color-mix(in lch shorter hue, lch(100 0 60deg), lch(100 0 40deg))`, `lch(100 0 50)`); + fuzzy_test_computed_color(`color-mix(in lch shorter hue, lch(100 0 50deg), lch(100 0 330deg))`, `lch(100 0 10)`); + fuzzy_test_computed_color(`color-mix(in lch shorter hue, lch(100 0 330deg), lch(100 0 50deg))`, `lch(100 0 10)`); + fuzzy_test_computed_color(`color-mix(in lch shorter hue, lch(100 0 20deg), lch(100 0 320deg))`, `lch(100 0 350)`); + fuzzy_test_computed_color(`color-mix(in lch shorter hue, lch(100 0 320deg), lch(100 0 20deg))`, `lch(100 0 350)`); + + fuzzy_test_computed_color(`color-mix(in lch longer hue, lch(100 0 40deg), lch(100 0 60deg))`, `lch(100 0 230)`); + fuzzy_test_computed_color(`color-mix(in lch longer hue, lch(100 0 60deg), lch(100 0 40deg))`, `lch(100 0 230)`); + fuzzy_test_computed_color(`color-mix(in lch longer hue, lch(100 0 50deg), lch(100 0 330deg))`, `lch(100 0 190)`); + fuzzy_test_computed_color(`color-mix(in lch longer hue, lch(100 0 330deg), lch(100 0 50deg))`, `lch(100 0 190)`); + fuzzy_test_computed_color(`color-mix(in lch longer hue, lch(100 0 20deg), lch(100 0 320deg))`, `lch(100 0 170)`); + fuzzy_test_computed_color(`color-mix(in lch longer hue, lch(100 0 320deg), lch(100 0 20deg))`, `lch(100 0 170)`); + + fuzzy_test_computed_color(`color-mix(in lch increasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `lch(100 0 50)`); + fuzzy_test_computed_color(`color-mix(in lch increasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `lch(100 0 230)`); + fuzzy_test_computed_color(`color-mix(in lch increasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `lch(100 0 190)`); + fuzzy_test_computed_color(`color-mix(in lch increasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `lch(100 0 10)`); + fuzzy_test_computed_color(`color-mix(in lch increasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `lch(100 0 170)`); + fuzzy_test_computed_color(`color-mix(in lch increasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `lch(100 0 350)`); + + fuzzy_test_computed_color(`color-mix(in lch decreasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `lch(100 0 230)`); + fuzzy_test_computed_color(`color-mix(in lch decreasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `lch(100 0 50)`); + fuzzy_test_computed_color(`color-mix(in lch decreasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `lch(100 0 10)`); + fuzzy_test_computed_color(`color-mix(in lch decreasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `lch(100 0 190)`); + fuzzy_test_computed_color(`color-mix(in lch decreasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `lch(100 0 350)`); + fuzzy_test_computed_color(`color-mix(in lch decreasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `lch(100 0 170)`); + + fuzzy_test_computed_color(`color-mix(in lch, lch(none none none), lch(none none none))`, `lch(none none none)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(none none none), lch(50 60 70deg))`, `lch(50 60 70)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg), lch(none none none))`, `lch(10 20 30)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 none), lch(50 60 70deg))`, `lch(30 40 70)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg), lch(50 60 none))`, `lch(30 40 30)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))`, `lch(50 20 50)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))`, `lch(30 40 50)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))`, `lch(30 40 50 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))`, `lch(30 40 50 / none)`); + + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 30deg / 25%) 0%, lch(0.5 none none / none))`, `lch(0.5 0.2 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 30deg / 25%) 0%, lch(none 0.5 none / none))`, `lch(0.1 0.5 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 30deg / 25%) 0%, lch(none none 90deg / none))`, `lch(0.1 0.2 90 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 30deg / 25%) 0%, lch(0.5 0.5 none / none))`, `lch(0.5 0.5 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 30deg / 25%) 0%, lch(none none none / 0.5))`, `lch(0.1 0.2 30 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lch, lch(0.1 0.2 30deg / 25%) 0%, lch(0.5 none none / 0.5))`, `lch(0.5 0.2 30 / 0.5)`); + // Achromatic colors should have powerless hues. https://www.w3.org/TR/css-color-4/#lab-to-lch + fuzzy_test_computed_color(`color-mix(in lch, lab(50 0 0), black)`, `lch(25 0 none)`); + + // oklch() + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `oklch(0.3 0.4 50)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))`, `oklch(0.4 0.5 60)`); + fuzzy_test_computed_color(`color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `oklch(0.4 0.5 60)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), 25% oklch(0.5 0.6 70deg))`, `oklch(0.2 0.3 40)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg) 25%)`, `oklch(0.2 0.3 40)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg) 75%)`, `oklch(0.4 0.5 60)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 30%, oklch(0.5 0.6 70deg) 90%)`, `oklch(0.4 0.5 60)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 12.5%, oklch(0.5 0.6 70deg) 37.5%)`, `oklch(0.4 0.5 60 / 0.5)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg) 0%, oklch(0.5 0.6 70deg))`, `oklch(0.5 0.6 70)`); + + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `oklch(0.36666664 0.46666664 50 / 0.6)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8))`, `oklch(0.44285713 0.54285717 60 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklch, 25% oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `oklch(0.44285713 0.54285717 60 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), 25% oklch(0.5 0.6 70deg / .8))`, `oklch(0.26 0.36 40 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8) 25%)`, `oklch(0.26 0.36 40 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8) 75%)`, `oklch(0.44285713 0.54285717 60 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 30%, oklch(0.5 0.6 70deg / .8) 90%)`, `oklch(0.44285713 0.54285717 60 / 0.7)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 12.5%, oklch(0.5 0.6 70deg / .8) 37.5%)`, `oklch(0.44285713 0.54285717 60 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 0%, oklch(0.5 0.6 70deg / .8))`, `oklch(0.5 0.6 70 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in oklch, transparent, oklch(0.3 40 30deg))`, `oklch(0.3 40 30 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklch, transparent 10%, oklch(0.3 40 30deg))`, `oklch(0.3 40 30 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 20 120deg / 0), oklch(0.3 40 30deg))`, `oklch(0.3 40 75 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 20 120deg / 0) 10%, oklch(0.3 40 30deg))`, `oklch(0.3 40 39 / 0.9)`); + + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))`, `oklch(1 0 50)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))`, `oklch(1 0 50)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))`, `oklch(1 0 10)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 330deg), oklch(1 0 50deg))`, `oklch(1 0 10)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 20deg), oklch(1 0 320deg))`, `oklch(1 0 350)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(1 0 320deg), oklch(1 0 20deg))`, `oklch(1 0 350)`); + + fuzzy_test_computed_color(`color-mix(in oklch shorter hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `oklch(1 0 50)`); + fuzzy_test_computed_color(`color-mix(in oklch shorter hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `oklch(1 0 50)`); + fuzzy_test_computed_color(`color-mix(in oklch shorter hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `oklch(1 0 10)`); + fuzzy_test_computed_color(`color-mix(in oklch shorter hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `oklch(1 0 10)`); + fuzzy_test_computed_color(`color-mix(in oklch shorter hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `oklch(1 0 350)`); + fuzzy_test_computed_color(`color-mix(in oklch shorter hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `oklch(1 0 350)`); + + fuzzy_test_computed_color(`color-mix(in oklch longer hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `oklch(1 0 230)`); + fuzzy_test_computed_color(`color-mix(in oklch longer hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `oklch(1 0 230)`); + fuzzy_test_computed_color(`color-mix(in oklch longer hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `oklch(1 0 190)`); + fuzzy_test_computed_color(`color-mix(in oklch longer hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `oklch(1 0 190)`); + fuzzy_test_computed_color(`color-mix(in oklch longer hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `oklch(1 0 170)`); + fuzzy_test_computed_color(`color-mix(in oklch longer hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `oklch(1 0 170)`); + + fuzzy_test_computed_color(`color-mix(in oklch increasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `oklch(1 0 50)`); + fuzzy_test_computed_color(`color-mix(in oklch increasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `oklch(1 0 230)`); + fuzzy_test_computed_color(`color-mix(in oklch increasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `oklch(1 0 190)`); + fuzzy_test_computed_color(`color-mix(in oklch increasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `oklch(1 0 10)`); + fuzzy_test_computed_color(`color-mix(in oklch increasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `oklch(1 0 170)`); + fuzzy_test_computed_color(`color-mix(in oklch increasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `oklch(1 0 350)`); + + fuzzy_test_computed_color(`color-mix(in oklch decreasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `oklch(1 0 230)`); + fuzzy_test_computed_color(`color-mix(in oklch decreasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `oklch(1 0 50)`); + fuzzy_test_computed_color(`color-mix(in oklch decreasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `oklch(1 0 10)`); + fuzzy_test_computed_color(`color-mix(in oklch decreasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `oklch(1 0 190)`); + fuzzy_test_computed_color(`color-mix(in oklch decreasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `oklch(1 0 350)`); + fuzzy_test_computed_color(`color-mix(in oklch decreasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `oklch(1 0 170)`); + + fuzzy_test_computed_color(`color-mix(in oklch, oklch(none none none), oklch(none none none))`, `oklch(none none none)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70deg))`, `oklch(0.5 0.6 70)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))`, `oklch(0.1 0.2 30)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))`, `oklch(0.3 0.4 70)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))`, `oklch(0.3 0.4 30)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))`, `oklch(0.5 0.2 50)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))`, `oklch(0.3 0.4 50)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))`, `oklch(0.3 0.4 50 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))`, `oklch(0.3 0.4 50 / none)`); + + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(0.5 none none / none))`, `oklch(0.5 0.2 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none 0.5 none / none))`, `oklch(0.1 0.5 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none none 90deg / none))`, `oklch(0.1 0.2 90 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(0.5 0.5 none / none))`, `oklch(0.5 0.5 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(none none none / 0.5))`, `oklch(0.1 0.2 30 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklch, oklch(0.1 0.2 30deg / 25%) 0%, oklch(0.5 none none / 0.5))`, `oklch(0.5 0.2 30 / 0.5)`); + // Achromatic colors should have powerless hues. https://www.w3.org/TR/css-color-4/#lab-to-lch + fuzzy_test_computed_color(`color-mix(in oklch, oklab(0.5 0 0), black)`, `oklch(0.25 0 none)`); + + // lab() + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70))`, `lab(30 40 50)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`, `lab(40 50 60)`); + fuzzy_test_computed_color(`color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))`, `lab(40 50 60)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30), 25% lab(50 60 70))`, `lab(20 30 40)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30), lab(50 60 70) 25%)`, `lab(20 30 40)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70) 75%)`, `lab(40 50 60)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`, `lab(40 50 60)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`, `lab(40 50 60 / 0.5)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`, `lab(50 60 70)`); + + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8))`, `lab(36.666664 46.666664 56.666664 / 0.6)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8))`, `lab(44.285713 54.285717 64.28571 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in lab, 25% lab(10 20 30 / .4), lab(50 60 70 / .8))`, `lab(44.285713 54.285717 64.28571 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4), 25% lab(50 60 70 / .8))`, `lab(26 36 46 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8) 25%)`, `lab(26 36 46 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8) 75%)`, `lab(44.285713 54.285717 64.28571 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4) 30%, lab(50 60 70 / .8) 90%)`, `lab(44.285713 54.285717 64.28571 / 0.7)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4) 12.5%, lab(50 60 70 / .8) 37.5%)`, `lab(44.285713 54.285717 64.28571 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / .4) 0%, lab(50 60 70 / .8))`, `lab(50 60 70 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in lab, transparent, lab(30 40 50))`, 'lab(30 40 50 / 0.5)'); + fuzzy_test_computed_color(`color-mix(in lab, transparent 10%, lab(30 40 50))`, 'lab(30 40 50 / 0.9)'); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 0), lab(30 40 50))`, 'lab(30 40 50 / 0.5)'); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 0) 10%, lab(30 40 50))`, 'lab(30 40 50 / 0.9)'); + + fuzzy_test_computed_color(`color-mix(in lab, lab(none none none), lab(none none none))`, `lab(none none none)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(none none none), lab(50 60 70))`, `lab(50 60 70)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30), lab(none none none))`, `lab(10 20 30)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 none), lab(50 60 70))`, `lab(30 40 70)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30), lab(50 60 none))`, `lab(30 40 30)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(none 20 30), lab(50 none 70))`, `lab(50 20 50)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`, `lab(30 40 50)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`, `lab(30 40 50 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`, `lab(30 40 50 / none)`); + + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 25%) 0%, lab(50 none none / none))`, `lab(50 20 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 25%) 0%, lab(none 50 none / none))`, `lab(10 50 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 25%) 0%, lab(none none 90 / none))`, `lab(10 20 90 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 25%) 0%, lab(50 50 none / none))`, `lab(50 50 30 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 25%) 0%, lab(none none none / 0.5))`, `lab(10 20 30 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in lab, lab(10 20 30 / 25%) 0%, lab(50 none none / 0.5))`, `lab(50 20 30 / 0.5)`); + + // oklab() + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `oklab(0.3 0.4 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `oklab(0.4 0.5 0.6)`); + fuzzy_test_computed_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `oklab(0.4 0.5 0.6)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `oklab(0.2 0.3 0.4)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `oklab(0.2 0.3 0.4)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `oklab(0.4 0.5 0.6)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `oklab(0.4 0.5 0.6)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `oklab(0.4 0.5 0.6 / 0.5)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `oklab(0.5 0.6 0.7)`); + + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `oklab(0.36666664 0.46666664 0.56666664 / 0.6)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `oklab(0.44285713 0.54285717 0.6428571 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `oklab(0.44285713 0.54285717 0.6428571 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `oklab(0.26 0.36 0.46 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `oklab(0.26 0.36 0.46 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `oklab(0.44285713 0.54285717 0.6428571 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `oklab(0.44285713 0.54285717 0.6428571 / 0.7)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)`, `oklab(0.44285713 0.54285717 0.6428571 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `oklab(0.5 0.6 0.7 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in oklab, transparent, oklab(0.3 0.4 0.5))`, 'oklab(0.3 0.4 0.5 / 0.5)'); + fuzzy_test_computed_color(`color-mix(in oklab, transparent 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, 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, 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)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `oklab(0.1 0.2 0.3)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `oklab(0.3 0.4 0.7)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `oklab(0.3 0.4 0.3)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `oklab(0.5 0.2 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `oklab(0.3 0.4 0.5)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7 / 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 / none), oklab(0.5 0.6 0.7 / none))`, `oklab(0.3 0.4 0.5 / none)`); + + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(0.5 none none / none))`, `oklab(0.5 0.2 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(none 0.5 none / none))`, `oklab(0.1 0.5 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(none none 0.5 / none))`, `oklab(0.1 0.2 0.5 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in oklab, oklab(0.1 0.2 0.3 / 25%) 0%, oklab(0.5 0.5 none / none))`, `oklab(0.5 0.5 0.3 / 0.25)`); + 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" ]) { + 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)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.4 0.5 0.6)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, 25% color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.4 0.5 0.6)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7) 25%)`, `color(${resultColorSpace} 0.2 0.3 0.4)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), 25% color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.2 0.3 0.4)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7) 75%)`, `color(${resultColorSpace} 0.4 0.5 0.6)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 30%, color(${colorSpace} .5 .6 .7) 90%)`, `color(${resultColorSpace} 0.4 0.5 0.6)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 12.5%, color(${colorSpace} .5 .6 .7) 37.5%)`, `color(${resultColorSpace} 0.4 0.5 0.6 / 0.5)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.5 0.6 0.7)`); + + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .5), color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.3461539 0.4461539 0.5461539 / 0.65)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.44285715 0.54285717 0.64285713 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, 25% color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.44285715 0.54285717 0.64285713 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color(${resultColorSpace} 0.26000002 0.36 0.46 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), 25% color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.26000002 0.36 0.46 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color(${resultColorSpace} 0.44285715 0.54285717 0.64285713 / 0.7)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 30%, color(${colorSpace} .5 .6 .7 / .8) 90%)`, `color(${resultColorSpace} 0.44285715 0.54285717 0.64285713 / 0.7)`); // Scale down > 100% sum. + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color(${resultColorSpace} 0.44285715 0.54285717 0.64285713 / 0.35)`); // Scale up < 100% sum, causes alpha multiplication. + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color(${resultColorSpace} 0.5 0.6 0.7 / 0.8)`); + + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, transparent, color(${colorSpace} 0.3 0.4 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, transparent 10%, color(${colorSpace} 0.3 0.4 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.9)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 0.1 0.2 0.3 / 0), color(${colorSpace} 0.3 0.4 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 0.1 0.2 0.3 / 0) 10%, color(${colorSpace} 0.3 0.4 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.9)`); + + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} 2 3 4 / 5), color(${colorSpace} 4 6 8 / 10))`, `color(${resultColorSpace} 3 4.5 6)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4), color(${colorSpace} -4 -6 -8))`, `color(${resultColorSpace} -3 -4.5 -6)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4 / -5), color(${colorSpace} -4 -6 -8 / -10))`, `color(${resultColorSpace} 0 0 0 / 0)`); + + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} none none none))`, `color(${resultColorSpace} none none none)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.5 0.6 0.7)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} none none none))`, `color(${resultColorSpace} 0.1 0.2 0.3)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 none), color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.3 0.4 0.7)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 none))`, `color(${resultColorSpace} 0.3 0.4 0.3)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} none .2 .3), color(${colorSpace} .5 none .7))`, `color(${resultColorSpace} 0.5 0.2 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7))`, `color(${resultColorSpace} 0.3 0.4 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / 0.5))`, `color(${resultColorSpace} 0.3 0.4 0.5 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / none))`, `color(${resultColorSpace} 0.3 0.4 0.5 / none)`); + + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / 25%) 0%, color(${colorSpace} 0.5 none none / none))`, `color(${resultColorSpace} 0.5 0.2 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / 25%) 0%, color(${colorSpace} none 0.5 none / none))`, `color(${resultColorSpace} 0.1 0.5 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / 25%) 0%, color(${colorSpace} none none 0.5 / none))`, `color(${resultColorSpace} 0.1 0.2 0.5 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / 25%) 0%, color(${colorSpace} 0.5 0.5 none / none))`, `color(${resultColorSpace} 0.5 0.5 0.3 / 0.25)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / 25%) 0%, color(${colorSpace} none none none / 50%))`, `color(${resultColorSpace} 0.1 0.2 0.3 / 0.5)`); + fuzzy_test_computed_color(`color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / 25%) 0%, color(${colorSpace} 0.5 none none / 50%))`, `color(${resultColorSpace} 0.5 0.2 0.3 / 0.5)`); + } +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-hex-color.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-hex-color.html new file mode 100644 index 0000000000..7485b34a1d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-hex-color.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using hex color notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +tests = [ + ["#fff", "rgb(255, 255, 255)", "Valid 3-digit hex"], + ["#ffff", "rgb(255, 255, 255)", "Valid 4-digit hex"], + ["#ffffff", "rgb(255, 255, 255)", "Valid 6-digit hex"], + ["#ffffffff", "rgb(255, 255, 255)", "Valid 8-digit hex"], + ["#FFCc99", "rgb(255, 204, 153)", "Valid 6-digit hex"], + ["#369", "rgb(51, 102, 153)", "Valid 3-digit hex"], +]; + +for (const test of tests) { + test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-hsl.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-hsl.html new file mode 100644 index 0000000000..3c9e01338b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-hsl.html @@ -0,0 +1,3769 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using HSL notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +tests = [ + ["hsl(120 30% 50%)", "rgb(89, 166, 89)"], + ["hsl(120 30% 50% / 0.5)", "rgba(89, 166, 89, 0.5)"], + ["hsl(120 30% 50% / 50%)", "rgba(89, 166, 89, 0.5)"], + ["hsl(none none none)", "rgb(0, 0, 0)"], + ["hsl(0 0% 0%)", "rgb(0, 0, 0)"], + ["hsl(none none none / none)", "rgba(0, 0, 0, 0)"], + ["hsl(0 0% 0% / 0)", "rgba(0, 0, 0, 0)"], + ["hsla(none none none)", "rgb(0, 0, 0)"], + ["hsla(0 0% 0%)", "rgb(0, 0, 0)"], + ["hsla(none none none / none)", "rgba(0, 0, 0, 0)"], + ["hsla(0 0% 0% / 0)", "rgba(0, 0, 0, 0)"], + ["hsl(120 none none)", "rgb(0, 0, 0)"], + ["hsl(120 0% 0%)", "rgb(0, 0, 0)"], + ["hsl(120 80% none)", "rgb(0, 0, 0)"], + ["hsl(120 80% 0%)", "rgb(0, 0, 0)"], + ["hsl(120 none 50%)", "rgb(128, 128, 128)"], + ["hsl(120 0% 50%)", "rgb(128, 128, 128)"], + ["hsl(120 100% 50% / none)", "rgba(0, 255, 0, 0)"], + ["hsl(120 100% 50% / 0)", "rgba(0, 255, 0, 0)"], + ["hsl(120 100% 50% / 0%)", "rgba(0, 255, 0, 0)"], + ["hsl(none 100% 50%)", "rgb(255, 0, 0)"], + ["hsl(0 100% 50%)", "rgb(255, 0, 0)"], + + ["HSL(0, 0%, 0%)", "rgb(0, 0, 0)", "Capitalization should not affect parsing"], + ["hsL(0, 100%, 50%)", "rgb(255, 0, 0)", "Capitalization should not affect parsing"], + ["hsl(60, 100%, 37.5%)", "rgb(191, 191, 0)", "Valid numbers should be parsed"], + ["hsl(780, 100%, 37.5%)", "rgb(191, 191, 0)", "Angles are represented as a part of a circle and wrap around"], + ["hsl(-300, 100%, 37.5%)", "rgb(191, 191, 0)", "Angles are represented as a part of a circle and wrap around"], + ["hsl(300, 50%, 50%)", "rgb(191, 64, 191)", "Valid numbers should be parsed"], + ["hsl(30deg, 100%, 100%)", "rgb(255, 255, 255)", "Angles are accepted in HSL/HSLA"], + ["hsl(0, 0%, 0%, 0%)", "rgba(0, 0, 0, 0)", "HSL and HSLA are synonyms"], + ["HSLA(-300, 100%, 37.5%, 1)", "rgb(191, 191, 0)", "Angles are represented as a part of a circle and wrap around"], + ["hsLA(-300, 100%, 37.5%, 12)", "rgb(191, 191, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["hsla(-300, 100%, 37.5%, 0.2)", "rgba(191, 191, 0, 0.2)", "Angles are represented as a part of a circle and wrap around"], + ["hsla(-300, 100%, 37.5%, 0)", "rgba(191, 191, 0, 0)", "Angles are represented as a part of a circle and wrap around"], + ["hsla(-300, 100%, 37.5%, -3)", "rgba(191, 191, 0, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["hsla(0, 0%, 0%, 50%)", "rgba(0, 0, 0, 0.5)", "Percent alpha values are accepted in hsl/hsla"], + ["hsla(30deg, 100%, 100%, 1)", "rgb(255, 255, 255)", "Angles are accepted in HSL/HSLA"], + + ["hsl(0, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 12.5%)", "rgb(36, 28, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 12.5%, 0)", "rgba(36, 28, 28, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 12.5%, 0.2)", "rgba(36, 28, 28, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 12.5%, 1)", "rgb(36, 28, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 25%)", "rgb(72, 56, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 25%, 0)", "rgba(72, 56, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 25%, 0.2)", "rgba(72, 56, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 25%, 1)", "rgb(72, 56, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 37.5%)", "rgb(108, 84, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 37.5%, 0)", "rgba(108, 84, 84, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 37.5%, 0.2)", "rgba(108, 84, 84, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 37.5%, 1)", "rgb(108, 84, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 50%)", "rgb(143, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 50%, 0)", "rgba(143, 112, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 50%, 0.2)", "rgba(143, 112, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 50%, 1)", "rgb(143, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 62.5%)", "rgb(171, 147, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 62.5%, 0)", "rgba(171, 147, 147, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 62.5%, 0.2)", "rgba(171, 147, 147, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 62.5%, 1)", "rgb(171, 147, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 75%)", "rgb(199, 183, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 75%, 0)", "rgba(199, 183, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 75%, 0.2)", "rgba(199, 183, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 75%, 1)", "rgb(199, 183, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 87.5%)", "rgb(227, 219, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 87.5%, 0)", "rgba(227, 219, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 87.5%, 0.2)", "rgba(227, 219, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 87.5%, 1)", "rgb(227, 219, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 12.5%)", "rgb(40, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 12.5%, 0)", "rgba(40, 24, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 12.5%, 0.2)", "rgba(40, 24, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 12.5%, 1)", "rgb(40, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 25%)", "rgb(80, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 25%, 0)", "rgba(80, 48, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 25%, 0.2)", "rgba(80, 48, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 25%, 1)", "rgb(80, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 37.5%)", "rgb(120, 72, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 37.5%, 0)", "rgba(120, 72, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 37.5%, 0.2)", "rgba(120, 72, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 37.5%, 1)", "rgb(120, 72, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 50%)", "rgb(159, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 50%, 0)", "rgba(159, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 50%, 0.2)", "rgba(159, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 50%, 1)", "rgb(159, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 62.5%)", "rgb(183, 135, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 62.5%, 0)", "rgba(183, 135, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 62.5%, 0.2)", "rgba(183, 135, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 62.5%, 1)", "rgb(183, 135, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 75%)", "rgb(207, 175, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 75%, 0)", "rgba(207, 175, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 75%, 0.2)", "rgba(207, 175, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 75%, 1)", "rgb(207, 175, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 87.5%)", "rgb(231, 215, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 87.5%, 0)", "rgba(231, 215, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 87.5%, 0.2)", "rgba(231, 215, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 87.5%, 1)", "rgb(231, 215, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 12.5%)", "rgb(44, 20, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 12.5%, 0)", "rgba(44, 20, 20, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 12.5%, 0.2)", "rgba(44, 20, 20, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 12.5%, 1)", "rgb(44, 20, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 25%)", "rgb(88, 40, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 25%, 0)", "rgba(88, 40, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 25%, 0.2)", "rgba(88, 40, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 25%, 1)", "rgb(88, 40, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 37.5%)", "rgb(131, 60, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 37.5%, 0)", "rgba(131, 60, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 37.5%, 0.2)", "rgba(131, 60, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 37.5%, 1)", "rgb(131, 60, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 50%)", "rgb(175, 80, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 50%, 0)", "rgba(175, 80, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 50%, 0.2)", "rgba(175, 80, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 50%, 1)", "rgb(175, 80, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 62.5%)", "rgb(195, 124, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 62.5%, 0)", "rgba(195, 124, 124, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 62.5%, 0.2)", "rgba(195, 124, 124, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 62.5%, 1)", "rgb(195, 124, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 75%)", "rgb(215, 167, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 75%, 0)", "rgba(215, 167, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 75%, 0.2)", "rgba(215, 167, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 75%, 1)", "rgb(215, 167, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 87.5%)", "rgb(235, 211, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 87.5%, 0)", "rgba(235, 211, 211, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 87.5%, 0.2)", "rgba(235, 211, 211, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 87.5%, 1)", "rgb(235, 211, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 12.5%)", "rgb(48, 16, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 12.5%, 0)", "rgba(48, 16, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 12.5%, 0.2)", "rgba(48, 16, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 12.5%, 1)", "rgb(48, 16, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 25%)", "rgb(96, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 25%, 0)", "rgba(96, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 25%, 0.2)", "rgba(96, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 25%, 1)", "rgb(96, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 37.5%)", "rgb(143, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 37.5%, 0)", "rgba(143, 48, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 37.5%, 0.2)", "rgba(143, 48, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 37.5%, 1)", "rgb(143, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 50%)", "rgb(191, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 50%, 0)", "rgba(191, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 50%, 0.2)", "rgba(191, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 50%, 1)", "rgb(191, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 62.5%)", "rgb(207, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 62.5%, 0)", "rgba(207, 112, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 62.5%, 0.2)", "rgba(207, 112, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 62.5%, 1)", "rgb(207, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 75%)", "rgb(223, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 75%, 0)", "rgba(223, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 75%, 0.2)", "rgba(223, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 75%, 1)", "rgb(223, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 87.5%)", "rgb(239, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 87.5%, 0)", "rgba(239, 207, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 87.5%, 0.2)", "rgba(239, 207, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 87.5%, 1)", "rgb(239, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 12.5%)", "rgb(52, 12, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 12.5%, 0)", "rgba(52, 12, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 12.5%, 0.2)", "rgba(52, 12, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 12.5%, 1)", "rgb(52, 12, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 25%)", "rgb(104, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 25%, 0)", "rgba(104, 24, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 25%, 0.2)", "rgba(104, 24, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 25%, 1)", "rgb(104, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 37.5%)", "rgb(155, 36, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 37.5%, 0)", "rgba(155, 36, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 37.5%, 0.2)", "rgba(155, 36, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 37.5%, 1)", "rgb(155, 36, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 50%)", "rgb(207, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 50%, 0)", "rgba(207, 48, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 50%, 0.2)", "rgba(207, 48, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 50%, 1)", "rgb(207, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 62.5%)", "rgb(219, 100, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 62.5%, 0)", "rgba(219, 100, 100, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 62.5%, 0.2)", "rgba(219, 100, 100, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 62.5%, 1)", "rgb(219, 100, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 75%)", "rgb(231, 151, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 75%, 0)", "rgba(231, 151, 151, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 75%, 0.2)", "rgba(231, 151, 151, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 75%, 1)", "rgb(231, 151, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 87.5%)", "rgb(243, 203, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 87.5%, 0)", "rgba(243, 203, 203, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 87.5%, 0.2)", "rgba(243, 203, 203, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 87.5%, 1)", "rgb(243, 203, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 12.5%)", "rgb(56, 8, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 12.5%, 0)", "rgba(56, 8, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 12.5%, 0.2)", "rgba(56, 8, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 12.5%, 1)", "rgb(56, 8, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 25%)", "rgb(112, 16, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 25%, 0)", "rgba(112, 16, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 25%, 0.2)", "rgba(112, 16, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 25%, 1)", "rgb(112, 16, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 37.5%)", "rgb(167, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 37.5%, 0)", "rgba(167, 24, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 37.5%, 0.2)", "rgba(167, 24, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 37.5%, 1)", "rgb(167, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 50%)", "rgb(223, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 50%, 0)", "rgba(223, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 50%, 0.2)", "rgba(223, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 50%, 1)", "rgb(223, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 62.5%)", "rgb(231, 88, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 62.5%, 0)", "rgba(231, 88, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 62.5%, 0.2)", "rgba(231, 88, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 62.5%, 1)", "rgb(231, 88, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 75%)", "rgb(239, 143, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 75%, 0)", "rgba(239, 143, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 75%, 0.2)", "rgba(239, 143, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 75%, 1)", "rgb(239, 143, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 87.5%)", "rgb(247, 199, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 87.5%, 0)", "rgba(247, 199, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 87.5%, 0.2)", "rgba(247, 199, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 87.5%, 1)", "rgb(247, 199, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 12.5%)", "rgb(60, 4, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 12.5%, 0)", "rgba(60, 4, 4, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 12.5%, 0.2)", "rgba(60, 4, 4, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 12.5%, 1)", "rgb(60, 4, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 25%)", "rgb(120, 8, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 25%, 0)", "rgba(120, 8, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 25%, 0.2)", "rgba(120, 8, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 25%, 1)", "rgb(120, 8, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 37.5%)", "rgb(179, 12, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 37.5%, 0)", "rgba(179, 12, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 37.5%, 0.2)", "rgba(179, 12, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 37.5%, 1)", "rgb(179, 12, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 50%)", "rgb(239, 16, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 50%, 0)", "rgba(239, 16, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 50%, 0.2)", "rgba(239, 16, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 50%, 1)", "rgb(239, 16, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 62.5%)", "rgb(243, 76, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 62.5%, 0)", "rgba(243, 76, 76, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 62.5%, 0.2)", "rgba(243, 76, 76, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 62.5%, 1)", "rgb(243, 76, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 75%)", "rgb(247, 135, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 75%, 0)", "rgba(247, 135, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 75%, 0.2)", "rgba(247, 135, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 75%, 1)", "rgb(247, 135, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 87.5%)", "rgb(251, 195, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 87.5%, 0)", "rgba(251, 195, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 87.5%, 0.2)", "rgba(251, 195, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 87.5%, 1)", "rgb(251, 195, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 12.5%)", "rgb(64, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 12.5%, 0)", "rgba(64, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 12.5%, 0.2)", "rgba(64, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 12.5%, 1)", "rgb(64, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 25%)", "rgb(128, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 25%, 0)", "rgba(128, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 25%, 0.2)", "rgba(128, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 25%, 1)", "rgb(128, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 37.5%)", "rgb(191, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 37.5%, 0)", "rgba(191, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 37.5%, 0.2)", "rgba(191, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 37.5%, 1)", "rgb(191, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 50%)", "rgb(255, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 50%, 0)", "rgba(255, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 50%, 0.2)", "rgba(255, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 50%, 1)", "rgb(255, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 62.5%)", "rgb(255, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 62.5%, 0)", "rgba(255, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 62.5%, 0.2)", "rgba(255, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 62.5%, 1)", "rgb(255, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 75%)", "rgb(255, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 75%, 0)", "rgba(255, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 75%, 0.2)", "rgba(255, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 75%, 1)", "rgb(255, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 87.5%)", "rgb(255, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 87.5%, 0)", "rgba(255, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 87.5%, 0.2)", "rgba(255, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 87.5%, 1)", "rgb(255, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(0, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(0, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 12.5%)", "rgb(36, 32, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 12.5%, 0)", "rgba(36, 32, 28, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 12.5%, 0.2)", "rgba(36, 32, 28, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 12.5%, 1)", "rgb(36, 32, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 25%)", "rgb(72, 64, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 25%, 0)", "rgba(72, 64, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 25%, 0.2)", "rgba(72, 64, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 25%, 1)", "rgb(72, 64, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 37.5%)", "rgb(108, 96, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 37.5%, 0)", "rgba(108, 96, 84, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 37.5%, 0.2)", "rgba(108, 96, 84, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 37.5%, 1)", "rgb(108, 96, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 50%)", "rgb(143, 128, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 50%, 0)", "rgba(143, 128, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 50%, 0.2)", "rgba(143, 128, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 50%, 1)", "rgb(143, 128, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 62.5%)", "rgb(171, 159, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 62.5%, 0)", "rgba(171, 159, 147, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 62.5%, 0.2)", "rgba(171, 159, 147, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 62.5%, 1)", "rgb(171, 159, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 75%)", "rgb(199, 191, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 75%, 0)", "rgba(199, 191, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 75%, 0.2)", "rgba(199, 191, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 75%, 1)", "rgb(199, 191, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 87.5%)", "rgb(227, 223, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 87.5%, 0)", "rgba(227, 223, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 87.5%, 0.2)", "rgba(227, 223, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 87.5%, 1)", "rgb(227, 223, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 12.5%)", "rgb(40, 32, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 12.5%, 0)", "rgba(40, 32, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 12.5%, 0.2)", "rgba(40, 32, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 12.5%, 1)", "rgb(40, 32, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 25%)", "rgb(80, 64, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 25%, 0)", "rgba(80, 64, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 25%, 0.2)", "rgba(80, 64, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 25%, 1)", "rgb(80, 64, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 37.5%)", "rgb(120, 96, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 37.5%, 0)", "rgba(120, 96, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 37.5%, 0.2)", "rgba(120, 96, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 37.5%, 1)", "rgb(120, 96, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 50%)", "rgb(159, 128, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 50%, 0)", "rgba(159, 128, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 50%, 0.2)", "rgba(159, 128, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 50%, 1)", "rgb(159, 128, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 62.5%)", "rgb(183, 159, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 62.5%, 0)", "rgba(183, 159, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 62.5%, 0.2)", "rgba(183, 159, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 62.5%, 1)", "rgb(183, 159, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 75%)", "rgb(207, 191, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 75%, 0)", "rgba(207, 191, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 75%, 0.2)", "rgba(207, 191, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 75%, 1)", "rgb(207, 191, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 87.5%)", "rgb(231, 223, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 87.5%, 0)", "rgba(231, 223, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 87.5%, 0.2)", "rgba(231, 223, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 87.5%, 1)", "rgb(231, 223, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 12.5%)", "rgb(44, 32, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 12.5%, 0)", "rgba(44, 32, 20, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 12.5%, 0.2)", "rgba(44, 32, 20, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 12.5%, 1)", "rgb(44, 32, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 25%)", "rgb(88, 64, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 25%, 0)", "rgba(88, 64, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 25%, 0.2)", "rgba(88, 64, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 25%, 1)", "rgb(88, 64, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 37.5%)", "rgb(131, 96, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 37.5%, 0)", "rgba(131, 96, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 37.5%, 0.2)", "rgba(131, 96, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 37.5%, 1)", "rgb(131, 96, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 50%)", "rgb(175, 128, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 50%, 0)", "rgba(175, 128, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 50%, 0.2)", "rgba(175, 128, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 50%, 1)", "rgb(175, 128, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 62.5%)", "rgb(195, 159, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 62.5%, 0)", "rgba(195, 159, 124, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 62.5%, 0.2)", "rgba(195, 159, 124, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 62.5%, 1)", "rgb(195, 159, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 75%)", "rgb(215, 191, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 75%, 0)", "rgba(215, 191, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 75%, 0.2)", "rgba(215, 191, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 75%, 1)", "rgb(215, 191, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 87.5%)", "rgb(235, 223, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 87.5%, 0)", "rgba(235, 223, 211, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 87.5%, 0.2)", "rgba(235, 223, 211, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 87.5%, 1)", "rgb(235, 223, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 12.5%)", "rgb(48, 32, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 12.5%, 0)", "rgba(48, 32, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 12.5%, 0.2)", "rgba(48, 32, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 12.5%, 1)", "rgb(48, 32, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 25%)", "rgb(96, 64, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 25%, 0)", "rgba(96, 64, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 25%, 0.2)", "rgba(96, 64, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 25%, 1)", "rgb(96, 64, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 37.5%)", "rgb(143, 96, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 37.5%, 0)", "rgba(143, 96, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 37.5%, 0.2)", "rgba(143, 96, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 37.5%, 1)", "rgb(143, 96, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 50%)", "rgb(191, 128, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 50%, 0)", "rgba(191, 128, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 50%, 0.2)", "rgba(191, 128, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 50%, 1)", "rgb(191, 128, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 62.5%)", "rgb(207, 159, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 62.5%, 0)", "rgba(207, 159, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 62.5%, 0.2)", "rgba(207, 159, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 62.5%, 1)", "rgb(207, 159, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 75%)", "rgb(223, 191, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 75%, 0)", "rgba(223, 191, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 75%, 0.2)", "rgba(223, 191, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 75%, 1)", "rgb(223, 191, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 87.5%)", "rgb(239, 223, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 87.5%, 0)", "rgba(239, 223, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 87.5%, 0.2)", "rgba(239, 223, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 87.5%, 1)", "rgb(239, 223, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 12.5%)", "rgb(52, 32, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 12.5%, 0)", "rgba(52, 32, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 12.5%, 0.2)", "rgba(52, 32, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 12.5%, 1)", "rgb(52, 32, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 25%)", "rgb(104, 64, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 25%, 0)", "rgba(104, 64, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 25%, 0.2)", "rgba(104, 64, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 25%, 1)", "rgb(104, 64, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 37.5%)", "rgb(155, 96, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 37.5%, 0)", "rgba(155, 96, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 37.5%, 0.2)", "rgba(155, 96, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 37.5%, 1)", "rgb(155, 96, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 50%)", "rgb(207, 128, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 50%, 0)", "rgba(207, 128, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 50%, 0.2)", "rgba(207, 128, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 50%, 1)", "rgb(207, 128, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 62.5%)", "rgb(219, 159, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 62.5%, 0)", "rgba(219, 159, 100, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 62.5%, 0.2)", "rgba(219, 159, 100, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 62.5%, 1)", "rgb(219, 159, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 75%)", "rgb(231, 191, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 75%, 0)", "rgba(231, 191, 151, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 75%, 0.2)", "rgba(231, 191, 151, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 75%, 1)", "rgb(231, 191, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 87.5%)", "rgb(243, 223, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 87.5%, 0)", "rgba(243, 223, 203, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 87.5%, 0.2)", "rgba(243, 223, 203, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 87.5%, 1)", "rgb(243, 223, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 12.5%)", "rgb(56, 32, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 12.5%, 0)", "rgba(56, 32, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 12.5%, 0.2)", "rgba(56, 32, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 12.5%, 1)", "rgb(56, 32, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 25%)", "rgb(112, 64, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 25%, 0)", "rgba(112, 64, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 25%, 0.2)", "rgba(112, 64, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 25%, 1)", "rgb(112, 64, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 37.5%)", "rgb(167, 96, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 37.5%, 0)", "rgba(167, 96, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 37.5%, 0.2)", "rgba(167, 96, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 37.5%, 1)", "rgb(167, 96, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 50%)", "rgb(223, 128, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 50%, 0)", "rgba(223, 128, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 50%, 0.2)", "rgba(223, 128, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 50%, 1)", "rgb(223, 128, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 62.5%)", "rgb(231, 159, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 62.5%, 0)", "rgba(231, 159, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 62.5%, 0.2)", "rgba(231, 159, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 62.5%, 1)", "rgb(231, 159, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 75%)", "rgb(239, 191, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 75%, 0)", "rgba(239, 191, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 75%, 0.2)", "rgba(239, 191, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 75%, 1)", "rgb(239, 191, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 87.5%)", "rgb(247, 223, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 87.5%, 0)", "rgba(247, 223, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 87.5%, 0.2)", "rgba(247, 223, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 87.5%, 1)", "rgb(247, 223, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 12.5%)", "rgb(60, 32, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 12.5%, 0)", "rgba(60, 32, 4, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 12.5%, 0.2)", "rgba(60, 32, 4, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 12.5%, 1)", "rgb(60, 32, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 25%)", "rgb(120, 64, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 25%, 0)", "rgba(120, 64, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 25%, 0.2)", "rgba(120, 64, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 25%, 1)", "rgb(120, 64, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 37.5%)", "rgb(179, 96, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 37.5%, 0)", "rgba(179, 96, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 37.5%, 0.2)", "rgba(179, 96, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 37.5%, 1)", "rgb(179, 96, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 50%)", "rgb(239, 128, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 50%, 0)", "rgba(239, 128, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 50%, 0.2)", "rgba(239, 128, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 50%, 1)", "rgb(239, 128, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 62.5%)", "rgb(243, 159, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 62.5%, 0)", "rgba(243, 159, 76, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 62.5%, 0.2)", "rgba(243, 159, 76, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 62.5%, 1)", "rgb(243, 159, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 75%)", "rgb(247, 191, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 75%, 0)", "rgba(247, 191, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 75%, 0.2)", "rgba(247, 191, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 75%, 1)", "rgb(247, 191, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 87.5%)", "rgb(251, 223, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 87.5%, 0)", "rgba(251, 223, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 87.5%, 0.2)", "rgba(251, 223, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 87.5%, 1)", "rgb(251, 223, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 12.5%)", "rgb(64, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 12.5%, 0)", "rgba(64, 32, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 12.5%, 0.2)", "rgba(64, 32, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 12.5%, 1)", "rgb(64, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 25%)", "rgb(128, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 25%, 0)", "rgba(128, 64, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 25%, 0.2)", "rgba(128, 64, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 25%, 1)", "rgb(128, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 37.5%)", "rgb(191, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 37.5%, 0)", "rgba(191, 96, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 37.5%, 0.2)", "rgba(191, 96, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 37.5%, 1)", "rgb(191, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 50%)", "rgb(255, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 50%, 0)", "rgba(255, 128, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 50%, 0.2)", "rgba(255, 128, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 50%, 1)", "rgb(255, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 62.5%)", "rgb(255, 159, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 62.5%, 0)", "rgba(255, 159, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 62.5%, 0.2)", "rgba(255, 159, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 62.5%, 1)", "rgb(255, 159, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 75%)", "rgb(255, 191, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 75%, 0)", "rgba(255, 191, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 75%, 0.2)", "rgba(255, 191, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 75%, 1)", "rgb(255, 191, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 87.5%)", "rgb(255, 223, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 87.5%, 0)", "rgba(255, 223, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 87.5%, 0.2)", "rgba(255, 223, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 87.5%, 1)", "rgb(255, 223, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(30, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(30, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 12.5%)", "rgb(36, 36, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 12.5%, 0)", "rgba(36, 36, 28, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 12.5%, 0.2)", "rgba(36, 36, 28, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 12.5%, 1)", "rgb(36, 36, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 25%)", "rgb(72, 72, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 25%, 0)", "rgba(72, 72, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 25%, 0.2)", "rgba(72, 72, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 25%, 1)", "rgb(72, 72, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 37.5%)", "rgb(108, 108, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 37.5%, 0)", "rgba(108, 108, 84, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 37.5%, 0.2)", "rgba(108, 108, 84, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 37.5%, 1)", "rgb(108, 108, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 50%)", "rgb(143, 143, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 50%, 0)", "rgba(143, 143, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 50%, 0.2)", "rgba(143, 143, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 50%, 1)", "rgb(143, 143, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 62.5%)", "rgb(171, 171, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 62.5%, 0)", "rgba(171, 171, 147, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 62.5%, 0.2)", "rgba(171, 171, 147, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 62.5%, 1)", "rgb(171, 171, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 75%)", "rgb(199, 199, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 75%, 0)", "rgba(199, 199, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 75%, 0.2)", "rgba(199, 199, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 75%, 1)", "rgb(199, 199, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 87.5%)", "rgb(227, 227, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 87.5%, 0)", "rgba(227, 227, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 87.5%, 0.2)", "rgba(227, 227, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 87.5%, 1)", "rgb(227, 227, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 12.5%)", "rgb(40, 40, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 12.5%, 0)", "rgba(40, 40, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 12.5%, 0.2)", "rgba(40, 40, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 12.5%, 1)", "rgb(40, 40, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 25%)", "rgb(80, 80, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 25%, 0)", "rgba(80, 80, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 25%, 0.2)", "rgba(80, 80, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 25%, 1)", "rgb(80, 80, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 37.5%)", "rgb(120, 120, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 37.5%, 0)", "rgba(120, 120, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 37.5%, 0.2)", "rgba(120, 120, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 37.5%, 1)", "rgb(120, 120, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 50%)", "rgb(159, 159, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 50%, 0)", "rgba(159, 159, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 50%, 0.2)", "rgba(159, 159, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 50%, 1)", "rgb(159, 159, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 62.5%)", "rgb(183, 183, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 62.5%, 0)", "rgba(183, 183, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 62.5%, 0.2)", "rgba(183, 183, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 62.5%, 1)", "rgb(183, 183, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 75%)", "rgb(207, 207, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 75%, 0)", "rgba(207, 207, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 75%, 0.2)", "rgba(207, 207, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 75%, 1)", "rgb(207, 207, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 87.5%)", "rgb(231, 231, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 87.5%, 0)", "rgba(231, 231, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 87.5%, 0.2)", "rgba(231, 231, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 87.5%, 1)", "rgb(231, 231, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 12.5%)", "rgb(44, 44, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 12.5%, 0)", "rgba(44, 44, 20, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 12.5%, 0.2)", "rgba(44, 44, 20, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 12.5%, 1)", "rgb(44, 44, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 25%)", "rgb(88, 88, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 25%, 0)", "rgba(88, 88, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 25%, 0.2)", "rgba(88, 88, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 25%, 1)", "rgb(88, 88, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 37.5%)", "rgb(131, 131, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 37.5%, 0)", "rgba(131, 131, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 37.5%, 0.2)", "rgba(131, 131, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 37.5%, 1)", "rgb(131, 131, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 50%)", "rgb(175, 175, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 50%, 0)", "rgba(175, 175, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 50%, 0.2)", "rgba(175, 175, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 50%, 1)", "rgb(175, 175, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 62.5%)", "rgb(195, 195, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 62.5%, 0)", "rgba(195, 195, 124, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 62.5%, 0.2)", "rgba(195, 195, 124, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 62.5%, 1)", "rgb(195, 195, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 75%)", "rgb(215, 215, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 75%, 0)", "rgba(215, 215, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 75%, 0.2)", "rgba(215, 215, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 75%, 1)", "rgb(215, 215, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 87.5%)", "rgb(235, 235, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 87.5%, 0)", "rgba(235, 235, 211, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 87.5%, 0.2)", "rgba(235, 235, 211, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 87.5%, 1)", "rgb(235, 235, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 12.5%)", "rgb(48, 48, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 12.5%, 0)", "rgba(48, 48, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 12.5%, 0.2)", "rgba(48, 48, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 12.5%, 1)", "rgb(48, 48, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 25%)", "rgb(96, 96, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 25%, 0)", "rgba(96, 96, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 25%, 0.2)", "rgba(96, 96, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 25%, 1)", "rgb(96, 96, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 37.5%)", "rgb(143, 143, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 37.5%, 0)", "rgba(143, 143, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 37.5%, 0.2)", "rgba(143, 143, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 37.5%, 1)", "rgb(143, 143, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 50%)", "rgb(191, 191, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 50%, 0)", "rgba(191, 191, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 50%, 0.2)", "rgba(191, 191, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 50%, 1)", "rgb(191, 191, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 62.5%)", "rgb(207, 207, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 62.5%, 0)", "rgba(207, 207, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 62.5%, 0.2)", "rgba(207, 207, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 62.5%, 1)", "rgb(207, 207, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 75%)", "rgb(223, 223, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 75%, 0)", "rgba(223, 223, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 75%, 0.2)", "rgba(223, 223, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 75%, 1)", "rgb(223, 223, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 87.5%)", "rgb(239, 239, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 87.5%, 0)", "rgba(239, 239, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 87.5%, 0.2)", "rgba(239, 239, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 87.5%, 1)", "rgb(239, 239, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 12.5%)", "rgb(52, 52, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 12.5%, 0)", "rgba(52, 52, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 12.5%, 0.2)", "rgba(52, 52, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 12.5%, 1)", "rgb(52, 52, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 25%)", "rgb(104, 104, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 25%, 0)", "rgba(104, 104, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 25%, 0.2)", "rgba(104, 104, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 25%, 1)", "rgb(104, 104, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 37.5%)", "rgb(155, 155, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 37.5%, 0)", "rgba(155, 155, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 37.5%, 0.2)", "rgba(155, 155, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 37.5%, 1)", "rgb(155, 155, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 50%)", "rgb(207, 207, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 50%, 0)", "rgba(207, 207, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 50%, 0.2)", "rgba(207, 207, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 50%, 1)", "rgb(207, 207, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 62.5%)", "rgb(219, 219, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 62.5%, 0)", "rgba(219, 219, 100, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 62.5%, 0.2)", "rgba(219, 219, 100, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 62.5%, 1)", "rgb(219, 219, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 75%)", "rgb(231, 231, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 75%, 0)", "rgba(231, 231, 151, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 75%, 0.2)", "rgba(231, 231, 151, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 75%, 1)", "rgb(231, 231, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 87.5%)", "rgb(243, 243, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 87.5%, 0)", "rgba(243, 243, 203, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 87.5%, 0.2)", "rgba(243, 243, 203, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 87.5%, 1)", "rgb(243, 243, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 12.5%)", "rgb(56, 56, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 12.5%, 0)", "rgba(56, 56, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 12.5%, 0.2)", "rgba(56, 56, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 12.5%, 1)", "rgb(56, 56, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 25%)", "rgb(112, 112, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 25%, 0)", "rgba(112, 112, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 25%, 0.2)", "rgba(112, 112, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 25%, 1)", "rgb(112, 112, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 37.5%)", "rgb(167, 167, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 37.5%, 0)", "rgba(167, 167, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 37.5%, 0.2)", "rgba(167, 167, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 37.5%, 1)", "rgb(167, 167, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 50%)", "rgb(223, 223, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 50%, 0)", "rgba(223, 223, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 50%, 0.2)", "rgba(223, 223, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 50%, 1)", "rgb(223, 223, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 62.5%)", "rgb(231, 231, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 62.5%, 0)", "rgba(231, 231, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 62.5%, 0.2)", "rgba(231, 231, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 62.5%, 1)", "rgb(231, 231, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 75%)", "rgb(239, 239, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 75%, 0)", "rgba(239, 239, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 75%, 0.2)", "rgba(239, 239, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 75%, 1)", "rgb(239, 239, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 87.5%)", "rgb(247, 247, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 87.5%, 0)", "rgba(247, 247, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 87.5%, 0.2)", "rgba(247, 247, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 87.5%, 1)", "rgb(247, 247, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 12.5%)", "rgb(60, 60, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 12.5%, 0)", "rgba(60, 60, 4, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 12.5%, 0.2)", "rgba(60, 60, 4, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 12.5%, 1)", "rgb(60, 60, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 25%)", "rgb(120, 120, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 25%, 0)", "rgba(120, 120, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 25%, 0.2)", "rgba(120, 120, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 25%, 1)", "rgb(120, 120, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 37.5%)", "rgb(179, 179, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 37.5%, 0)", "rgba(179, 179, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 37.5%, 0.2)", "rgba(179, 179, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 37.5%, 1)", "rgb(179, 179, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 50%)", "rgb(239, 239, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 50%, 0)", "rgba(239, 239, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 50%, 0.2)", "rgba(239, 239, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 50%, 1)", "rgb(239, 239, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 62.5%)", "rgb(243, 243, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 62.5%, 0)", "rgba(243, 243, 76, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 62.5%, 0.2)", "rgba(243, 243, 76, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 62.5%, 1)", "rgb(243, 243, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 75%)", "rgb(247, 247, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 75%, 0)", "rgba(247, 247, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 75%, 0.2)", "rgba(247, 247, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 75%, 1)", "rgb(247, 247, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 87.5%)", "rgb(251, 251, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 87.5%, 0)", "rgba(251, 251, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 87.5%, 0.2)", "rgba(251, 251, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 87.5%, 1)", "rgb(251, 251, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 12.5%)", "rgb(64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 12.5%, 0)", "rgba(64, 64, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 12.5%, 0.2)", "rgba(64, 64, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 12.5%, 1)", "rgb(64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 25%)", "rgb(128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 25%, 0)", "rgba(128, 128, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 25%, 0.2)", "rgba(128, 128, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 25%, 1)", "rgb(128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 37.5%)", "rgb(191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 37.5%, 0)", "rgba(191, 191, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 37.5%, 0.2)", "rgba(191, 191, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 37.5%, 1)", "rgb(191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 50%)", "rgb(255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 50%, 0)", "rgba(255, 255, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 50%, 0.2)", "rgba(255, 255, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 50%, 1)", "rgb(255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 62.5%)", "rgb(255, 255, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 62.5%, 0)", "rgba(255, 255, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 62.5%, 0.2)", "rgba(255, 255, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 62.5%, 1)", "rgb(255, 255, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 75%)", "rgb(255, 255, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 75%, 0)", "rgba(255, 255, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 75%, 0.2)", "rgba(255, 255, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 75%, 1)", "rgb(255, 255, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 87.5%)", "rgb(255, 255, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 87.5%, 0)", "rgba(255, 255, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 87.5%, 0.2)", "rgba(255, 255, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 87.5%, 1)", "rgb(255, 255, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(60, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(60, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 12.5%)", "rgb(32, 36, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 12.5%, 0)", "rgba(32, 36, 28, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 12.5%, 0.2)", "rgba(32, 36, 28, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 12.5%, 1)", "rgb(32, 36, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 25%)", "rgb(64, 72, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 25%, 0)", "rgba(64, 72, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 25%, 0.2)", "rgba(64, 72, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 25%, 1)", "rgb(64, 72, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 37.5%)", "rgb(96, 108, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 37.5%, 0)", "rgba(96, 108, 84, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 37.5%, 0.2)", "rgba(96, 108, 84, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 37.5%, 1)", "rgb(96, 108, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 50%)", "rgb(128, 143, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 50%, 0)", "rgba(128, 143, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 50%, 0.2)", "rgba(128, 143, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 50%, 1)", "rgb(128, 143, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 62.5%)", "rgb(159, 171, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 62.5%, 0)", "rgba(159, 171, 147, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 62.5%, 0.2)", "rgba(159, 171, 147, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 62.5%, 1)", "rgb(159, 171, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 75%)", "rgb(191, 199, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 75%, 0)", "rgba(191, 199, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 75%, 0.2)", "rgba(191, 199, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 75%, 1)", "rgb(191, 199, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 87.5%)", "rgb(223, 227, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 87.5%, 0)", "rgba(223, 227, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 87.5%, 0.2)", "rgba(223, 227, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 87.5%, 1)", "rgb(223, 227, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 12.5%)", "rgb(32, 40, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 12.5%, 0)", "rgba(32, 40, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 12.5%, 0.2)", "rgba(32, 40, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 12.5%, 1)", "rgb(32, 40, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 25%)", "rgb(64, 80, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 25%, 0)", "rgba(64, 80, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 25%, 0.2)", "rgba(64, 80, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 25%, 1)", "rgb(64, 80, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 37.5%)", "rgb(96, 120, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 37.5%, 0)", "rgba(96, 120, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 37.5%, 0.2)", "rgba(96, 120, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 37.5%, 1)", "rgb(96, 120, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 50%)", "rgb(128, 159, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 50%, 0)", "rgba(128, 159, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 50%, 0.2)", "rgba(128, 159, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 50%, 1)", "rgb(128, 159, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 62.5%)", "rgb(159, 183, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 62.5%, 0)", "rgba(159, 183, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 62.5%, 0.2)", "rgba(159, 183, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 62.5%, 1)", "rgb(159, 183, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 75%)", "rgb(191, 207, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 75%, 0)", "rgba(191, 207, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 75%, 0.2)", "rgba(191, 207, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 75%, 1)", "rgb(191, 207, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 87.5%)", "rgb(223, 231, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 87.5%, 0)", "rgba(223, 231, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 87.5%, 0.2)", "rgba(223, 231, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 87.5%, 1)", "rgb(223, 231, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 12.5%)", "rgb(32, 44, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 12.5%, 0)", "rgba(32, 44, 20, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 12.5%, 0.2)", "rgba(32, 44, 20, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 12.5%, 1)", "rgb(32, 44, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 25%)", "rgb(64, 88, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 25%, 0)", "rgba(64, 88, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 25%, 0.2)", "rgba(64, 88, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 25%, 1)", "rgb(64, 88, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 37.5%)", "rgb(96, 131, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 37.5%, 0)", "rgba(96, 131, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 37.5%, 0.2)", "rgba(96, 131, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 37.5%, 1)", "rgb(96, 131, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 50%)", "rgb(128, 175, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 50%, 0)", "rgba(128, 175, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 50%, 0.2)", "rgba(128, 175, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 50%, 1)", "rgb(128, 175, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 62.5%)", "rgb(159, 195, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 62.5%, 0)", "rgba(159, 195, 124, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 62.5%, 0.2)", "rgba(159, 195, 124, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 62.5%, 1)", "rgb(159, 195, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 75%)", "rgb(191, 215, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 75%, 0)", "rgba(191, 215, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 75%, 0.2)", "rgba(191, 215, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 75%, 1)", "rgb(191, 215, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 87.5%)", "rgb(223, 235, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 87.5%, 0)", "rgba(223, 235, 211, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 87.5%, 0.2)", "rgba(223, 235, 211, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 87.5%, 1)", "rgb(223, 235, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 12.5%)", "rgb(32, 48, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 12.5%, 0)", "rgba(32, 48, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 12.5%, 0.2)", "rgba(32, 48, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 12.5%, 1)", "rgb(32, 48, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 25%)", "rgb(64, 96, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 25%, 0)", "rgba(64, 96, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 25%, 0.2)", "rgba(64, 96, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 25%, 1)", "rgb(64, 96, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 37.5%)", "rgb(96, 143, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 37.5%, 0)", "rgba(96, 143, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 37.5%, 0.2)", "rgba(96, 143, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 37.5%, 1)", "rgb(96, 143, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 50%)", "rgb(128, 191, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 50%, 0)", "rgba(128, 191, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 50%, 0.2)", "rgba(128, 191, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 50%, 1)", "rgb(128, 191, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 62.5%)", "rgb(159, 207, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 62.5%, 0)", "rgba(159, 207, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 62.5%, 0.2)", "rgba(159, 207, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 62.5%, 1)", "rgb(159, 207, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 75%)", "rgb(191, 223, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 75%, 0)", "rgba(191, 223, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 75%, 0.2)", "rgba(191, 223, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 75%, 1)", "rgb(191, 223, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 87.5%)", "rgb(223, 239, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 87.5%, 0)", "rgba(223, 239, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 87.5%, 0.2)", "rgba(223, 239, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 87.5%, 1)", "rgb(223, 239, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 12.5%)", "rgb(32, 52, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 12.5%, 0)", "rgba(32, 52, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 12.5%, 0.2)", "rgba(32, 52, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 12.5%, 1)", "rgb(32, 52, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 25%)", "rgb(64, 104, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 25%, 0)", "rgba(64, 104, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 25%, 0.2)", "rgba(64, 104, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 25%, 1)", "rgb(64, 104, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 37.5%)", "rgb(96, 155, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 37.5%, 0)", "rgba(96, 155, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 37.5%, 0.2)", "rgba(96, 155, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 37.5%, 1)", "rgb(96, 155, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 50%)", "rgb(128, 207, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 50%, 0)", "rgba(128, 207, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 50%, 0.2)", "rgba(128, 207, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 50%, 1)", "rgb(128, 207, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 62.5%)", "rgb(159, 219, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 62.5%, 0)", "rgba(159, 219, 100, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 62.5%, 0.2)", "rgba(159, 219, 100, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 62.5%, 1)", "rgb(159, 219, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 75%)", "rgb(191, 231, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 75%, 0)", "rgba(191, 231, 151, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 75%, 0.2)", "rgba(191, 231, 151, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 75%, 1)", "rgb(191, 231, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 87.5%)", "rgb(223, 243, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 87.5%, 0)", "rgba(223, 243, 203, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 87.5%, 0.2)", "rgba(223, 243, 203, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 87.5%, 1)", "rgb(223, 243, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 12.5%)", "rgb(32, 56, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 12.5%, 0)", "rgba(32, 56, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 12.5%, 0.2)", "rgba(32, 56, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 12.5%, 1)", "rgb(32, 56, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 25%)", "rgb(64, 112, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 25%, 0)", "rgba(64, 112, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 25%, 0.2)", "rgba(64, 112, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 25%, 1)", "rgb(64, 112, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 37.5%)", "rgb(96, 167, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 37.5%, 0)", "rgba(96, 167, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 37.5%, 0.2)", "rgba(96, 167, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 37.5%, 1)", "rgb(96, 167, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 50%)", "rgb(128, 223, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 50%, 0)", "rgba(128, 223, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 50%, 0.2)", "rgba(128, 223, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 50%, 1)", "rgb(128, 223, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 62.5%)", "rgb(159, 231, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 62.5%, 0)", "rgba(159, 231, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 62.5%, 0.2)", "rgba(159, 231, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 62.5%, 1)", "rgb(159, 231, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 75%)", "rgb(191, 239, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 75%, 0)", "rgba(191, 239, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 75%, 0.2)", "rgba(191, 239, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 75%, 1)", "rgb(191, 239, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 87.5%)", "rgb(223, 247, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 87.5%, 0)", "rgba(223, 247, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 87.5%, 0.2)", "rgba(223, 247, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 87.5%, 1)", "rgb(223, 247, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 12.5%)", "rgb(32, 60, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 12.5%, 0)", "rgba(32, 60, 4, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 12.5%, 0.2)", "rgba(32, 60, 4, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 12.5%, 1)", "rgb(32, 60, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 25%)", "rgb(64, 120, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 25%, 0)", "rgba(64, 120, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 25%, 0.2)", "rgba(64, 120, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 25%, 1)", "rgb(64, 120, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 37.5%)", "rgb(96, 179, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 37.5%, 0)", "rgba(96, 179, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 37.5%, 0.2)", "rgba(96, 179, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 37.5%, 1)", "rgb(96, 179, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 50%)", "rgb(128, 239, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 50%, 0)", "rgba(128, 239, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 50%, 0.2)", "rgba(128, 239, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 50%, 1)", "rgb(128, 239, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 62.5%)", "rgb(159, 243, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 62.5%, 0)", "rgba(159, 243, 76, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 62.5%, 0.2)", "rgba(159, 243, 76, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 62.5%, 1)", "rgb(159, 243, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 75%)", "rgb(191, 247, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 75%, 0)", "rgba(191, 247, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 75%, 0.2)", "rgba(191, 247, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 75%, 1)", "rgb(191, 247, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 87.5%)", "rgb(223, 251, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 87.5%, 0)", "rgba(223, 251, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 87.5%, 0.2)", "rgba(223, 251, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 87.5%, 1)", "rgb(223, 251, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 12.5%)", "rgb(32, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 12.5%, 0)", "rgba(32, 64, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 12.5%, 0.2)", "rgba(32, 64, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 12.5%, 1)", "rgb(32, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 25%)", "rgb(64, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 25%, 0)", "rgba(64, 128, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 25%, 0.2)", "rgba(64, 128, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 25%, 1)", "rgb(64, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 37.5%)", "rgb(96, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 37.5%, 0)", "rgba(96, 191, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 37.5%, 0.2)", "rgba(96, 191, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 37.5%, 1)", "rgb(96, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 50%)", "rgb(128, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 50%, 0)", "rgba(128, 255, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 50%, 0.2)", "rgba(128, 255, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 50%, 1)", "rgb(128, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 62.5%)", "rgb(159, 255, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 62.5%, 0)", "rgba(159, 255, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 62.5%, 0.2)", "rgba(159, 255, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 62.5%, 1)", "rgb(159, 255, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 75%)", "rgb(191, 255, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 75%, 0)", "rgba(191, 255, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 75%, 0.2)", "rgba(191, 255, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 75%, 1)", "rgb(191, 255, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 87.5%)", "rgb(223, 255, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 87.5%, 0)", "rgba(223, 255, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 87.5%, 0.2)", "rgba(223, 255, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 87.5%, 1)", "rgb(223, 255, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(90, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(90, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 12.5%)", "rgb(28, 36, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 12.5%, 0)", "rgba(28, 36, 28, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 12.5%, 0.2)", "rgba(28, 36, 28, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 12.5%, 1)", "rgb(28, 36, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 25%)", "rgb(56, 72, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 25%, 0)", "rgba(56, 72, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 25%, 0.2)", "rgba(56, 72, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 25%, 1)", "rgb(56, 72, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 37.5%)", "rgb(84, 108, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 37.5%, 0)", "rgba(84, 108, 84, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 37.5%, 0.2)", "rgba(84, 108, 84, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 37.5%, 1)", "rgb(84, 108, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 50%)", "rgb(112, 143, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 50%, 0)", "rgba(112, 143, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 50%, 0.2)", "rgba(112, 143, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 50%, 1)", "rgb(112, 143, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 62.5%)", "rgb(147, 171, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 62.5%, 0)", "rgba(147, 171, 147, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 62.5%, 0.2)", "rgba(147, 171, 147, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 62.5%, 1)", "rgb(147, 171, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 75%)", "rgb(183, 199, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 75%, 0)", "rgba(183, 199, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 75%, 0.2)", "rgba(183, 199, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 75%, 1)", "rgb(183, 199, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 87.5%)", "rgb(219, 227, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 87.5%, 0)", "rgba(219, 227, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 87.5%, 0.2)", "rgba(219, 227, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 87.5%, 1)", "rgb(219, 227, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 12.5%)", "rgb(24, 40, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 12.5%, 0)", "rgba(24, 40, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 12.5%, 0.2)", "rgba(24, 40, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 12.5%, 1)", "rgb(24, 40, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 25%)", "rgb(48, 80, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 25%, 0)", "rgba(48, 80, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 25%, 0.2)", "rgba(48, 80, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 25%, 1)", "rgb(48, 80, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 37.5%)", "rgb(72, 120, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 37.5%, 0)", "rgba(72, 120, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 37.5%, 0.2)", "rgba(72, 120, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 37.5%, 1)", "rgb(72, 120, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 50%)", "rgb(96, 159, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 50%, 0)", "rgba(96, 159, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 50%, 0.2)", "rgba(96, 159, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 50%, 1)", "rgb(96, 159, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 62.5%)", "rgb(135, 183, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 62.5%, 0)", "rgba(135, 183, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 62.5%, 0.2)", "rgba(135, 183, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 62.5%, 1)", "rgb(135, 183, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 75%)", "rgb(175, 207, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 75%, 0)", "rgba(175, 207, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 75%, 0.2)", "rgba(175, 207, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 75%, 1)", "rgb(175, 207, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 87.5%)", "rgb(215, 231, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 87.5%, 0)", "rgba(215, 231, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 87.5%, 0.2)", "rgba(215, 231, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 87.5%, 1)", "rgb(215, 231, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 12.5%)", "rgb(20, 44, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 12.5%, 0)", "rgba(20, 44, 20, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 12.5%, 0.2)", "rgba(20, 44, 20, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 12.5%, 1)", "rgb(20, 44, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 25%)", "rgb(40, 88, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 25%, 0)", "rgba(40, 88, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 25%, 0.2)", "rgba(40, 88, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 25%, 1)", "rgb(40, 88, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 37.5%)", "rgb(60, 131, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 37.5%, 0)", "rgba(60, 131, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 37.5%, 0.2)", "rgba(60, 131, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 37.5%, 1)", "rgb(60, 131, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 50%)", "rgb(80, 175, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 50%, 0)", "rgba(80, 175, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 50%, 0.2)", "rgba(80, 175, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 50%, 1)", "rgb(80, 175, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 62.5%)", "rgb(124, 195, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 62.5%, 0)", "rgba(124, 195, 124, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 62.5%, 0.2)", "rgba(124, 195, 124, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 62.5%, 1)", "rgb(124, 195, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 75%)", "rgb(167, 215, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 75%, 0)", "rgba(167, 215, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 75%, 0.2)", "rgba(167, 215, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 75%, 1)", "rgb(167, 215, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 87.5%)", "rgb(211, 235, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 87.5%, 0)", "rgba(211, 235, 211, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 87.5%, 0.2)", "rgba(211, 235, 211, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 87.5%, 1)", "rgb(211, 235, 211)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 12.5%)", "rgb(16, 48, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 12.5%, 0)", "rgba(16, 48, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 12.5%, 0.2)", "rgba(16, 48, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 12.5%, 1)", "rgb(16, 48, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 25%)", "rgb(32, 96, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 25%, 0)", "rgba(32, 96, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 25%, 0.2)", "rgba(32, 96, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 25%, 1)", "rgb(32, 96, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 37.5%)", "rgb(48, 143, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 37.5%, 0)", "rgba(48, 143, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 37.5%, 0.2)", "rgba(48, 143, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 37.5%, 1)", "rgb(48, 143, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 50%)", "rgb(64, 191, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 50%, 0)", "rgba(64, 191, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 50%, 0.2)", "rgba(64, 191, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 50%, 1)", "rgb(64, 191, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 62.5%)", "rgb(112, 207, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 62.5%, 0)", "rgba(112, 207, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 62.5%, 0.2)", "rgba(112, 207, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 62.5%, 1)", "rgb(112, 207, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 75%)", "rgb(159, 223, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 75%, 0)", "rgba(159, 223, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 75%, 0.2)", "rgba(159, 223, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 75%, 1)", "rgb(159, 223, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 87.5%)", "rgb(207, 239, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 87.5%, 0)", "rgba(207, 239, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 87.5%, 0.2)", "rgba(207, 239, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 87.5%, 1)", "rgb(207, 239, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 12.5%)", "rgb(12, 52, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 12.5%, 0)", "rgba(12, 52, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 12.5%, 0.2)", "rgba(12, 52, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 12.5%, 1)", "rgb(12, 52, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 25%)", "rgb(24, 104, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 25%, 0)", "rgba(24, 104, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 25%, 0.2)", "rgba(24, 104, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 25%, 1)", "rgb(24, 104, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 37.5%)", "rgb(36, 155, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 37.5%, 0)", "rgba(36, 155, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 37.5%, 0.2)", "rgba(36, 155, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 37.5%, 1)", "rgb(36, 155, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 50%)", "rgb(48, 207, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 50%, 0)", "rgba(48, 207, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 50%, 0.2)", "rgba(48, 207, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 50%, 1)", "rgb(48, 207, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 62.5%)", "rgb(100, 219, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 62.5%, 0)", "rgba(100, 219, 100, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 62.5%, 0.2)", "rgba(100, 219, 100, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 62.5%, 1)", "rgb(100, 219, 100)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 75%)", "rgb(151, 231, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 75%, 0)", "rgba(151, 231, 151, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 75%, 0.2)", "rgba(151, 231, 151, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 75%, 1)", "rgb(151, 231, 151)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 87.5%)", "rgb(203, 243, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 87.5%, 0)", "rgba(203, 243, 203, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 87.5%, 0.2)", "rgba(203, 243, 203, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 87.5%, 1)", "rgb(203, 243, 203)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 12.5%)", "rgb(8, 56, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 12.5%, 0)", "rgba(8, 56, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 12.5%, 0.2)", "rgba(8, 56, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 12.5%, 1)", "rgb(8, 56, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 25%)", "rgb(16, 112, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 25%, 0)", "rgba(16, 112, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 25%, 0.2)", "rgba(16, 112, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 25%, 1)", "rgb(16, 112, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 37.5%)", "rgb(24, 167, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 37.5%, 0)", "rgba(24, 167, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 37.5%, 0.2)", "rgba(24, 167, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 37.5%, 1)", "rgb(24, 167, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 50%)", "rgb(32, 223, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 50%, 0)", "rgba(32, 223, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 50%, 0.2)", "rgba(32, 223, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 50%, 1)", "rgb(32, 223, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 62.5%)", "rgb(88, 231, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 62.5%, 0)", "rgba(88, 231, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 62.5%, 0.2)", "rgba(88, 231, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 62.5%, 1)", "rgb(88, 231, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 75%)", "rgb(143, 239, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 75%, 0)", "rgba(143, 239, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 75%, 0.2)", "rgba(143, 239, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 75%, 1)", "rgb(143, 239, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 87.5%)", "rgb(199, 247, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 87.5%, 0)", "rgba(199, 247, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 87.5%, 0.2)", "rgba(199, 247, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 87.5%, 1)", "rgb(199, 247, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 12.5%)", "rgb(4, 60, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 12.5%, 0)", "rgba(4, 60, 4, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 12.5%, 0.2)", "rgba(4, 60, 4, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 12.5%, 1)", "rgb(4, 60, 4)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 25%)", "rgb(8, 120, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 25%, 0)", "rgba(8, 120, 8, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 25%, 0.2)", "rgba(8, 120, 8, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 25%, 1)", "rgb(8, 120, 8)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 37.5%)", "rgb(12, 179, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 37.5%, 0)", "rgba(12, 179, 12, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 37.5%, 0.2)", "rgba(12, 179, 12, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 37.5%, 1)", "rgb(12, 179, 12)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 50%)", "rgb(16, 239, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 50%, 0)", "rgba(16, 239, 16, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 50%, 0.2)", "rgba(16, 239, 16, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 50%, 1)", "rgb(16, 239, 16)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 62.5%)", "rgb(76, 243, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 62.5%, 0)", "rgba(76, 243, 76, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 62.5%, 0.2)", "rgba(76, 243, 76, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 62.5%, 1)", "rgb(76, 243, 76)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 75%)", "rgb(135, 247, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 75%, 0)", "rgba(135, 247, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 75%, 0.2)", "rgba(135, 247, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 75%, 1)", "rgb(135, 247, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 87.5%)", "rgb(195, 251, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 87.5%, 0)", "rgba(195, 251, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 87.5%, 0.2)", "rgba(195, 251, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 87.5%, 1)", "rgb(195, 251, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 12.5%)", "rgb(0, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 12.5%, 0)", "rgba(0, 64, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 12.5%, 0.2)", "rgba(0, 64, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 12.5%, 1)", "rgb(0, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 25%)", "rgb(0, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 25%, 0)", "rgba(0, 128, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 25%, 0.2)", "rgba(0, 128, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 25%, 1)", "rgb(0, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 37.5%)", "rgb(0, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 37.5%, 0)", "rgba(0, 191, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 37.5%, 0.2)", "rgba(0, 191, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 37.5%, 1)", "rgb(0, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 50%)", "rgb(0, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 50%, 0)", "rgba(0, 255, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 50%, 0.2)", "rgba(0, 255, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 50%, 1)", "rgb(0, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 62.5%)", "rgb(64, 255, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 62.5%, 0)", "rgba(64, 255, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 62.5%, 0.2)", "rgba(64, 255, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 62.5%, 1)", "rgb(64, 255, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 75%)", "rgb(128, 255, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 75%, 0)", "rgba(128, 255, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 75%, 0.2)", "rgba(128, 255, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 75%, 1)", "rgb(128, 255, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 87.5%)", "rgb(191, 255, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 87.5%, 0)", "rgba(191, 255, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 87.5%, 0.2)", "rgba(191, 255, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 87.5%, 1)", "rgb(191, 255, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(120, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(120, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 12.5%)", "rgb(28, 36, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 12.5%, 0)", "rgba(28, 36, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 12.5%, 0.2)", "rgba(28, 36, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 12.5%, 1)", "rgb(28, 36, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 25%)", "rgb(56, 72, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 25%, 0)", "rgba(56, 72, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 25%, 0.2)", "rgba(56, 72, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 25%, 1)", "rgb(56, 72, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 37.5%)", "rgb(84, 108, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 37.5%, 0)", "rgba(84, 108, 108, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 37.5%, 0.2)", "rgba(84, 108, 108, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 37.5%, 1)", "rgb(84, 108, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 50%)", "rgb(112, 143, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 50%, 0)", "rgba(112, 143, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 50%, 0.2)", "rgba(112, 143, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 50%, 1)", "rgb(112, 143, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 62.5%)", "rgb(147, 171, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 62.5%, 0)", "rgba(147, 171, 171, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 62.5%, 0.2)", "rgba(147, 171, 171, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 62.5%, 1)", "rgb(147, 171, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 75%)", "rgb(183, 199, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 75%, 0)", "rgba(183, 199, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 75%, 0.2)", "rgba(183, 199, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 75%, 1)", "rgb(183, 199, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 87.5%)", "rgb(219, 227, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 87.5%, 0)", "rgba(219, 227, 227, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 87.5%, 0.2)", "rgba(219, 227, 227, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 87.5%, 1)", "rgb(219, 227, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 12.5%)", "rgb(24, 40, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 12.5%, 0)", "rgba(24, 40, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 12.5%, 0.2)", "rgba(24, 40, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 12.5%, 1)", "rgb(24, 40, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 25%)", "rgb(48, 80, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 25%, 0)", "rgba(48, 80, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 25%, 0.2)", "rgba(48, 80, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 25%, 1)", "rgb(48, 80, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 37.5%)", "rgb(72, 120, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 37.5%, 0)", "rgba(72, 120, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 37.5%, 0.2)", "rgba(72, 120, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 37.5%, 1)", "rgb(72, 120, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 50%)", "rgb(96, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 50%, 0)", "rgba(96, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 50%, 0.2)", "rgba(96, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 50%, 1)", "rgb(96, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 62.5%)", "rgb(135, 183, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 62.5%, 0)", "rgba(135, 183, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 62.5%, 0.2)", "rgba(135, 183, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 62.5%, 1)", "rgb(135, 183, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 75%)", "rgb(175, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 75%, 0)", "rgba(175, 207, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 75%, 0.2)", "rgba(175, 207, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 75%, 1)", "rgb(175, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 87.5%)", "rgb(215, 231, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 87.5%, 0)", "rgba(215, 231, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 87.5%, 0.2)", "rgba(215, 231, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 87.5%, 1)", "rgb(215, 231, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 12.5%)", "rgb(20, 44, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 12.5%, 0)", "rgba(20, 44, 44, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 12.5%, 0.2)", "rgba(20, 44, 44, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 12.5%, 1)", "rgb(20, 44, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 25%)", "rgb(40, 88, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 25%, 0)", "rgba(40, 88, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 25%, 0.2)", "rgba(40, 88, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 25%, 1)", "rgb(40, 88, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 37.5%)", "rgb(60, 131, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 37.5%, 0)", "rgba(60, 131, 131, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 37.5%, 0.2)", "rgba(60, 131, 131, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 37.5%, 1)", "rgb(60, 131, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 50%)", "rgb(80, 175, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 50%, 0)", "rgba(80, 175, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 50%, 0.2)", "rgba(80, 175, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 50%, 1)", "rgb(80, 175, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 62.5%)", "rgb(124, 195, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 62.5%, 0)", "rgba(124, 195, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 62.5%, 0.2)", "rgba(124, 195, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 62.5%, 1)", "rgb(124, 195, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 75%)", "rgb(167, 215, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 75%, 0)", "rgba(167, 215, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 75%, 0.2)", "rgba(167, 215, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 75%, 1)", "rgb(167, 215, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 87.5%)", "rgb(211, 235, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 87.5%, 0)", "rgba(211, 235, 235, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 87.5%, 0.2)", "rgba(211, 235, 235, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 87.5%, 1)", "rgb(211, 235, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 12.5%)", "rgb(16, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 12.5%, 0)", "rgba(16, 48, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 12.5%, 0.2)", "rgba(16, 48, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 12.5%, 1)", "rgb(16, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 25%)", "rgb(32, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 25%, 0)", "rgba(32, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 25%, 0.2)", "rgba(32, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 25%, 1)", "rgb(32, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 37.5%)", "rgb(48, 143, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 37.5%, 0)", "rgba(48, 143, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 37.5%, 0.2)", "rgba(48, 143, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 37.5%, 1)", "rgb(48, 143, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 50%)", "rgb(64, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 50%, 0)", "rgba(64, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 50%, 0.2)", "rgba(64, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 50%, 1)", "rgb(64, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 62.5%)", "rgb(112, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 62.5%, 0)", "rgba(112, 207, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 62.5%, 0.2)", "rgba(112, 207, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 62.5%, 1)", "rgb(112, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 75%)", "rgb(159, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 75%, 0)", "rgba(159, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 75%, 0.2)", "rgba(159, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 75%, 1)", "rgb(159, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 87.5%)", "rgb(207, 239, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 87.5%, 0)", "rgba(207, 239, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 87.5%, 0.2)", "rgba(207, 239, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 87.5%, 1)", "rgb(207, 239, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 12.5%)", "rgb(12, 52, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 12.5%, 0)", "rgba(12, 52, 52, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 12.5%, 0.2)", "rgba(12, 52, 52, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 12.5%, 1)", "rgb(12, 52, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 25%)", "rgb(24, 104, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 25%, 0)", "rgba(24, 104, 104, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 25%, 0.2)", "rgba(24, 104, 104, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 25%, 1)", "rgb(24, 104, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 37.5%)", "rgb(36, 155, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 37.5%, 0)", "rgba(36, 155, 155, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 37.5%, 0.2)", "rgba(36, 155, 155, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 37.5%, 1)", "rgb(36, 155, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 50%)", "rgb(48, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 50%, 0)", "rgba(48, 207, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 50%, 0.2)", "rgba(48, 207, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 50%, 1)", "rgb(48, 207, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 62.5%)", "rgb(100, 219, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 62.5%, 0)", "rgba(100, 219, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 62.5%, 0.2)", "rgba(100, 219, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 62.5%, 1)", "rgb(100, 219, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 75%)", "rgb(151, 231, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 75%, 0)", "rgba(151, 231, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 75%, 0.2)", "rgba(151, 231, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 75%, 1)", "rgb(151, 231, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 87.5%)", "rgb(203, 243, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 87.5%, 0)", "rgba(203, 243, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 87.5%, 0.2)", "rgba(203, 243, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 87.5%, 1)", "rgb(203, 243, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 12.5%)", "rgb(8, 56, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 12.5%, 0)", "rgba(8, 56, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 12.5%, 0.2)", "rgba(8, 56, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 12.5%, 1)", "rgb(8, 56, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 25%)", "rgb(16, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 25%, 0)", "rgba(16, 112, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 25%, 0.2)", "rgba(16, 112, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 25%, 1)", "rgb(16, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 37.5%)", "rgb(24, 167, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 37.5%, 0)", "rgba(24, 167, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 37.5%, 0.2)", "rgba(24, 167, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 37.5%, 1)", "rgb(24, 167, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 50%)", "rgb(32, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 50%, 0)", "rgba(32, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 50%, 0.2)", "rgba(32, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 50%, 1)", "rgb(32, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 62.5%)", "rgb(88, 231, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 62.5%, 0)", "rgba(88, 231, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 62.5%, 0.2)", "rgba(88, 231, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 62.5%, 1)", "rgb(88, 231, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 75%)", "rgb(143, 239, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 75%, 0)", "rgba(143, 239, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 75%, 0.2)", "rgba(143, 239, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 75%, 1)", "rgb(143, 239, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 87.5%)", "rgb(199, 247, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 87.5%, 0)", "rgba(199, 247, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 87.5%, 0.2)", "rgba(199, 247, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 87.5%, 1)", "rgb(199, 247, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 12.5%)", "rgb(4, 60, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 12.5%, 0)", "rgba(4, 60, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 12.5%, 0.2)", "rgba(4, 60, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 12.5%, 1)", "rgb(4, 60, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 25%)", "rgb(8, 120, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 25%, 0)", "rgba(8, 120, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 25%, 0.2)", "rgba(8, 120, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 25%, 1)", "rgb(8, 120, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 37.5%)", "rgb(12, 179, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 37.5%, 0)", "rgba(12, 179, 179, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 37.5%, 0.2)", "rgba(12, 179, 179, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 37.5%, 1)", "rgb(12, 179, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 50%)", "rgb(16, 239, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 50%, 0)", "rgba(16, 239, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 50%, 0.2)", "rgba(16, 239, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 50%, 1)", "rgb(16, 239, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 62.5%)", "rgb(76, 243, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 62.5%, 0)", "rgba(76, 243, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 62.5%, 0.2)", "rgba(76, 243, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 62.5%, 1)", "rgb(76, 243, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 75%)", "rgb(135, 247, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 75%, 0)", "rgba(135, 247, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 75%, 0.2)", "rgba(135, 247, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 75%, 1)", "rgb(135, 247, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 87.5%)", "rgb(195, 251, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 87.5%, 0)", "rgba(195, 251, 251, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 87.5%, 0.2)", "rgba(195, 251, 251, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 87.5%, 1)", "rgb(195, 251, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 12.5%)", "rgb(0, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 12.5%, 0)", "rgba(0, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 12.5%, 0.2)", "rgba(0, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 12.5%, 1)", "rgb(0, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 25%)", "rgb(0, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 25%, 0)", "rgba(0, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 25%, 0.2)", "rgba(0, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 25%, 1)", "rgb(0, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 37.5%)", "rgb(0, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 37.5%, 0)", "rgba(0, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 37.5%, 0.2)", "rgba(0, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 37.5%, 1)", "rgb(0, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 50%)", "rgb(0, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 50%, 0)", "rgba(0, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 50%, 0.2)", "rgba(0, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 50%, 1)", "rgb(0, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 62.5%)", "rgb(64, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 62.5%, 0)", "rgba(64, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 62.5%, 0.2)", "rgba(64, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 62.5%, 1)", "rgb(64, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 75%)", "rgb(128, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 75%, 0)", "rgba(128, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 75%, 0.2)", "rgba(128, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 75%, 1)", "rgb(128, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 87.5%)", "rgb(191, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 87.5%, 0)", "rgba(191, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 87.5%, 0.2)", "rgba(191, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 87.5%, 1)", "rgb(191, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(180, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(180, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 12.5%)", "rgb(28, 32, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 12.5%, 0)", "rgba(28, 32, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 12.5%, 0.2)", "rgba(28, 32, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 12.5%, 1)", "rgb(28, 32, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 25%)", "rgb(56, 64, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 25%, 0)", "rgba(56, 64, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 25%, 0.2)", "rgba(56, 64, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 25%, 1)", "rgb(56, 64, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 37.5%)", "rgb(84, 96, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 37.5%, 0)", "rgba(84, 96, 108, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 37.5%, 0.2)", "rgba(84, 96, 108, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 37.5%, 1)", "rgb(84, 96, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 50%)", "rgb(112, 128, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 50%, 0)", "rgba(112, 128, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 50%, 0.2)", "rgba(112, 128, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 50%, 1)", "rgb(112, 128, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 62.5%)", "rgb(147, 159, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 62.5%, 0)", "rgba(147, 159, 171, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 62.5%, 0.2)", "rgba(147, 159, 171, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 62.5%, 1)", "rgb(147, 159, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 75%)", "rgb(183, 191, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 75%, 0)", "rgba(183, 191, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 75%, 0.2)", "rgba(183, 191, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 75%, 1)", "rgb(183, 191, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 87.5%)", "rgb(219, 223, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 87.5%, 0)", "rgba(219, 223, 227, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 87.5%, 0.2)", "rgba(219, 223, 227, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 87.5%, 1)", "rgb(219, 223, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 12.5%)", "rgb(24, 32, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 12.5%, 0)", "rgba(24, 32, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 12.5%, 0.2)", "rgba(24, 32, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 12.5%, 1)", "rgb(24, 32, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 25%)", "rgb(48, 64, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 25%, 0)", "rgba(48, 64, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 25%, 0.2)", "rgba(48, 64, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 25%, 1)", "rgb(48, 64, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 37.5%)", "rgb(72, 96, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 37.5%, 0)", "rgba(72, 96, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 37.5%, 0.2)", "rgba(72, 96, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 37.5%, 1)", "rgb(72, 96, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 50%)", "rgb(96, 128, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 50%, 0)", "rgba(96, 128, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 50%, 0.2)", "rgba(96, 128, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 50%, 1)", "rgb(96, 128, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 62.5%)", "rgb(135, 159, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 62.5%, 0)", "rgba(135, 159, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 62.5%, 0.2)", "rgba(135, 159, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 62.5%, 1)", "rgb(135, 159, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 75%)", "rgb(175, 191, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 75%, 0)", "rgba(175, 191, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 75%, 0.2)", "rgba(175, 191, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 75%, 1)", "rgb(175, 191, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 87.5%)", "rgb(215, 223, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 87.5%, 0)", "rgba(215, 223, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 87.5%, 0.2)", "rgba(215, 223, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 87.5%, 1)", "rgb(215, 223, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 12.5%)", "rgb(20, 32, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 12.5%, 0)", "rgba(20, 32, 44, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 12.5%, 0.2)", "rgba(20, 32, 44, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 12.5%, 1)", "rgb(20, 32, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 25%)", "rgb(40, 64, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 25%, 0)", "rgba(40, 64, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 25%, 0.2)", "rgba(40, 64, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 25%, 1)", "rgb(40, 64, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 37.5%)", "rgb(60, 96, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 37.5%, 0)", "rgba(60, 96, 131, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 37.5%, 0.2)", "rgba(60, 96, 131, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 37.5%, 1)", "rgb(60, 96, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 50%)", "rgb(80, 128, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 50%, 0)", "rgba(80, 128, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 50%, 0.2)", "rgba(80, 128, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 50%, 1)", "rgb(80, 128, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 62.5%)", "rgb(124, 159, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 62.5%, 0)", "rgba(124, 159, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 62.5%, 0.2)", "rgba(124, 159, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 62.5%, 1)", "rgb(124, 159, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 75%)", "rgb(167, 191, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 75%, 0)", "rgba(167, 191, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 75%, 0.2)", "rgba(167, 191, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 75%, 1)", "rgb(167, 191, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 87.5%)", "rgb(211, 223, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 87.5%, 0)", "rgba(211, 223, 235, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 87.5%, 0.2)", "rgba(211, 223, 235, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 87.5%, 1)", "rgb(211, 223, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 12.5%)", "rgb(16, 32, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 12.5%, 0)", "rgba(16, 32, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 12.5%, 0.2)", "rgba(16, 32, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 12.5%, 1)", "rgb(16, 32, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 25%)", "rgb(32, 64, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 25%, 0)", "rgba(32, 64, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 25%, 0.2)", "rgba(32, 64, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 25%, 1)", "rgb(32, 64, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 37.5%)", "rgb(48, 96, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 37.5%, 0)", "rgba(48, 96, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 37.5%, 0.2)", "rgba(48, 96, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 37.5%, 1)", "rgb(48, 96, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 50%)", "rgb(64, 128, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 50%, 0)", "rgba(64, 128, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 50%, 0.2)", "rgba(64, 128, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 50%, 1)", "rgb(64, 128, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 62.5%)", "rgb(112, 159, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 62.5%, 0)", "rgba(112, 159, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 62.5%, 0.2)", "rgba(112, 159, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 62.5%, 1)", "rgb(112, 159, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 75%)", "rgb(159, 191, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 75%, 0)", "rgba(159, 191, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 75%, 0.2)", "rgba(159, 191, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 75%, 1)", "rgb(159, 191, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 87.5%)", "rgb(207, 223, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 87.5%, 0)", "rgba(207, 223, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 87.5%, 0.2)", "rgba(207, 223, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 87.5%, 1)", "rgb(207, 223, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 12.5%)", "rgb(12, 32, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 12.5%, 0)", "rgba(12, 32, 52, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 12.5%, 0.2)", "rgba(12, 32, 52, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 12.5%, 1)", "rgb(12, 32, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 25%)", "rgb(24, 64, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 25%, 0)", "rgba(24, 64, 104, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 25%, 0.2)", "rgba(24, 64, 104, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 25%, 1)", "rgb(24, 64, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 37.5%)", "rgb(36, 96, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 37.5%, 0)", "rgba(36, 96, 155, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 37.5%, 0.2)", "rgba(36, 96, 155, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 37.5%, 1)", "rgb(36, 96, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 50%)", "rgb(48, 128, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 50%, 0)", "rgba(48, 128, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 50%, 0.2)", "rgba(48, 128, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 50%, 1)", "rgb(48, 128, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 62.5%)", "rgb(100, 159, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 62.5%, 0)", "rgba(100, 159, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 62.5%, 0.2)", "rgba(100, 159, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 62.5%, 1)", "rgb(100, 159, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 75%)", "rgb(151, 191, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 75%, 0)", "rgba(151, 191, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 75%, 0.2)", "rgba(151, 191, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 75%, 1)", "rgb(151, 191, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 87.5%)", "rgb(203, 223, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 87.5%, 0)", "rgba(203, 223, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 87.5%, 0.2)", "rgba(203, 223, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 87.5%, 1)", "rgb(203, 223, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 12.5%)", "rgb(8, 32, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 12.5%, 0)", "rgba(8, 32, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 12.5%, 0.2)", "rgba(8, 32, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 12.5%, 1)", "rgb(8, 32, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 25%)", "rgb(16, 64, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 25%, 0)", "rgba(16, 64, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 25%, 0.2)", "rgba(16, 64, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 25%, 1)", "rgb(16, 64, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 37.5%)", "rgb(24, 96, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 37.5%, 0)", "rgba(24, 96, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 37.5%, 0.2)", "rgba(24, 96, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 37.5%, 1)", "rgb(24, 96, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 50%)", "rgb(32, 128, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 50%, 0)", "rgba(32, 128, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 50%, 0.2)", "rgba(32, 128, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 50%, 1)", "rgb(32, 128, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 62.5%)", "rgb(88, 159, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 62.5%, 0)", "rgba(88, 159, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 62.5%, 0.2)", "rgba(88, 159, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 62.5%, 1)", "rgb(88, 159, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 75%)", "rgb(143, 191, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 75%, 0)", "rgba(143, 191, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 75%, 0.2)", "rgba(143, 191, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 75%, 1)", "rgb(143, 191, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 87.5%)", "rgb(199, 223, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 87.5%, 0)", "rgba(199, 223, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 87.5%, 0.2)", "rgba(199, 223, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 87.5%, 1)", "rgb(199, 223, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 12.5%)", "rgb(4, 32, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 12.5%, 0)", "rgba(4, 32, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 12.5%, 0.2)", "rgba(4, 32, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 12.5%, 1)", "rgb(4, 32, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 25%)", "rgb(8, 64, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 25%, 0)", "rgba(8, 64, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 25%, 0.2)", "rgba(8, 64, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 25%, 1)", "rgb(8, 64, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 37.5%)", "rgb(12, 96, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 37.5%, 0)", "rgba(12, 96, 179, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 37.5%, 0.2)", "rgba(12, 96, 179, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 37.5%, 1)", "rgb(12, 96, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 50%)", "rgb(16, 128, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 50%, 0)", "rgba(16, 128, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 50%, 0.2)", "rgba(16, 128, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 50%, 1)", "rgb(16, 128, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 62.5%)", "rgb(76, 159, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 62.5%, 0)", "rgba(76, 159, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 62.5%, 0.2)", "rgba(76, 159, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 62.5%, 1)", "rgb(76, 159, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 75%)", "rgb(135, 191, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 75%, 0)", "rgba(135, 191, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 75%, 0.2)", "rgba(135, 191, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 75%, 1)", "rgb(135, 191, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 87.5%)", "rgb(195, 223, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 87.5%, 0)", "rgba(195, 223, 251, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 87.5%, 0.2)", "rgba(195, 223, 251, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 87.5%, 1)", "rgb(195, 223, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 12.5%)", "rgb(0, 32, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 12.5%, 0)", "rgba(0, 32, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 12.5%, 0.2)", "rgba(0, 32, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 12.5%, 1)", "rgb(0, 32, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 25%)", "rgb(0, 64, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 25%, 0)", "rgba(0, 64, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 25%, 0.2)", "rgba(0, 64, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 25%, 1)", "rgb(0, 64, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 37.5%)", "rgb(0, 96, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 37.5%, 0)", "rgba(0, 96, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 37.5%, 0.2)", "rgba(0, 96, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 37.5%, 1)", "rgb(0, 96, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 50%)", "rgb(0, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 50%, 0)", "rgba(0, 128, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 50%, 0.2)", "rgba(0, 128, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 50%, 1)", "rgb(0, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 62.5%)", "rgb(64, 159, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 62.5%, 0)", "rgba(64, 159, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 62.5%, 0.2)", "rgba(64, 159, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 62.5%, 1)", "rgb(64, 159, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 75%)", "rgb(128, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 75%, 0)", "rgba(128, 191, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 75%, 0.2)", "rgba(128, 191, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 75%, 1)", "rgb(128, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 87.5%)", "rgb(191, 223, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 87.5%, 0)", "rgba(191, 223, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 87.5%, 0.2)", "rgba(191, 223, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 87.5%, 1)", "rgb(191, 223, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(210, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(210, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 12.5%)", "rgb(28, 28, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 12.5%, 0)", "rgba(28, 28, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 12.5%, 0.2)", "rgba(28, 28, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 12.5%, 1)", "rgb(28, 28, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 25%)", "rgb(56, 56, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 25%, 0)", "rgba(56, 56, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 25%, 0.2)", "rgba(56, 56, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 25%, 1)", "rgb(56, 56, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 37.5%)", "rgb(84, 84, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 37.5%, 0)", "rgba(84, 84, 108, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 37.5%, 0.2)", "rgba(84, 84, 108, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 37.5%, 1)", "rgb(84, 84, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 50%)", "rgb(112, 112, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 50%, 0)", "rgba(112, 112, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 50%, 0.2)", "rgba(112, 112, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 50%, 1)", "rgb(112, 112, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 62.5%)", "rgb(147, 147, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 62.5%, 0)", "rgba(147, 147, 171, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 62.5%, 0.2)", "rgba(147, 147, 171, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 62.5%, 1)", "rgb(147, 147, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 75%)", "rgb(183, 183, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 75%, 0)", "rgba(183, 183, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 75%, 0.2)", "rgba(183, 183, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 75%, 1)", "rgb(183, 183, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 87.5%)", "rgb(219, 219, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 87.5%, 0)", "rgba(219, 219, 227, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 87.5%, 0.2)", "rgba(219, 219, 227, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 87.5%, 1)", "rgb(219, 219, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 12.5%)", "rgb(24, 24, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 12.5%, 0)", "rgba(24, 24, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 12.5%, 0.2)", "rgba(24, 24, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 12.5%, 1)", "rgb(24, 24, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 25%)", "rgb(48, 48, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 25%, 0)", "rgba(48, 48, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 25%, 0.2)", "rgba(48, 48, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 25%, 1)", "rgb(48, 48, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 37.5%)", "rgb(72, 72, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 37.5%, 0)", "rgba(72, 72, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 37.5%, 0.2)", "rgba(72, 72, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 37.5%, 1)", "rgb(72, 72, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 50%)", "rgb(96, 96, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 50%, 0)", "rgba(96, 96, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 50%, 0.2)", "rgba(96, 96, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 50%, 1)", "rgb(96, 96, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 62.5%)", "rgb(135, 135, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 62.5%, 0)", "rgba(135, 135, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 62.5%, 0.2)", "rgba(135, 135, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 62.5%, 1)", "rgb(135, 135, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 75%)", "rgb(175, 175, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 75%, 0)", "rgba(175, 175, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 75%, 0.2)", "rgba(175, 175, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 75%, 1)", "rgb(175, 175, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 87.5%)", "rgb(215, 215, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 87.5%, 0)", "rgba(215, 215, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 87.5%, 0.2)", "rgba(215, 215, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 87.5%, 1)", "rgb(215, 215, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 12.5%)", "rgb(20, 20, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 12.5%, 0)", "rgba(20, 20, 44, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 12.5%, 0.2)", "rgba(20, 20, 44, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 12.5%, 1)", "rgb(20, 20, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 25%)", "rgb(40, 40, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 25%, 0)", "rgba(40, 40, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 25%, 0.2)", "rgba(40, 40, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 25%, 1)", "rgb(40, 40, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 37.5%)", "rgb(60, 60, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 37.5%, 0)", "rgba(60, 60, 131, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 37.5%, 0.2)", "rgba(60, 60, 131, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 37.5%, 1)", "rgb(60, 60, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 50%)", "rgb(80, 80, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 50%, 0)", "rgba(80, 80, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 50%, 0.2)", "rgba(80, 80, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 50%, 1)", "rgb(80, 80, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 62.5%)", "rgb(124, 124, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 62.5%, 0)", "rgba(124, 124, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 62.5%, 0.2)", "rgba(124, 124, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 62.5%, 1)", "rgb(124, 124, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 75%)", "rgb(167, 167, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 75%, 0)", "rgba(167, 167, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 75%, 0.2)", "rgba(167, 167, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 75%, 1)", "rgb(167, 167, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 87.5%)", "rgb(211, 211, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 87.5%, 0)", "rgba(211, 211, 235, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 87.5%, 0.2)", "rgba(211, 211, 235, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 87.5%, 1)", "rgb(211, 211, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 12.5%)", "rgb(16, 16, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 12.5%, 0)", "rgba(16, 16, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 12.5%, 0.2)", "rgba(16, 16, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 12.5%, 1)", "rgb(16, 16, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 25%)", "rgb(32, 32, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 25%, 0)", "rgba(32, 32, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 25%, 0.2)", "rgba(32, 32, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 25%, 1)", "rgb(32, 32, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 37.5%)", "rgb(48, 48, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 37.5%, 0)", "rgba(48, 48, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 37.5%, 0.2)", "rgba(48, 48, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 37.5%, 1)", "rgb(48, 48, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 50%)", "rgb(64, 64, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 50%, 0)", "rgba(64, 64, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 50%, 0.2)", "rgba(64, 64, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 50%, 1)", "rgb(64, 64, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 62.5%)", "rgb(112, 112, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 62.5%, 0)", "rgba(112, 112, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 62.5%, 0.2)", "rgba(112, 112, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 62.5%, 1)", "rgb(112, 112, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 75%)", "rgb(159, 159, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 75%, 0)", "rgba(159, 159, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 75%, 0.2)", "rgba(159, 159, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 75%, 1)", "rgb(159, 159, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 87.5%)", "rgb(207, 207, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 87.5%, 0)", "rgba(207, 207, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 87.5%, 0.2)", "rgba(207, 207, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 87.5%, 1)", "rgb(207, 207, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 12.5%)", "rgb(12, 12, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 12.5%, 0)", "rgba(12, 12, 52, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 12.5%, 0.2)", "rgba(12, 12, 52, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 12.5%, 1)", "rgb(12, 12, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 25%)", "rgb(24, 24, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 25%, 0)", "rgba(24, 24, 104, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 25%, 0.2)", "rgba(24, 24, 104, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 25%, 1)", "rgb(24, 24, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 37.5%)", "rgb(36, 36, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 37.5%, 0)", "rgba(36, 36, 155, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 37.5%, 0.2)", "rgba(36, 36, 155, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 37.5%, 1)", "rgb(36, 36, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 50%)", "rgb(48, 48, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 50%, 0)", "rgba(48, 48, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 50%, 0.2)", "rgba(48, 48, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 50%, 1)", "rgb(48, 48, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 62.5%)", "rgb(100, 100, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 62.5%, 0)", "rgba(100, 100, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 62.5%, 0.2)", "rgba(100, 100, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 62.5%, 1)", "rgb(100, 100, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 75%)", "rgb(151, 151, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 75%, 0)", "rgba(151, 151, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 75%, 0.2)", "rgba(151, 151, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 75%, 1)", "rgb(151, 151, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 87.5%)", "rgb(203, 203, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 87.5%, 0)", "rgba(203, 203, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 87.5%, 0.2)", "rgba(203, 203, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 87.5%, 1)", "rgb(203, 203, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 12.5%)", "rgb(8, 8, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 12.5%, 0)", "rgba(8, 8, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 12.5%, 0.2)", "rgba(8, 8, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 12.5%, 1)", "rgb(8, 8, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 25%)", "rgb(16, 16, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 25%, 0)", "rgba(16, 16, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 25%, 0.2)", "rgba(16, 16, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 25%, 1)", "rgb(16, 16, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 37.5%)", "rgb(24, 24, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 37.5%, 0)", "rgba(24, 24, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 37.5%, 0.2)", "rgba(24, 24, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 37.5%, 1)", "rgb(24, 24, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 50%)", "rgb(32, 32, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 50%, 0)", "rgba(32, 32, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 50%, 0.2)", "rgba(32, 32, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 50%, 1)", "rgb(32, 32, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 62.5%)", "rgb(88, 88, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 62.5%, 0)", "rgba(88, 88, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 62.5%, 0.2)", "rgba(88, 88, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 62.5%, 1)", "rgb(88, 88, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 75%)", "rgb(143, 143, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 75%, 0)", "rgba(143, 143, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 75%, 0.2)", "rgba(143, 143, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 75%, 1)", "rgb(143, 143, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 87.5%)", "rgb(199, 199, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 87.5%, 0)", "rgba(199, 199, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 87.5%, 0.2)", "rgba(199, 199, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 87.5%, 1)", "rgb(199, 199, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 12.5%)", "rgb(4, 4, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 12.5%, 0)", "rgba(4, 4, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 12.5%, 0.2)", "rgba(4, 4, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 12.5%, 1)", "rgb(4, 4, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 25%)", "rgb(8, 8, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 25%, 0)", "rgba(8, 8, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 25%, 0.2)", "rgba(8, 8, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 25%, 1)", "rgb(8, 8, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 37.5%)", "rgb(12, 12, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 37.5%, 0)", "rgba(12, 12, 179, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 37.5%, 0.2)", "rgba(12, 12, 179, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 37.5%, 1)", "rgb(12, 12, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 50%)", "rgb(16, 16, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 50%, 0)", "rgba(16, 16, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 50%, 0.2)", "rgba(16, 16, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 50%, 1)", "rgb(16, 16, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 62.5%)", "rgb(76, 76, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 62.5%, 0)", "rgba(76, 76, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 62.5%, 0.2)", "rgba(76, 76, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 62.5%, 1)", "rgb(76, 76, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 75%)", "rgb(135, 135, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 75%, 0)", "rgba(135, 135, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 75%, 0.2)", "rgba(135, 135, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 75%, 1)", "rgb(135, 135, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 87.5%)", "rgb(195, 195, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 87.5%, 0)", "rgba(195, 195, 251, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 87.5%, 0.2)", "rgba(195, 195, 251, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 87.5%, 1)", "rgb(195, 195, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 12.5%)", "rgb(0, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 12.5%, 0)", "rgba(0, 0, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 12.5%, 0.2)", "rgba(0, 0, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 12.5%, 1)", "rgb(0, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 25%)", "rgb(0, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 25%, 0)", "rgba(0, 0, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 25%, 0.2)", "rgba(0, 0, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 25%, 1)", "rgb(0, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 37.5%)", "rgb(0, 0, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 37.5%, 0)", "rgba(0, 0, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 37.5%, 0.2)", "rgba(0, 0, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 37.5%, 1)", "rgb(0, 0, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 50%)", "rgb(0, 0, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 50%, 0)", "rgba(0, 0, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 50%, 0.2)", "rgba(0, 0, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 50%, 1)", "rgb(0, 0, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 62.5%)", "rgb(64, 64, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 62.5%, 0)", "rgba(64, 64, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 62.5%, 0.2)", "rgba(64, 64, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 62.5%, 1)", "rgb(64, 64, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 75%)", "rgb(128, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 75%, 0)", "rgba(128, 128, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 75%, 0.2)", "rgba(128, 128, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 75%, 1)", "rgb(128, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 87.5%)", "rgb(191, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 87.5%, 0)", "rgba(191, 191, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 87.5%, 0.2)", "rgba(191, 191, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 87.5%, 1)", "rgb(191, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(240, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(240, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 12.5%)", "rgb(32, 28, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 12.5%, 0)", "rgba(32, 28, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 12.5%, 0.2)", "rgba(32, 28, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 12.5%, 1)", "rgb(32, 28, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 25%)", "rgb(64, 56, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 25%, 0)", "rgba(64, 56, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 25%, 0.2)", "rgba(64, 56, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 25%, 1)", "rgb(64, 56, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 37.5%)", "rgb(96, 84, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 37.5%, 0)", "rgba(96, 84, 108, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 37.5%, 0.2)", "rgba(96, 84, 108, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 37.5%, 1)", "rgb(96, 84, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 50%)", "rgb(128, 112, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 50%, 0)", "rgba(128, 112, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 50%, 0.2)", "rgba(128, 112, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 50%, 1)", "rgb(128, 112, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 62.5%)", "rgb(159, 147, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 62.5%, 0)", "rgba(159, 147, 171, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 62.5%, 0.2)", "rgba(159, 147, 171, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 62.5%, 1)", "rgb(159, 147, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 75%)", "rgb(191, 183, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 75%, 0)", "rgba(191, 183, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 75%, 0.2)", "rgba(191, 183, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 75%, 1)", "rgb(191, 183, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 87.5%)", "rgb(223, 219, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 87.5%, 0)", "rgba(223, 219, 227, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 87.5%, 0.2)", "rgba(223, 219, 227, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 87.5%, 1)", "rgb(223, 219, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 12.5%)", "rgb(32, 24, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 12.5%, 0)", "rgba(32, 24, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 12.5%, 0.2)", "rgba(32, 24, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 12.5%, 1)", "rgb(32, 24, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 25%)", "rgb(64, 48, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 25%, 0)", "rgba(64, 48, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 25%, 0.2)", "rgba(64, 48, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 25%, 1)", "rgb(64, 48, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 37.5%)", "rgb(96, 72, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 37.5%, 0)", "rgba(96, 72, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 37.5%, 0.2)", "rgba(96, 72, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 37.5%, 1)", "rgb(96, 72, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 50%)", "rgb(128, 96, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 50%, 0)", "rgba(128, 96, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 50%, 0.2)", "rgba(128, 96, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 50%, 1)", "rgb(128, 96, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 62.5%)", "rgb(159, 135, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 62.5%, 0)", "rgba(159, 135, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 62.5%, 0.2)", "rgba(159, 135, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 62.5%, 1)", "rgb(159, 135, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 75%)", "rgb(191, 175, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 75%, 0)", "rgba(191, 175, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 75%, 0.2)", "rgba(191, 175, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 75%, 1)", "rgb(191, 175, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 87.5%)", "rgb(223, 215, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 87.5%, 0)", "rgba(223, 215, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 87.5%, 0.2)", "rgba(223, 215, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 87.5%, 1)", "rgb(223, 215, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 12.5%)", "rgb(32, 20, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 12.5%, 0)", "rgba(32, 20, 44, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 12.5%, 0.2)", "rgba(32, 20, 44, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 12.5%, 1)", "rgb(32, 20, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 25%)", "rgb(64, 40, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 25%, 0)", "rgba(64, 40, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 25%, 0.2)", "rgba(64, 40, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 25%, 1)", "rgb(64, 40, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 37.5%)", "rgb(96, 60, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 37.5%, 0)", "rgba(96, 60, 131, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 37.5%, 0.2)", "rgba(96, 60, 131, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 37.5%, 1)", "rgb(96, 60, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 50%)", "rgb(128, 80, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 50%, 0)", "rgba(128, 80, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 50%, 0.2)", "rgba(128, 80, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 50%, 1)", "rgb(128, 80, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 62.5%)", "rgb(159, 124, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 62.5%, 0)", "rgba(159, 124, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 62.5%, 0.2)", "rgba(159, 124, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 62.5%, 1)", "rgb(159, 124, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 75%)", "rgb(191, 167, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 75%, 0)", "rgba(191, 167, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 75%, 0.2)", "rgba(191, 167, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 75%, 1)", "rgb(191, 167, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 87.5%)", "rgb(223, 211, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 87.5%, 0)", "rgba(223, 211, 235, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 87.5%, 0.2)", "rgba(223, 211, 235, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 87.5%, 1)", "rgb(223, 211, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 12.5%)", "rgb(32, 16, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 12.5%, 0)", "rgba(32, 16, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 12.5%, 0.2)", "rgba(32, 16, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 12.5%, 1)", "rgb(32, 16, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 25%)", "rgb(64, 32, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 25%, 0)", "rgba(64, 32, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 25%, 0.2)", "rgba(64, 32, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 25%, 1)", "rgb(64, 32, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 37.5%)", "rgb(96, 48, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 37.5%, 0)", "rgba(96, 48, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 37.5%, 0.2)", "rgba(96, 48, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 37.5%, 1)", "rgb(96, 48, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 50%)", "rgb(128, 64, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 50%, 0)", "rgba(128, 64, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 50%, 0.2)", "rgba(128, 64, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 50%, 1)", "rgb(128, 64, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 62.5%)", "rgb(159, 112, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 62.5%, 0)", "rgba(159, 112, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 62.5%, 0.2)", "rgba(159, 112, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 62.5%, 1)", "rgb(159, 112, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 75%)", "rgb(191, 159, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 75%, 0)", "rgba(191, 159, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 75%, 0.2)", "rgba(191, 159, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 75%, 1)", "rgb(191, 159, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 87.5%)", "rgb(223, 207, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 87.5%, 0)", "rgba(223, 207, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 87.5%, 0.2)", "rgba(223, 207, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 87.5%, 1)", "rgb(223, 207, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 12.5%)", "rgb(32, 12, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 12.5%, 0)", "rgba(32, 12, 52, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 12.5%, 0.2)", "rgba(32, 12, 52, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 12.5%, 1)", "rgb(32, 12, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 25%)", "rgb(64, 24, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 25%, 0)", "rgba(64, 24, 104, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 25%, 0.2)", "rgba(64, 24, 104, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 25%, 1)", "rgb(64, 24, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 37.5%)", "rgb(96, 36, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 37.5%, 0)", "rgba(96, 36, 155, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 37.5%, 0.2)", "rgba(96, 36, 155, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 37.5%, 1)", "rgb(96, 36, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 50%)", "rgb(128, 48, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 50%, 0)", "rgba(128, 48, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 50%, 0.2)", "rgba(128, 48, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 50%, 1)", "rgb(128, 48, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 62.5%)", "rgb(159, 100, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 62.5%, 0)", "rgba(159, 100, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 62.5%, 0.2)", "rgba(159, 100, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 62.5%, 1)", "rgb(159, 100, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 75%)", "rgb(191, 151, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 75%, 0)", "rgba(191, 151, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 75%, 0.2)", "rgba(191, 151, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 75%, 1)", "rgb(191, 151, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 87.5%)", "rgb(223, 203, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 87.5%, 0)", "rgba(223, 203, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 87.5%, 0.2)", "rgba(223, 203, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 87.5%, 1)", "rgb(223, 203, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 12.5%)", "rgb(32, 8, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 12.5%, 0)", "rgba(32, 8, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 12.5%, 0.2)", "rgba(32, 8, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 12.5%, 1)", "rgb(32, 8, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 25%)", "rgb(64, 16, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 25%, 0)", "rgba(64, 16, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 25%, 0.2)", "rgba(64, 16, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 25%, 1)", "rgb(64, 16, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 37.5%)", "rgb(96, 24, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 37.5%, 0)", "rgba(96, 24, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 37.5%, 0.2)", "rgba(96, 24, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 37.5%, 1)", "rgb(96, 24, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 50%)", "rgb(128, 32, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 50%, 0)", "rgba(128, 32, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 50%, 0.2)", "rgba(128, 32, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 50%, 1)", "rgb(128, 32, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 62.5%)", "rgb(159, 88, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 62.5%, 0)", "rgba(159, 88, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 62.5%, 0.2)", "rgba(159, 88, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 62.5%, 1)", "rgb(159, 88, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 75%)", "rgb(191, 143, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 75%, 0)", "rgba(191, 143, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 75%, 0.2)", "rgba(191, 143, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 75%, 1)", "rgb(191, 143, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 87.5%)", "rgb(223, 199, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 87.5%, 0)", "rgba(223, 199, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 87.5%, 0.2)", "rgba(223, 199, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 87.5%, 1)", "rgb(223, 199, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 12.5%)", "rgb(32, 4, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 12.5%, 0)", "rgba(32, 4, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 12.5%, 0.2)", "rgba(32, 4, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 12.5%, 1)", "rgb(32, 4, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 25%)", "rgb(64, 8, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 25%, 0)", "rgba(64, 8, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 25%, 0.2)", "rgba(64, 8, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 25%, 1)", "rgb(64, 8, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 37.5%)", "rgb(96, 12, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 37.5%, 0)", "rgba(96, 12, 179, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 37.5%, 0.2)", "rgba(96, 12, 179, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 37.5%, 1)", "rgb(96, 12, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 50%)", "rgb(128, 16, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 50%, 0)", "rgba(128, 16, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 50%, 0.2)", "rgba(128, 16, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 50%, 1)", "rgb(128, 16, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 62.5%)", "rgb(159, 76, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 62.5%, 0)", "rgba(159, 76, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 62.5%, 0.2)", "rgba(159, 76, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 62.5%, 1)", "rgb(159, 76, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 75%)", "rgb(191, 135, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 75%, 0)", "rgba(191, 135, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 75%, 0.2)", "rgba(191, 135, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 75%, 1)", "rgb(191, 135, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 87.5%)", "rgb(223, 195, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 87.5%, 0)", "rgba(223, 195, 251, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 87.5%, 0.2)", "rgba(223, 195, 251, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 87.5%, 1)", "rgb(223, 195, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 12.5%)", "rgb(32, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 12.5%, 0)", "rgba(32, 0, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 12.5%, 0.2)", "rgba(32, 0, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 12.5%, 1)", "rgb(32, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 25%)", "rgb(64, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 25%, 0)", "rgba(64, 0, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 25%, 0.2)", "rgba(64, 0, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 25%, 1)", "rgb(64, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 37.5%)", "rgb(96, 0, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 37.5%, 0)", "rgba(96, 0, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 37.5%, 0.2)", "rgba(96, 0, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 37.5%, 1)", "rgb(96, 0, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 50%)", "rgb(128, 0, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 50%, 0)", "rgba(128, 0, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 50%, 0.2)", "rgba(128, 0, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 50%, 1)", "rgb(128, 0, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 62.5%)", "rgb(159, 64, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 62.5%, 0)", "rgba(159, 64, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 62.5%, 0.2)", "rgba(159, 64, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 62.5%, 1)", "rgb(159, 64, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 75%)", "rgb(191, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 75%, 0)", "rgba(191, 128, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 75%, 0.2)", "rgba(191, 128, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 75%, 1)", "rgb(191, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 87.5%)", "rgb(223, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 87.5%, 0)", "rgba(223, 191, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 87.5%, 0.2)", "rgba(223, 191, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 87.5%, 1)", "rgb(223, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(270, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(270, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 12.5%)", "rgb(36, 28, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 12.5%, 0)", "rgba(36, 28, 36, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 12.5%, 0.2)", "rgba(36, 28, 36, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 12.5%, 1)", "rgb(36, 28, 36)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 25%)", "rgb(72, 56, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 25%, 0)", "rgba(72, 56, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 25%, 0.2)", "rgba(72, 56, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 25%, 1)", "rgb(72, 56, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 37.5%)", "rgb(108, 84, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 37.5%, 0)", "rgba(108, 84, 108, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 37.5%, 0.2)", "rgba(108, 84, 108, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 37.5%, 1)", "rgb(108, 84, 108)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 50%)", "rgb(143, 112, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 50%, 0)", "rgba(143, 112, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 50%, 0.2)", "rgba(143, 112, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 50%, 1)", "rgb(143, 112, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 62.5%)", "rgb(171, 147, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 62.5%, 0)", "rgba(171, 147, 171, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 62.5%, 0.2)", "rgba(171, 147, 171, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 62.5%, 1)", "rgb(171, 147, 171)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 75%)", "rgb(199, 183, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 75%, 0)", "rgba(199, 183, 199, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 75%, 0.2)", "rgba(199, 183, 199, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 75%, 1)", "rgb(199, 183, 199)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 87.5%)", "rgb(227, 219, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 87.5%, 0)", "rgba(227, 219, 227, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 87.5%, 0.2)", "rgba(227, 219, 227, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 87.5%, 1)", "rgb(227, 219, 227)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 12.5%)", "rgb(40, 24, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 12.5%, 0)", "rgba(40, 24, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 12.5%, 0.2)", "rgba(40, 24, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 12.5%, 1)", "rgb(40, 24, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 25%)", "rgb(80, 48, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 25%, 0)", "rgba(80, 48, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 25%, 0.2)", "rgba(80, 48, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 25%, 1)", "rgb(80, 48, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 37.5%)", "rgb(120, 72, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 37.5%, 0)", "rgba(120, 72, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 37.5%, 0.2)", "rgba(120, 72, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 37.5%, 1)", "rgb(120, 72, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 50%)", "rgb(159, 96, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 50%, 0)", "rgba(159, 96, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 50%, 0.2)", "rgba(159, 96, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 50%, 1)", "rgb(159, 96, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 62.5%)", "rgb(183, 135, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 62.5%, 0)", "rgba(183, 135, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 62.5%, 0.2)", "rgba(183, 135, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 62.5%, 1)", "rgb(183, 135, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 75%)", "rgb(207, 175, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 75%, 0)", "rgba(207, 175, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 75%, 0.2)", "rgba(207, 175, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 75%, 1)", "rgb(207, 175, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 87.5%)", "rgb(231, 215, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 87.5%, 0)", "rgba(231, 215, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 87.5%, 0.2)", "rgba(231, 215, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 87.5%, 1)", "rgb(231, 215, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 12.5%)", "rgb(44, 20, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 12.5%, 0)", "rgba(44, 20, 44, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 12.5%, 0.2)", "rgba(44, 20, 44, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 12.5%, 1)", "rgb(44, 20, 44)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 25%)", "rgb(88, 40, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 25%, 0)", "rgba(88, 40, 88, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 25%, 0.2)", "rgba(88, 40, 88, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 25%, 1)", "rgb(88, 40, 88)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 37.5%)", "rgb(131, 60, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 37.5%, 0)", "rgba(131, 60, 131, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 37.5%, 0.2)", "rgba(131, 60, 131, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 37.5%, 1)", "rgb(131, 60, 131)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 50%)", "rgb(175, 80, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 50%, 0)", "rgba(175, 80, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 50%, 0.2)", "rgba(175, 80, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 50%, 1)", "rgb(175, 80, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 62.5%)", "rgb(195, 124, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 62.5%, 0)", "rgba(195, 124, 195, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 62.5%, 0.2)", "rgba(195, 124, 195, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 62.5%, 1)", "rgb(195, 124, 195)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 75%)", "rgb(215, 167, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 75%, 0)", "rgba(215, 167, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 75%, 0.2)", "rgba(215, 167, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 75%, 1)", "rgb(215, 167, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 87.5%)", "rgb(235, 211, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 87.5%, 0)", "rgba(235, 211, 235, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 87.5%, 0.2)", "rgba(235, 211, 235, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 87.5%, 1)", "rgb(235, 211, 235)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 12.5%)", "rgb(48, 16, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 12.5%, 0)", "rgba(48, 16, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 12.5%, 0.2)", "rgba(48, 16, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 12.5%, 1)", "rgb(48, 16, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 25%)", "rgb(96, 32, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 25%, 0)", "rgba(96, 32, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 25%, 0.2)", "rgba(96, 32, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 25%, 1)", "rgb(96, 32, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 37.5%)", "rgb(143, 48, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 37.5%, 0)", "rgba(143, 48, 143, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 37.5%, 0.2)", "rgba(143, 48, 143, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 37.5%, 1)", "rgb(143, 48, 143)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 50%)", "rgb(191, 64, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 50%, 0)", "rgba(191, 64, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 50%, 0.2)", "rgba(191, 64, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 50%, 1)", "rgb(191, 64, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 62.5%)", "rgb(207, 112, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 62.5%, 0)", "rgba(207, 112, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 62.5%, 0.2)", "rgba(207, 112, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 62.5%, 1)", "rgb(207, 112, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 75%)", "rgb(223, 159, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 75%, 0)", "rgba(223, 159, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 75%, 0.2)", "rgba(223, 159, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 75%, 1)", "rgb(223, 159, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 87.5%)", "rgb(239, 207, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 87.5%, 0)", "rgba(239, 207, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 87.5%, 0.2)", "rgba(239, 207, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 87.5%, 1)", "rgb(239, 207, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 12.5%)", "rgb(52, 12, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 12.5%, 0)", "rgba(52, 12, 52, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 12.5%, 0.2)", "rgba(52, 12, 52, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 12.5%, 1)", "rgb(52, 12, 52)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 25%)", "rgb(104, 24, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 25%, 0)", "rgba(104, 24, 104, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 25%, 0.2)", "rgba(104, 24, 104, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 25%, 1)", "rgb(104, 24, 104)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 37.5%)", "rgb(155, 36, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 37.5%, 0)", "rgba(155, 36, 155, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 37.5%, 0.2)", "rgba(155, 36, 155, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 37.5%, 1)", "rgb(155, 36, 155)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 50%)", "rgb(207, 48, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 50%, 0)", "rgba(207, 48, 207, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 50%, 0.2)", "rgba(207, 48, 207, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 50%, 1)", "rgb(207, 48, 207)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 62.5%)", "rgb(219, 100, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 62.5%, 0)", "rgba(219, 100, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 62.5%, 0.2)", "rgba(219, 100, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 62.5%, 1)", "rgb(219, 100, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 75%)", "rgb(231, 151, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 75%, 0)", "rgba(231, 151, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 75%, 0.2)", "rgba(231, 151, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 75%, 1)", "rgb(231, 151, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 87.5%)", "rgb(243, 203, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 87.5%, 0)", "rgba(243, 203, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 87.5%, 0.2)", "rgba(243, 203, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 87.5%, 1)", "rgb(243, 203, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 12.5%)", "rgb(56, 8, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 12.5%, 0)", "rgba(56, 8, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 12.5%, 0.2)", "rgba(56, 8, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 12.5%, 1)", "rgb(56, 8, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 25%)", "rgb(112, 16, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 25%, 0)", "rgba(112, 16, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 25%, 0.2)", "rgba(112, 16, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 25%, 1)", "rgb(112, 16, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 37.5%)", "rgb(167, 24, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 37.5%, 0)", "rgba(167, 24, 167, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 37.5%, 0.2)", "rgba(167, 24, 167, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 37.5%, 1)", "rgb(167, 24, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 50%)", "rgb(223, 32, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 50%, 0)", "rgba(223, 32, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 50%, 0.2)", "rgba(223, 32, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 50%, 1)", "rgb(223, 32, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 62.5%)", "rgb(231, 88, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 62.5%, 0)", "rgba(231, 88, 231, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 62.5%, 0.2)", "rgba(231, 88, 231, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 62.5%, 1)", "rgb(231, 88, 231)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 75%)", "rgb(239, 143, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 75%, 0)", "rgba(239, 143, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 75%, 0.2)", "rgba(239, 143, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 75%, 1)", "rgb(239, 143, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 87.5%)", "rgb(247, 199, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 87.5%, 0)", "rgba(247, 199, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 87.5%, 0.2)", "rgba(247, 199, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 87.5%, 1)", "rgb(247, 199, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 12.5%)", "rgb(60, 4, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 12.5%, 0)", "rgba(60, 4, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 12.5%, 0.2)", "rgba(60, 4, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 12.5%, 1)", "rgb(60, 4, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 25%)", "rgb(120, 8, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 25%, 0)", "rgba(120, 8, 120, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 25%, 0.2)", "rgba(120, 8, 120, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 25%, 1)", "rgb(120, 8, 120)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 37.5%)", "rgb(179, 12, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 37.5%, 0)", "rgba(179, 12, 179, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 37.5%, 0.2)", "rgba(179, 12, 179, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 37.5%, 1)", "rgb(179, 12, 179)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 50%)", "rgb(239, 16, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 50%, 0)", "rgba(239, 16, 239, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 50%, 0.2)", "rgba(239, 16, 239, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 50%, 1)", "rgb(239, 16, 239)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 62.5%)", "rgb(243, 76, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 62.5%, 0)", "rgba(243, 76, 243, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 62.5%, 0.2)", "rgba(243, 76, 243, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 62.5%, 1)", "rgb(243, 76, 243)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 75%)", "rgb(247, 135, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 75%, 0)", "rgba(247, 135, 247, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 75%, 0.2)", "rgba(247, 135, 247, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 75%, 1)", "rgb(247, 135, 247)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 87.5%)", "rgb(251, 195, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 87.5%, 0)", "rgba(251, 195, 251, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 87.5%, 0.2)", "rgba(251, 195, 251, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 87.5%, 1)", "rgb(251, 195, 251)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 12.5%)", "rgb(64, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 12.5%, 0)", "rgba(64, 0, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 12.5%, 0.2)", "rgba(64, 0, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 12.5%, 1)", "rgb(64, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 25%)", "rgb(128, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 25%, 0)", "rgba(128, 0, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 25%, 0.2)", "rgba(128, 0, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 25%, 1)", "rgb(128, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 37.5%)", "rgb(191, 0, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 37.5%, 0)", "rgba(191, 0, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 37.5%, 0.2)", "rgba(191, 0, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 37.5%, 1)", "rgb(191, 0, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 50%)", "rgb(255, 0, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 50%, 0)", "rgba(255, 0, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 50%, 0.2)", "rgba(255, 0, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 50%, 1)", "rgb(255, 0, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 62.5%)", "rgb(255, 64, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 62.5%, 0)", "rgba(255, 64, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 62.5%, 0.2)", "rgba(255, 64, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 62.5%, 1)", "rgb(255, 64, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 75%)", "rgb(255, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 75%, 0)", "rgba(255, 128, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 75%, 0.2)", "rgba(255, 128, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 75%, 1)", "rgb(255, 128, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 87.5%)", "rgb(255, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 87.5%, 0)", "rgba(255, 191, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 87.5%, 0.2)", "rgba(255, 191, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 87.5%, 1)", "rgb(255, 191, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(300, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(300, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 12.5%)", "rgb(36, 28, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 12.5%, 0)", "rgba(36, 28, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 12.5%, 0.2)", "rgba(36, 28, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 12.5%, 1)", "rgb(36, 28, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 25%)", "rgb(72, 56, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 25%, 0)", "rgba(72, 56, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 25%, 0.2)", "rgba(72, 56, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 25%, 1)", "rgb(72, 56, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 37.5%)", "rgb(108, 84, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 37.5%, 0)", "rgba(108, 84, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 37.5%, 0.2)", "rgba(108, 84, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 37.5%, 1)", "rgb(108, 84, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 50%)", "rgb(143, 112, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 50%, 0)", "rgba(143, 112, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 50%, 0.2)", "rgba(143, 112, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 50%, 1)", "rgb(143, 112, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 62.5%)", "rgb(171, 147, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 62.5%, 0)", "rgba(171, 147, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 62.5%, 0.2)", "rgba(171, 147, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 62.5%, 1)", "rgb(171, 147, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 75%)", "rgb(199, 183, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 75%, 0)", "rgba(199, 183, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 75%, 0.2)", "rgba(199, 183, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 75%, 1)", "rgb(199, 183, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 87.5%)", "rgb(227, 219, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 87.5%, 0)", "rgba(227, 219, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 87.5%, 0.2)", "rgba(227, 219, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 87.5%, 1)", "rgb(227, 219, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 12.5%)", "rgb(40, 24, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 12.5%, 0)", "rgba(40, 24, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 12.5%, 0.2)", "rgba(40, 24, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 12.5%, 1)", "rgb(40, 24, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 25%)", "rgb(80, 48, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 25%, 0)", "rgba(80, 48, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 25%, 0.2)", "rgba(80, 48, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 25%, 1)", "rgb(80, 48, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 37.5%)", "rgb(120, 72, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 37.5%, 0)", "rgba(120, 72, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 37.5%, 0.2)", "rgba(120, 72, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 37.5%, 1)", "rgb(120, 72, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 50%)", "rgb(159, 96, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 50%, 0)", "rgba(159, 96, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 50%, 0.2)", "rgba(159, 96, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 50%, 1)", "rgb(159, 96, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 62.5%)", "rgb(183, 135, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 62.5%, 0)", "rgba(183, 135, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 62.5%, 0.2)", "rgba(183, 135, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 62.5%, 1)", "rgb(183, 135, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 75%)", "rgb(207, 175, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 75%, 0)", "rgba(207, 175, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 75%, 0.2)", "rgba(207, 175, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 75%, 1)", "rgb(207, 175, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 87.5%)", "rgb(231, 215, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 87.5%, 0)", "rgba(231, 215, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 87.5%, 0.2)", "rgba(231, 215, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 87.5%, 1)", "rgb(231, 215, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 12.5%)", "rgb(44, 20, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 12.5%, 0)", "rgba(44, 20, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 12.5%, 0.2)", "rgba(44, 20, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 12.5%, 1)", "rgb(44, 20, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 25%)", "rgb(88, 40, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 25%, 0)", "rgba(88, 40, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 25%, 0.2)", "rgba(88, 40, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 25%, 1)", "rgb(88, 40, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 37.5%)", "rgb(131, 60, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 37.5%, 0)", "rgba(131, 60, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 37.5%, 0.2)", "rgba(131, 60, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 37.5%, 1)", "rgb(131, 60, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 50%)", "rgb(175, 80, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 50%, 0)", "rgba(175, 80, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 50%, 0.2)", "rgba(175, 80, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 50%, 1)", "rgb(175, 80, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 62.5%)", "rgb(195, 124, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 62.5%, 0)", "rgba(195, 124, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 62.5%, 0.2)", "rgba(195, 124, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 62.5%, 1)", "rgb(195, 124, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 75%)", "rgb(215, 167, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 75%, 0)", "rgba(215, 167, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 75%, 0.2)", "rgba(215, 167, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 75%, 1)", "rgb(215, 167, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 87.5%)", "rgb(235, 211, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 87.5%, 0)", "rgba(235, 211, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 87.5%, 0.2)", "rgba(235, 211, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 87.5%, 1)", "rgb(235, 211, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 37.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 37.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 12.5%)", "rgb(48, 16, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 12.5%, 0)", "rgba(48, 16, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 12.5%, 0.2)", "rgba(48, 16, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 12.5%, 1)", "rgb(48, 16, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 25%)", "rgb(96, 32, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 25%, 0)", "rgba(96, 32, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 25%, 0.2)", "rgba(96, 32, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 25%, 1)", "rgb(96, 32, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 37.5%)", "rgb(143, 48, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 37.5%, 0)", "rgba(143, 48, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 37.5%, 0.2)", "rgba(143, 48, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 37.5%, 1)", "rgb(143, 48, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 50%)", "rgb(191, 64, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 50%, 0)", "rgba(191, 64, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 50%, 0.2)", "rgba(191, 64, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 50%, 1)", "rgb(191, 64, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 62.5%)", "rgb(207, 112, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 62.5%, 0)", "rgba(207, 112, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 62.5%, 0.2)", "rgba(207, 112, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 62.5%, 1)", "rgb(207, 112, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 75%)", "rgb(223, 159, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 75%, 0)", "rgba(223, 159, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 75%, 0.2)", "rgba(223, 159, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 75%, 1)", "rgb(223, 159, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 87.5%)", "rgb(239, 207, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 87.5%, 0)", "rgba(239, 207, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 87.5%, 0.2)", "rgba(239, 207, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 87.5%, 1)", "rgb(239, 207, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 50%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 50%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 12.5%)", "rgb(52, 12, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 12.5%, 0)", "rgba(52, 12, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 12.5%, 0.2)", "rgba(52, 12, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 12.5%, 1)", "rgb(52, 12, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 25%)", "rgb(104, 24, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 25%, 0)", "rgba(104, 24, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 25%, 0.2)", "rgba(104, 24, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 25%, 1)", "rgb(104, 24, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 37.5%)", "rgb(155, 36, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 37.5%, 0)", "rgba(155, 36, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 37.5%, 0.2)", "rgba(155, 36, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 37.5%, 1)", "rgb(155, 36, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 50%)", "rgb(207, 48, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 50%, 0)", "rgba(207, 48, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 50%, 0.2)", "rgba(207, 48, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 50%, 1)", "rgb(207, 48, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 62.5%)", "rgb(219, 100, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 62.5%, 0)", "rgba(219, 100, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 62.5%, 0.2)", "rgba(219, 100, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 62.5%, 1)", "rgb(219, 100, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 75%)", "rgb(231, 151, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 75%, 0)", "rgba(231, 151, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 75%, 0.2)", "rgba(231, 151, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 75%, 1)", "rgb(231, 151, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 87.5%)", "rgb(243, 203, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 87.5%, 0)", "rgba(243, 203, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 87.5%, 0.2)", "rgba(243, 203, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 87.5%, 1)", "rgb(243, 203, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 62.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 62.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 12.5%)", "rgb(56, 8, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 12.5%, 0)", "rgba(56, 8, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 12.5%, 0.2)", "rgba(56, 8, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 12.5%, 1)", "rgb(56, 8, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 25%)", "rgb(112, 16, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 25%, 0)", "rgba(112, 16, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 25%, 0.2)", "rgba(112, 16, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 25%, 1)", "rgb(112, 16, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 37.5%)", "rgb(167, 24, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 37.5%, 0)", "rgba(167, 24, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 37.5%, 0.2)", "rgba(167, 24, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 37.5%, 1)", "rgb(167, 24, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 50%)", "rgb(223, 32, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 50%, 0)", "rgba(223, 32, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 50%, 0.2)", "rgba(223, 32, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 50%, 1)", "rgb(223, 32, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 62.5%)", "rgb(231, 88, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 62.5%, 0)", "rgba(231, 88, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 62.5%, 0.2)", "rgba(231, 88, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 62.5%, 1)", "rgb(231, 88, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 75%)", "rgb(239, 143, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 75%, 0)", "rgba(239, 143, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 75%, 0.2)", "rgba(239, 143, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 75%, 1)", "rgb(239, 143, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 87.5%)", "rgb(247, 199, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 87.5%, 0)", "rgba(247, 199, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 87.5%, 0.2)", "rgba(247, 199, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 87.5%, 1)", "rgb(247, 199, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 75%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 75%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 12.5%)", "rgb(60, 4, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 12.5%, 0)", "rgba(60, 4, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 12.5%, 0.2)", "rgba(60, 4, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 12.5%, 1)", "rgb(60, 4, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 25%)", "rgb(120, 8, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 25%, 0)", "rgba(120, 8, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 25%, 0.2)", "rgba(120, 8, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 25%, 1)", "rgb(120, 8, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 37.5%)", "rgb(179, 12, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 37.5%, 0)", "rgba(179, 12, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 37.5%, 0.2)", "rgba(179, 12, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 37.5%, 1)", "rgb(179, 12, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 50%)", "rgb(239, 16, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 50%, 0)", "rgba(239, 16, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 50%, 0.2)", "rgba(239, 16, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 50%, 1)", "rgb(239, 16, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 62.5%)", "rgb(243, 76, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 62.5%, 0)", "rgba(243, 76, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 62.5%, 0.2)", "rgba(243, 76, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 62.5%, 1)", "rgb(243, 76, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 75%)", "rgb(247, 135, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 75%, 0)", "rgba(247, 135, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 75%, 0.2)", "rgba(247, 135, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 75%, 1)", "rgb(247, 135, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 87.5%)", "rgb(251, 195, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 87.5%, 0)", "rgba(251, 195, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 87.5%, 0.2)", "rgba(251, 195, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 87.5%, 1)", "rgb(251, 195, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 87.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 87.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 12.5%)", "rgb(64, 0, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 12.5%, 0)", "rgba(64, 0, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 12.5%, 0.2)", "rgba(64, 0, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 12.5%, 1)", "rgb(64, 0, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 25%)", "rgb(128, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 25%, 0)", "rgba(128, 0, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 25%, 0.2)", "rgba(128, 0, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 25%, 1)", "rgb(128, 0, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 37.5%)", "rgb(191, 0, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 37.5%, 0)", "rgba(191, 0, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 37.5%, 0.2)", "rgba(191, 0, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 37.5%, 1)", "rgb(191, 0, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 50%)", "rgb(255, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 50%, 0)", "rgba(255, 0, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 50%, 0.2)", "rgba(255, 0, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 50%, 1)", "rgb(255, 0, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 62.5%)", "rgb(255, 64, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 62.5%, 0)", "rgba(255, 64, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 62.5%, 0.2)", "rgba(255, 64, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 62.5%, 1)", "rgb(255, 64, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 75%)", "rgb(255, 128, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 75%, 0)", "rgba(255, 128, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 75%, 0.2)", "rgba(255, 128, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 75%, 1)", "rgb(255, 128, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 87.5%)", "rgb(255, 191, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 87.5%, 0)", "rgba(255, 191, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 87.5%, 0.2)", "rgba(255, 191, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 87.5%, 1)", "rgb(255, 191, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(330, 100%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(330, 100%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 12.5%)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 12.5%, 0)", "rgba(32, 32, 32, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 12.5%, 0.2)", "rgba(32, 32, 32, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 12.5%, 1)", "rgb(32, 32, 32)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 25%)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 25%, 0)", "rgba(64, 64, 64, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 25%, 0.2)", "rgba(64, 64, 64, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 25%, 1)", "rgb(64, 64, 64)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 37.5%)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 37.5%, 0)", "rgba(96, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 37.5%, 0.2)", "rgba(96, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 37.5%, 1)", "rgb(96, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 50%)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 50%, 0)", "rgba(128, 128, 128, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 50%, 0.2)", "rgba(128, 128, 128, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 50%, 1)", "rgb(128, 128, 128)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 62.5%)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 62.5%, 0)", "rgba(159, 159, 159, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 62.5%, 0.2)", "rgba(159, 159, 159, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 62.5%, 1)", "rgb(159, 159, 159)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 75%)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 75%, 0)", "rgba(191, 191, 191, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 75%, 0.2)", "rgba(191, 191, 191, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 75%, 1)", "rgb(191, 191, 191)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 87.5%)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 87.5%, 0)", "rgba(223, 223, 223, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 87.5%, 0.2)", "rgba(223, 223, 223, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 87.5%, 1)", "rgb(223, 223, 223)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 0%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 0%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 12.5%)", "rgb(36, 28, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 12.5%, 0)", "rgba(36, 28, 28, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 12.5%, 0.2)", "rgba(36, 28, 28, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 12.5%, 1)", "rgb(36, 28, 28)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 25%)", "rgb(72, 56, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 25%, 0)", "rgba(72, 56, 56, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 25%, 0.2)", "rgba(72, 56, 56, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 25%, 1)", "rgb(72, 56, 56)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 37.5%)", "rgb(108, 84, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 37.5%, 0)", "rgba(108, 84, 84, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 37.5%, 0.2)", "rgba(108, 84, 84, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 37.5%, 1)", "rgb(108, 84, 84)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 50%)", "rgb(143, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 50%, 0)", "rgba(143, 112, 112, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 50%, 0.2)", "rgba(143, 112, 112, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 50%, 1)", "rgb(143, 112, 112)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 62.5%)", "rgb(171, 147, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 62.5%, 0)", "rgba(171, 147, 147, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 62.5%, 0.2)", "rgba(171, 147, 147, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 62.5%, 1)", "rgb(171, 147, 147)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 75%)", "rgb(199, 183, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 75%, 0)", "rgba(199, 183, 183, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 75%, 0.2)", "rgba(199, 183, 183, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 75%, 1)", "rgb(199, 183, 183)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 87.5%)", "rgb(227, 219, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 87.5%, 0)", "rgba(227, 219, 219, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 87.5%, 0.2)", "rgba(227, 219, 219, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 87.5%, 1)", "rgb(227, 219, 219)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 12.5%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 12.5%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 12.5%)", "rgb(40, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 12.5%, 0)", "rgba(40, 24, 24, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 12.5%, 0.2)", "rgba(40, 24, 24, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 12.5%, 1)", "rgb(40, 24, 24)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 25%)", "rgb(80, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 25%, 0)", "rgba(80, 48, 48, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 25%, 0.2)", "rgba(80, 48, 48, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 25%, 1)", "rgb(80, 48, 48)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 37.5%)", "rgb(120, 72, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 37.5%, 0)", "rgba(120, 72, 72, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 37.5%, 0.2)", "rgba(120, 72, 72, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 37.5%, 1)", "rgb(120, 72, 72)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 50%)", "rgb(159, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 50%, 0)", "rgba(159, 96, 96, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 50%, 0.2)", "rgba(159, 96, 96, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 50%, 1)", "rgb(159, 96, 96)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 62.5%)", "rgb(183, 135, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 62.5%, 0)", "rgba(183, 135, 135, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 62.5%, 0.2)", "rgba(183, 135, 135, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 62.5%, 1)", "rgb(183, 135, 135)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 75%)", "rgb(207, 175, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 75%, 0)", "rgba(207, 175, 175, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 75%, 0.2)", "rgba(207, 175, 175, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 75%, 1)", "rgb(207, 175, 175)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 87.5%)", "rgb(231, 215, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 87.5%, 0)", "rgba(231, 215, 215, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 87.5%, 0.2)", "rgba(231, 215, 215, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 87.5%, 1)", "rgb(231, 215, 215)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 25%, 100%)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 100%, 0)", "rgba(255, 255, 255, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 100%, 0.2)", "rgba(255, 255, 255, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 25%, 100%, 1)", "rgb(255, 255, 255)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 0%)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 0%, 0)", "rgba(0, 0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 0%, 0.2)", "rgba(0, 0, 0, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 0%, 1)", "rgb(0, 0, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 12.5%)", "rgb(44, 20, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 12.5%, 0)", "rgba(44, 20, 20, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 12.5%, 0.2)", "rgba(44, 20, 20, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 12.5%, 1)", "rgb(44, 20, 20)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 25%)", "rgb(88, 40, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 25%, 0)", "rgba(88, 40, 40, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 25%, 0.2)", "rgba(88, 40, 40, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 25%, 1)", "rgb(88, 40, 40)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 37.5%)", "rgb(131, 60, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 37.5%, 0)", "rgba(131, 60, 60, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 37.5%, 0.2)", "rgba(131, 60, 60, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 37.5%, 1)", "rgb(131, 60, 60)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 50%)", "rgb(175, 80, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 50%, 0)", "rgba(175, 80, 80, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 50%, 0.2)", "rgba(175, 80, 80, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 50%, 1)", "rgb(175, 80, 80)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 62.5%)", "rgb(195, 124, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 62.5%, 0)", "rgba(195, 124, 124, 0)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 62.5%, 0.2)", "rgba(195, 124, 124, 0.2)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 62.5%, 1)", "rgb(195, 124, 124)", "HSL/HSLA value should parse and round correctly"], + ["hsl(360, 37.5%, 75%)", "rgb(215, 167, 167)", "HSL/HSLA value should parse and round correctly"], + ["hsla(360, 37.5%, 75%, 0)", "rgba(215, 167, 167, 0)", "HSL/HSLA value should parse and round correctly"], +]; + +for (const test of tests) { + test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-hwb.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-hwb.html new file mode 100644 index 0000000000..d51351bb6d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-hwb.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using HWB notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +tests = [ + ["hwb(120 30% 50%)", "rgb(77, 128, 77)"], + ["hwb(120 30% 50% / 0.5)", "rgba(77, 128, 77, 0.5)"], + ["hwb(120 30% 50% / 50%)", "rgba(77, 128, 77, 0.5)"], + ["hwb(none none none)", "rgb(255, 0, 0)"], + ["hwb(0 0% 0%)", "rgb(255, 0, 0)"], + ["hwb(none none none / none)", "rgba(255, 0, 0, 0)"], + ["hwb(0 0% 0% / 0)", "rgba(255, 0, 0, 0)"], + ["hwb(120 none none)", "rgb(0, 255, 0)"], + ["hwb(120 0% 0%)", "rgb(0, 255, 0)"], + ["hwb(120 80% none)", "rgb(204, 255, 204)"], + ["hwb(120 80% 0%)", "rgb(204, 255, 204)"], + ["hwb(120 none 50%)", "rgb(0, 128, 0)"], + ["hwb(120 0% 50%)", "rgb(0, 128, 0)"], + ["hwb(120 30% 50% / none)", "rgba(77, 128, 77, 0)"], + ["hwb(120 30% 50% / 0)", "rgba(77, 128, 77, 0)"], + ["hwb(120 30% 50% / 0%)", "rgba(77, 128, 77, 0)"], + ["hwb(none 100% 50% / none)", "rgba(170, 170, 170, 0)"], + ["hwb(0 100% 50% / 0)", "rgba(170, 170, 170, 0)"], + + ["hwb(0 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(30 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(60 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(90 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(120 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(180 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(210 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(240 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(270 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(300 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(330 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(360 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(90deg 50% 50%)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], + ["hwb(90 0% 50%)", "rgb(64, 128, 0)", "HWB value should parse and round correctly"], + ["hwb(90 12.5% 50%)", "rgb(80, 128, 32)", "HWB value should parse and round correctly"], + ["hwb(90 25% 50%)", "rgb(96, 128, 64)", "HWB value should parse and round correctly"], + ["hwb(90 37.5% 50%)", "rgb(112, 128, 96)", "HWB value should parse and round correctly"], + ["hwb(90 62.5% 50%)", "rgb(142, 142, 142)", "HWB value should parse and round correctly"], + ["hwb(90 75% 50%)", "rgb(153, 153, 153)", "HWB value should parse and round correctly"], + ["hwb(90 87.5% 50%)", "rgb(162, 162, 162)", "HWB value should parse and round correctly"], + ["hwb(90 100% 50%)", "rgb(170, 170, 170)", "HWB value should parse and round correctly"], + ["hwb(90 50% 0%)", "rgb(191, 255, 128)", "HWB value should parse and round correctly"], + ["hwb(90 50% 12.5%)", "rgb(175, 223, 128)", "HWB value should parse and round correctly"], + ["hwb(90 50% 25%)", "rgb(159, 191, 128)", "HWB value should parse and round correctly"], + ["hwb(90 50% 37.5%)", "rgb(143, 159, 128)", "HWB value should parse and round correctly"], + ["hwb(90 50% 62.5%)", "rgb(113, 113, 113)", "HWB value should parse and round correctly"], + ["hwb(90 50% 75%)", "rgb(102, 102, 102)", "HWB value should parse and round correctly"], + ["hwb(90 50% 87.5%)", "rgb(93, 93, 93)", "HWB value should parse and round correctly"], + ["hwb(90 50% 100%)", "rgb(85, 85, 85)", "HWB value should parse and round correctly"], + ["hwb(90 50% 50% / 0)", "rgba(128, 128, 128, 0)", "HWB value should parse and round correctly"], + ["hwb(90 50% 50% / 0.2)", "rgba(128, 128, 128, 0.2)", "HWB value should parse and round correctly"], + ["hwb(90 50% 50% / 1)", "rgb(128, 128, 128)", "HWB value should parse and round correctly"], +]; + +for (const test of tests) { + test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-lab.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-lab.html new file mode 100644 index 0000000000..c1c6b662e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-lab.html @@ -0,0 +1,152 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using Lab notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#lab-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-lab-lch-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-oklab-oklch-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-lab-lch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-oklab-oklch"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> + +// lab() +test_computed_value("color", "lab(0 0 0)", "lab(0 0 0)"); +test_computed_value("color", "lab(0 0 0 / 1)", "lab(0 0 0)"); +test_computed_value("color", "lab(0 0 0 / 0.5)", "lab(0 0 0 / 0.5)"); +test_computed_value("color", "lab(20 0 10/0.5)", "lab(20 0 10 / 0.5)"); +test_computed_value("color", "lab(20 0 10/50%)", "lab(20 0 10 / 0.5)"); +test_computed_value("color", "lab(400 0 10/50%)", "lab(100 0 10 / 0.5)"); +test_computed_value("color", "lab(50 -160 160)", "lab(50 -160 160)"); +test_computed_value("color", "lab(50 -200 200)", "lab(50 -200 200)"); +test_computed_value("color", "lab(0 0 0 / -10%)", "lab(0 0 0 / 0)"); +test_computed_value("color", "lab(0 0 0 / 110%)", "lab(0 0 0)"); +test_computed_value("color", "lab(0 0 0 / 300%)", "lab(0 0 0)"); +test_computed_value("color", "lab(-40 0 0)", "lab(0 0 0)"); +test_computed_value("color", "lab(50 -20 0)", "lab(50 -20 0)"); +test_computed_value("color", "lab(50 0 -20)", "lab(50 0 -20)"); +test_computed_value("color", "lab(calc(50 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))", "lab(100 -0.5 1.5 / 0.5)"); +test_computed_value("color", "lab(calc(-50 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))", "lab(0 1.5 -1.5 / 0)"); + +test_computed_value("color", "lab(none none none / none)", "lab(none none none / none)"); +test_computed_value("color", "lab(none none none)", "lab(none none none)"); +test_computed_value("color", "lab(20 none none / none)", "lab(20 none none / none)"); +test_computed_value("color", "lab(none none none / 0.5)", "lab(none none none / 0.5)"); +test_computed_value("color", "lab(0 0 0 / none)", "lab(0 0 0 / none)"); + +test_computed_value("color", "lab(calc(NaN) 0 0)", "lab(0 0 0)"); +test_computed_value("color", "lab(calc(0 / 0) 0 0)", "lab(0 0 0)"); + +// oklab() +test_computed_value("color", "oklab(0 0 0)", "oklab(0 0 0)"); +test_computed_value("color", "oklab(0 0 0 / 1)", "oklab(0 0 0)"); +test_computed_value("color", "oklab(0 0 0 / 0.5)", "oklab(0 0 0 / 0.5)"); +test_computed_value("color", "oklab(0.2 0 0.1/0.5)", "oklab(0.2 0 0.1 / 0.5)"); +test_computed_value("color", "oklab(0.2 0 0.1/50%)", "oklab(0.2 0 0.1 / 0.5)"); +test_computed_value("color", "oklab(4 0 0.1/50%)", "oklab(1 0 0.1 / 0.5)"); +test_computed_value("color", "oklab(0.5 -1.6 1.6)", "oklab(0.5 -1.6 1.6)"); +test_computed_value("color", "oklab(0.5 -2 2)", "oklab(0.5 -2 2)"); +test_computed_value("color", "oklab(0 0 0 / -10%)", "oklab(0 0 0 / 0)"); +test_computed_value("color", "oklab(0 0 0 / 110%)", "oklab(0 0 0)"); +test_computed_value("color", "oklab(0 0 0 / 300%)", "oklab(0 0 0)"); +test_computed_value("color", "oklab(-0.4 0 0)", "oklab(0 0 0)"); +test_computed_value("color", "oklab(0.5 -0.2 0)", "oklab(0.5 -0.2 0)"); +test_computed_value("color", "oklab(0.5 0 -0.2)", "oklab(0.5 0 -0.2)"); +test_computed_value("color", "oklab(calc(0.5 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))", "oklab(1 -0.5 1.5 / 0.5)"); +test_computed_value("color", "oklab(calc(-0.5 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))", "oklab(0 1.5 -1.5 / 0)"); + +test_computed_value("color", "oklab(none none none / none)", "oklab(none none none / none)"); +test_computed_value("color", "oklab(none none none)", "oklab(none none none)"); +test_computed_value("color", "oklab(0.2 none none / none)", "oklab(0.2 none none / none)"); +test_computed_value("color", "oklab(none none none / 0.5)", "oklab(none none none / 0.5)"); +test_computed_value("color", "oklab(0 0 0 / none)", "oklab(0 0 0 / none)"); + +// These tests validate the ranges of lab() vs. oklab() components +test_computed_value("color", "lab(20% -50% 90%/0.5)", "lab(20 -62.5 112.5 / 0.5)"); +test_computed_value("color", "oklab(20% 70% -80%/0.5)", "oklab(0.2 0.28 -0.32 / 0.5)"); + +test_computed_value("color", "oklab(calc(NaN) 0 0)", "oklab(0 0 0)"); +test_computed_value("color", "oklab(calc(0 / 0) 0 0)", "oklab(0 0 0)"); + +// lch() +test_computed_value("color", "lch(0 0 0deg)", "lch(0 0 0)"); +test_computed_value("color", "lch(0 0 0deg / 1)", "lch(0 0 0)"); +test_computed_value("color", "lch(0 0 0deg / 0.5)", "lch(0 0 0 / 0.5)"); +test_computed_value("color", "lch(100 230 0deg / 0.5)", "lch(100 230 0 / 0.5)"); +test_computed_value("color", "lch(20 50 20deg/0.5)", "lch(20 50 20 / 0.5)"); +test_computed_value("color", "lch(20 50 20deg/50%)", "lch(20 50 20 / 0.5)"); +test_computed_value("color", "lch(10 20 20deg / -10%)", "lch(10 20 20 / 0)"); +test_computed_value("color", "lch(10 20 20deg / 110%)", "lch(10 20 20)"); +test_computed_value("color", "lch(10 20 1.28rad)", "lch(10 20 73.3386)"); +test_computed_value("color", "lch(10 20 380deg)", "lch(10 20 20)"); +test_computed_value("color", "lch(10 20 -340deg)", "lch(10 20 20)"); +test_computed_value("color", "lch(10 20 740deg)", "lch(10 20 20)"); +test_computed_value("color", "lch(10 20 -700deg)", "lch(10 20 20)"); +test_computed_value("color", "lch(-40 0 0)", "lch(0 0 0)"); +test_computed_value("color", "lch(20 -20 0)", "lch(20 0 0)"); +test_computed_value("color", "lch(0 0 0 / 0.5)", "lch(0 0 0 / 0.5)"); +test_computed_value("color", "lch(10 20 20 / 110%)", "lch(10 20 20)"); +test_computed_value("color", "lch(10 20 -700)", "lch(10 20 20)"); +test_computed_value("color", "lch(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))", "lch(100 0 40 / 0.5)"); +test_computed_value("color", "lch(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))", "lch(0 1.5 320 / 0)"); + +test_computed_value("color", "lch(none none none / none)", "lch(none none none / none)"); +test_computed_value("color", "lch(none none none)", "lch(none none none)"); +test_computed_value("color", "lch(20 none none / none)", "lch(20 none none / none)"); +test_computed_value("color", "lch(none none none / 0.5)", "lch(none none none / 0.5)"); +test_computed_value("color", "lch(0 0 0 / none)", "lch(0 0 0 / none)"); + +test_computed_value("color", "lch(calc(NaN) 0 0)", "lch(0 0 0)"); +test_computed_value("color", "lch(calc(0 / 0) 0 0)", "lch(0 0 0)"); + +// oklch() +test_computed_value("color", "oklch(0 0 0deg)", "oklch(0 0 0)"); +test_computed_value("color", "oklch(0 0 0deg / 1)", "oklch(0 0 0)"); +test_computed_value("color", "oklch(0 0 0deg / 0.5)", "oklch(0 0 0 / 0.5)"); +test_computed_value("color", "oklch(1 2.3 0deg / 0.5)", "oklch(1 2.3 0 / 0.5)"); +test_computed_value("color", "oklch(0.2 0.5 20deg/0.5)", "oklch(0.2 0.5 20 / 0.5)"); +test_computed_value("color", "oklch(0.2 0.5 20deg/50%)", "oklch(0.2 0.5 20 / 0.5)"); +test_computed_value("color", "oklch(0.1 0.2 20deg / -10%)", "oklch(0.1 0.2 20 / 0)"); +test_computed_value("color", "oklch(0.1 0.2 20deg / 110%)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(0.1 0.2 1.28rad)", "oklch(0.1 0.2 73.3386)"); +test_computed_value("color", "oklch(0.1 0.2 380deg)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(0.1 0.2 -340deg)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(0.1 0.2 740deg)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(0.1 0.2 -700deg)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(-0.4 0 0)", "oklch(0 0 0)"); +test_computed_value("color", "oklch(0.2 -0.2 0)", "oklch(0.2 0 0)"); +test_computed_value("color", "oklch(0 0 0 / 0.5)", "oklch(0 0 0 / 0.5)"); +test_computed_value("color", "oklch(0.1 0.2 20 / 110%)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(0.1 0.2 -700)", "oklch(0.1 0.2 20)"); +test_computed_value("color", "oklch(calc(0.5 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))", "oklch(1 0 40 / 0.5)"); +test_computed_value("color", "oklch(calc(-0.5 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))", "oklch(0 1.5 320 / 0)"); + +test_computed_value("color", "oklch(none none none / none)", "oklch(none none none / none)"); +test_computed_value("color", "oklch(none none none)", "oklch(none none none)"); +test_computed_value("color", "oklch(0.2 none none / none)", "oklch(0.2 none none / none)"); +test_computed_value("color", "oklch(none none none / 0.5)", "oklch(none none none / 0.5)"); +test_computed_value("color", "oklch(0 0 0 / none)", "oklch(0 0 0 / none)"); + +// These tests validate the ranges of lch() vs. oklch() lightness and chroma +test_computed_value("color", "lch(20% 80% 10/0.5)", "lch(20 120 10 / 0.5)"); +test_computed_value("color", "oklch(20% 60% 10/0.5)", "oklch(0.2 0.24 10 / 0.5)"); + +test_computed_value("color", "oklch(calc(NaN) 0 0)", "oklch(0 0 0)"); +test_computed_value("color", "oklch(calc(0 / 0) 0 0)", "oklch(0 0 0)"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-named-color.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-named-color.html new file mode 100644 index 0000000000..0fe639093a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-named-color.html @@ -0,0 +1,488 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using named color notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#named-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +tests = [ + ["/**/transparent", "rgba(0, 0, 0, 0)", "Should parse to completely transparent"], + ["transparent", "rgba(0, 0, 0, 0)", "Should parse to completely transparent"], + [" transparent\n", "rgba(0, 0, 0, 0)", "Should parse to completely transparent"], + ["TransParent", "rgba(0, 0, 0, 0)", "Should parse to completely transparent"], + ["currentColor", "rgb(255, 0, 0)", "Should be same as parent color"], + ["CURRENTcolor", "rgb(255, 0, 0)", "Should be same as parent color"], + ["black", "rgb(0, 0, 0)", "Should parse as correct value"], + ["white", "rgb(255, 255, 255)", "Should parse as correct value"], + ["fuchsia", "rgb(255, 0, 255)", "Should parse as correct value"], + ["cyan", "rgb(0, 255, 255)", "Should parse as correct value"], + ["CyAn", "rgb(0, 255, 255)", "Should parse as cyan"], + + ["transparent", "rgba(0, 0, 0, 0)", "Keyword should parse properly"], + ["TRANSPARENT", "rgba(0, 0, 0, 0)", "Keywords should be case-insensitive"], + ["transparent", "rgba(0, 0, 0, 0)", "Code point should parse"], + ["aliceblue", "rgb(240, 248, 255)", "Keyword should parse properly"], + ["ALICEBLUE", "rgb(240, 248, 255)", "Keywords should be case-insensitive"], + ["aliceblue", "rgb(240, 248, 255)", "Code point should parse"], + ["antiquewhite", "rgb(250, 235, 215)", "Keyword should parse properly"], + ["ANTIQUEWHITE", "rgb(250, 235, 215)", "Keywords should be case-insensitive"], + ["antiquewhite", "rgb(250, 235, 215)", "Code point should parse"], + ["aqua", "rgb(0, 255, 255)", "Keyword should parse properly"], + ["AQUA", "rgb(0, 255, 255)", "Keywords should be case-insensitive"], + ["aqua", "rgb(0, 255, 255)", "Code point should parse"], + ["aquamarine", "rgb(127, 255, 212)", "Keyword should parse properly"], + ["AQUAMARINE", "rgb(127, 255, 212)", "Keywords should be case-insensitive"], + ["aquamarine", "rgb(127, 255, 212)", "Code point should parse"], + ["azure", "rgb(240, 255, 255)", "Keyword should parse properly"], + ["AZURE", "rgb(240, 255, 255)", "Keywords should be case-insensitive"], + ["azure", "rgb(240, 255, 255)", "Code point should parse"], + ["beige", "rgb(245, 245, 220)", "Keyword should parse properly"], + ["BEIGE", "rgb(245, 245, 220)", "Keywords should be case-insensitive"], + ["beige", "rgb(245, 245, 220)", "Code point should parse"], + ["bisque", "rgb(255, 228, 196)", "Keyword should parse properly"], + ["BISQUE", "rgb(255, 228, 196)", "Keywords should be case-insensitive"], + ["bisque", "rgb(255, 228, 196)", "Code point should parse"], + ["black", "rgb(0, 0, 0)", "Keyword should parse properly"], + ["BLACK", "rgb(0, 0, 0)", "Keywords should be case-insensitive"], + ["black", "rgb(0, 0, 0)", "Code point should parse"], + ["blanchedalmond", "rgb(255, 235, 205)", "Keyword should parse properly"], + ["BLANCHEDALMOND", "rgb(255, 235, 205)", "Keywords should be case-insensitive"], + ["blanchedalmond", "rgb(255, 235, 205)", "Code point should parse"], + ["blue", "rgb(0, 0, 255)", "Keyword should parse properly"], + ["BLUE", "rgb(0, 0, 255)", "Keywords should be case-insensitive"], + ["blue", "rgb(0, 0, 255)", "Code point should parse"], + ["blueviolet", "rgb(138, 43, 226)", "Keyword should parse properly"], + ["BLUEVIOLET", "rgb(138, 43, 226)", "Keywords should be case-insensitive"], + ["blueviolet", "rgb(138, 43, 226)", "Code point should parse"], + ["brown", "rgb(165, 42, 42)", "Keyword should parse properly"], + ["BROWN", "rgb(165, 42, 42)", "Keywords should be case-insensitive"], + ["brown", "rgb(165, 42, 42)", "Code point should parse"], + ["burlywood", "rgb(222, 184, 135)", "Keyword should parse properly"], + ["BURLYWOOD", "rgb(222, 184, 135)", "Keywords should be case-insensitive"], + ["burlywood", "rgb(222, 184, 135)", "Code point should parse"], + ["cadetblue", "rgb(95, 158, 160)", "Keyword should parse properly"], + ["CADETBLUE", "rgb(95, 158, 160)", "Keywords should be case-insensitive"], + ["cadetblue", "rgb(95, 158, 160)", "Code point should parse"], + ["chartreuse", "rgb(127, 255, 0)", "Keyword should parse properly"], + ["CHARTREUSE", "rgb(127, 255, 0)", "Keywords should be case-insensitive"], + ["chartreuse", "rgb(127, 255, 0)", "Code point should parse"], + ["chocolate", "rgb(210, 105, 30)", "Keyword should parse properly"], + ["CHOCOLATE", "rgb(210, 105, 30)", "Keywords should be case-insensitive"], + ["chocolate", "rgb(210, 105, 30)", "Code point should parse"], + ["coral", "rgb(255, 127, 80)", "Keyword should parse properly"], + ["CORAL", "rgb(255, 127, 80)", "Keywords should be case-insensitive"], + ["coral", "rgb(255, 127, 80)", "Code point should parse"], + ["cornflowerblue", "rgb(100, 149, 237)", "Keyword should parse properly"], + ["CORNFLOWERBLUE", "rgb(100, 149, 237)", "Keywords should be case-insensitive"], + ["cornflowerblue", "rgb(100, 149, 237)", "Code point should parse"], + ["cornsilk", "rgb(255, 248, 220)", "Keyword should parse properly"], + ["CORNSILK", "rgb(255, 248, 220)", "Keywords should be case-insensitive"], + ["cornsilk", "rgb(255, 248, 220)", "Code point should parse"], + ["crimson", "rgb(220, 20, 60)", "Keyword should parse properly"], + ["CRIMSON", "rgb(220, 20, 60)", "Keywords should be case-insensitive"], + ["crimson", "rgb(220, 20, 60)", "Code point should parse"], + ["cyan", "rgb(0, 255, 255)", "Keyword should parse properly"], + ["CYAN", "rgb(0, 255, 255)", "Keywords should be case-insensitive"], + ["cyan", "rgb(0, 255, 255)", "Code point should parse"], + ["darkblue", "rgb(0, 0, 139)", "Keyword should parse properly"], + ["DARKBLUE", "rgb(0, 0, 139)", "Keywords should be case-insensitive"], + ["darkblue", "rgb(0, 0, 139)", "Code point should parse"], + ["darkcyan", "rgb(0, 139, 139)", "Keyword should parse properly"], + ["DARKCYAN", "rgb(0, 139, 139)", "Keywords should be case-insensitive"], + ["darkcyan", "rgb(0, 139, 139)", "Code point should parse"], + ["darkgoldenrod", "rgb(184, 134, 11)", "Keyword should parse properly"], + ["DARKGOLDENROD", "rgb(184, 134, 11)", "Keywords should be case-insensitive"], + ["darkgoldenrod", "rgb(184, 134, 11)", "Code point should parse"], + ["darkgray", "rgb(169, 169, 169)", "Keyword should parse properly"], + ["DARKGRAY", "rgb(169, 169, 169)", "Keywords should be case-insensitive"], + ["darkgray", "rgb(169, 169, 169)", "Code point should parse"], + ["darkgreen", "rgb(0, 100, 0)", "Keyword should parse properly"], + ["DARKGREEN", "rgb(0, 100, 0)", "Keywords should be case-insensitive"], + ["darkgreen", "rgb(0, 100, 0)", "Code point should parse"], + ["darkgrey", "rgb(169, 169, 169)", "Keyword should parse properly"], + ["DARKGREY", "rgb(169, 169, 169)", "Keywords should be case-insensitive"], + ["darkgrey", "rgb(169, 169, 169)", "Code point should parse"], + ["darkkhaki", "rgb(189, 183, 107)", "Keyword should parse properly"], + ["DARKKHAKI", "rgb(189, 183, 107)", "Keywords should be case-insensitive"], + ["darkkhaki", "rgb(189, 183, 107)", "Code point should parse"], + ["darkmagenta", "rgb(139, 0, 139)", "Keyword should parse properly"], + ["DARKMAGENTA", "rgb(139, 0, 139)", "Keywords should be case-insensitive"], + ["darkmagenta", "rgb(139, 0, 139)", "Code point should parse"], + ["darkolivegreen", "rgb(85, 107, 47)", "Keyword should parse properly"], + ["DARKOLIVEGREEN", "rgb(85, 107, 47)", "Keywords should be case-insensitive"], + ["darkolivegreen", "rgb(85, 107, 47)", "Code point should parse"], + ["darkorange", "rgb(255, 140, 0)", "Keyword should parse properly"], + ["DARKORANGE", "rgb(255, 140, 0)", "Keywords should be case-insensitive"], + ["darkorange", "rgb(255, 140, 0)", "Code point should parse"], + ["darkorchid", "rgb(153, 50, 204)", "Keyword should parse properly"], + ["DARKORCHID", "rgb(153, 50, 204)", "Keywords should be case-insensitive"], + ["darkorchid", "rgb(153, 50, 204)", "Code point should parse"], + ["darkred", "rgb(139, 0, 0)", "Keyword should parse properly"], + ["DARKRED", "rgb(139, 0, 0)", "Keywords should be case-insensitive"], + ["darkred", "rgb(139, 0, 0)", "Code point should parse"], + ["darksalmon", "rgb(233, 150, 122)", "Keyword should parse properly"], + ["DARKSALMON", "rgb(233, 150, 122)", "Keywords should be case-insensitive"], + ["darksalmon", "rgb(233, 150, 122)", "Code point should parse"], + ["darkseagreen", "rgb(143, 188, 143)", "Keyword should parse properly"], + ["DARKSEAGREEN", "rgb(143, 188, 143)", "Keywords should be case-insensitive"], + ["darkseagreen", "rgb(143, 188, 143)", "Code point should parse"], + ["darkslateblue", "rgb(72, 61, 139)", "Keyword should parse properly"], + ["DARKSLATEBLUE", "rgb(72, 61, 139)", "Keywords should be case-insensitive"], + ["darkslateblue", "rgb(72, 61, 139)", "Code point should parse"], + ["darkslategray", "rgb(47, 79, 79)", "Keyword should parse properly"], + ["DARKSLATEGRAY", "rgb(47, 79, 79)", "Keywords should be case-insensitive"], + ["darkslategray", "rgb(47, 79, 79)", "Code point should parse"], + ["darkslategrey", "rgb(47, 79, 79)", "Keyword should parse properly"], + ["DARKSLATEGREY", "rgb(47, 79, 79)", "Keywords should be case-insensitive"], + ["darkslategrey", "rgb(47, 79, 79)", "Code point should parse"], + ["darkturquoise", "rgb(0, 206, 209)", "Keyword should parse properly"], + ["DARKTURQUOISE", "rgb(0, 206, 209)", "Keywords should be case-insensitive"], + ["darkturquoise", "rgb(0, 206, 209)", "Code point should parse"], + ["darkviolet", "rgb(148, 0, 211)", "Keyword should parse properly"], + ["DARKVIOLET", "rgb(148, 0, 211)", "Keywords should be case-insensitive"], + ["darkviolet", "rgb(148, 0, 211)", "Code point should parse"], + ["deeppink", "rgb(255, 20, 147)", "Keyword should parse properly"], + ["DEEPPINK", "rgb(255, 20, 147)", "Keywords should be case-insensitive"], + ["deeppink", "rgb(255, 20, 147)", "Code point should parse"], + ["deepskyblue", "rgb(0, 191, 255)", "Keyword should parse properly"], + ["DEEPSKYBLUE", "rgb(0, 191, 255)", "Keywords should be case-insensitive"], + ["deepskyblue", "rgb(0, 191, 255)", "Code point should parse"], + ["dimgray", "rgb(105, 105, 105)", "Keyword should parse properly"], + ["DIMGRAY", "rgb(105, 105, 105)", "Keywords should be case-insensitive"], + ["dimgray", "rgb(105, 105, 105)", "Code point should parse"], + ["dimgrey", "rgb(105, 105, 105)", "Keyword should parse properly"], + ["DIMGREY", "rgb(105, 105, 105)", "Keywords should be case-insensitive"], + ["dimgrey", "rgb(105, 105, 105)", "Code point should parse"], + ["dodgerblue", "rgb(30, 144, 255)", "Keyword should parse properly"], + ["DODGERBLUE", "rgb(30, 144, 255)", "Keywords should be case-insensitive"], + ["dodgerblue", "rgb(30, 144, 255)", "Code point should parse"], + ["firebrick", "rgb(178, 34, 34)", "Keyword should parse properly"], + ["FIREBRICK", "rgb(178, 34, 34)", "Keywords should be case-insensitive"], + ["firebrick", "rgb(178, 34, 34)", "Code point should parse"], + ["floralwhite", "rgb(255, 250, 240)", "Keyword should parse properly"], + ["FLORALWHITE", "rgb(255, 250, 240)", "Keywords should be case-insensitive"], + ["floralwhite", "rgb(255, 250, 240)", "Code point should parse"], + ["forestgreen", "rgb(34, 139, 34)", "Keyword should parse properly"], + ["FORESTGREEN", "rgb(34, 139, 34)", "Keywords should be case-insensitive"], + ["forestgreen", "rgb(34, 139, 34)", "Code point should parse"], + ["fuchsia", "rgb(255, 0, 255)", "Keyword should parse properly"], + ["FUCHSIA", "rgb(255, 0, 255)", "Keywords should be case-insensitive"], + ["fuchsia", "rgb(255, 0, 255)", "Code point should parse"], + ["gainsboro", "rgb(220, 220, 220)", "Keyword should parse properly"], + ["GAINSBORO", "rgb(220, 220, 220)", "Keywords should be case-insensitive"], + ["gainsboro", "rgb(220, 220, 220)", "Code point should parse"], + ["ghostwhite", "rgb(248, 248, 255)", "Keyword should parse properly"], + ["GHOSTWHITE", "rgb(248, 248, 255)", "Keywords should be case-insensitive"], + ["ghostwhite", "rgb(248, 248, 255)", "Code point should parse"], + ["gold", "rgb(255, 215, 0)", "Keyword should parse properly"], + ["GOLD", "rgb(255, 215, 0)", "Keywords should be case-insensitive"], + ["gold", "rgb(255, 215, 0)", "Code point should parse"], + ["goldenrod", "rgb(218, 165, 32)", "Keyword should parse properly"], + ["GOLDENROD", "rgb(218, 165, 32)", "Keywords should be case-insensitive"], + ["goldenrod", "rgb(218, 165, 32)", "Code point should parse"], + ["gray", "rgb(128, 128, 128)", "Keyword should parse properly"], + ["GRAY", "rgb(128, 128, 128)", "Keywords should be case-insensitive"], + ["gray", "rgb(128, 128, 128)", "Code point should parse"], + ["green", "rgb(0, 128, 0)", "Keyword should parse properly"], + ["GREEN", "rgb(0, 128, 0)", "Keywords should be case-insensitive"], + ["green", "rgb(0, 128, 0)", "Code point should parse"], + ["greenyellow", "rgb(173, 255, 47)", "Keyword should parse properly"], + ["GREENYELLOW", "rgb(173, 255, 47)", "Keywords should be case-insensitive"], + ["greenyellow", "rgb(173, 255, 47)", "Code point should parse"], + ["grey", "rgb(128, 128, 128)", "Keyword should parse properly"], + ["GREY", "rgb(128, 128, 128)", "Keywords should be case-insensitive"], + ["grey", "rgb(128, 128, 128)", "Code point should parse"], + ["honeydew", "rgb(240, 255, 240)", "Keyword should parse properly"], + ["HONEYDEW", "rgb(240, 255, 240)", "Keywords should be case-insensitive"], + ["honeydew", "rgb(240, 255, 240)", "Code point should parse"], + ["hotpink", "rgb(255, 105, 180)", "Keyword should parse properly"], + ["HOTPINK", "rgb(255, 105, 180)", "Keywords should be case-insensitive"], + ["hotpink", "rgb(255, 105, 180)", "Code point should parse"], + ["indianred", "rgb(205, 92, 92)", "Keyword should parse properly"], + ["INDIANRED", "rgb(205, 92, 92)", "Keywords should be case-insensitive"], + ["indianred", "rgb(205, 92, 92)", "Code point should parse"], + ["indigo", "rgb(75, 0, 130)", "Keyword should parse properly"], + ["INDIGO", "rgb(75, 0, 130)", "Keywords should be case-insensitive"], + ["indigo", "rgb(75, 0, 130)", "Code point should parse"], + ["ivory", "rgb(255, 255, 240)", "Keyword should parse properly"], + ["IVORY", "rgb(255, 255, 240)", "Keywords should be case-insensitive"], + ["ivory", "rgb(255, 255, 240)", "Code point should parse"], + ["khaki", "rgb(240, 230, 140)", "Keyword should parse properly"], + ["KHAKI", "rgb(240, 230, 140)", "Keywords should be case-insensitive"], + ["khaki", "rgb(240, 230, 140)", "Code point should parse"], + ["lavender", "rgb(230, 230, 250)", "Keyword should parse properly"], + ["LAVENDER", "rgb(230, 230, 250)", "Keywords should be case-insensitive"], + ["lavender", "rgb(230, 230, 250)", "Code point should parse"], + ["lavenderblush", "rgb(255, 240, 245)", "Keyword should parse properly"], + ["LAVENDERBLUSH", "rgb(255, 240, 245)", "Keywords should be case-insensitive"], + ["lavenderblush", "rgb(255, 240, 245)", "Code point should parse"], + ["lawngreen", "rgb(124, 252, 0)", "Keyword should parse properly"], + ["LAWNGREEN", "rgb(124, 252, 0)", "Keywords should be case-insensitive"], + ["lawngreen", "rgb(124, 252, 0)", "Code point should parse"], + ["lemonchiffon", "rgb(255, 250, 205)", "Keyword should parse properly"], + ["LEMONCHIFFON", "rgb(255, 250, 205)", "Keywords should be case-insensitive"], + ["lemonchiffon", "rgb(255, 250, 205)", "Code point should parse"], + ["lightblue", "rgb(173, 216, 230)", "Keyword should parse properly"], + ["LIGHTBLUE", "rgb(173, 216, 230)", "Keywords should be case-insensitive"], + ["lightblue", "rgb(173, 216, 230)", "Code point should parse"], + ["lightcoral", "rgb(240, 128, 128)", "Keyword should parse properly"], + ["LIGHTCORAL", "rgb(240, 128, 128)", "Keywords should be case-insensitive"], + ["lightcoral", "rgb(240, 128, 128)", "Code point should parse"], + ["lightcyan", "rgb(224, 255, 255)", "Keyword should parse properly"], + ["LIGHTCYAN", "rgb(224, 255, 255)", "Keywords should be case-insensitive"], + ["lightcyan", "rgb(224, 255, 255)", "Code point should parse"], + ["lightgoldenrodyellow", "rgb(250, 250, 210)", "Keyword should parse properly"], + ["LIGHTGOLDENRODYELLOW", "rgb(250, 250, 210)", "Keywords should be case-insensitive"], + ["lightgoldenrodyellow", "rgb(250, 250, 210)", "Code point should parse"], + ["lightgray", "rgb(211, 211, 211)", "Keyword should parse properly"], + ["LIGHTGRAY", "rgb(211, 211, 211)", "Keywords should be case-insensitive"], + ["lightgray", "rgb(211, 211, 211)", "Code point should parse"], + ["lightgreen", "rgb(144, 238, 144)", "Keyword should parse properly"], + ["LIGHTGREEN", "rgb(144, 238, 144)", "Keywords should be case-insensitive"], + ["lightgreen", "rgb(144, 238, 144)", "Code point should parse"], + ["lightgrey", "rgb(211, 211, 211)", "Keyword should parse properly"], + ["LIGHTGREY", "rgb(211, 211, 211)", "Keywords should be case-insensitive"], + ["lightgrey", "rgb(211, 211, 211)", "Code point should parse"], + ["lightpink", "rgb(255, 182, 193)", "Keyword should parse properly"], + ["LIGHTPINK", "rgb(255, 182, 193)", "Keywords should be case-insensitive"], + ["lightpink", "rgb(255, 182, 193)", "Code point should parse"], + ["lightsalmon", "rgb(255, 160, 122)", "Keyword should parse properly"], + ["LIGHTSALMON", "rgb(255, 160, 122)", "Keywords should be case-insensitive"], + ["lightsalmon", "rgb(255, 160, 122)", "Code point should parse"], + ["lightseagreen", "rgb(32, 178, 170)", "Keyword should parse properly"], + ["LIGHTSEAGREEN", "rgb(32, 178, 170)", "Keywords should be case-insensitive"], + ["lightseagreen", "rgb(32, 178, 170)", "Code point should parse"], + ["lightskyblue", "rgb(135, 206, 250)", "Keyword should parse properly"], + ["LIGHTSKYBLUE", "rgb(135, 206, 250)", "Keywords should be case-insensitive"], + ["lightskyblue", "rgb(135, 206, 250)", "Code point should parse"], + ["lightslategray", "rgb(119, 136, 153)", "Keyword should parse properly"], + ["LIGHTSLATEGRAY", "rgb(119, 136, 153)", "Keywords should be case-insensitive"], + ["lightslategray", "rgb(119, 136, 153)", "Code point should parse"], + ["lightslategrey", "rgb(119, 136, 153)", "Keyword should parse properly"], + ["LIGHTSLATEGREY", "rgb(119, 136, 153)", "Keywords should be case-insensitive"], + ["lightslategrey", "rgb(119, 136, 153)", "Code point should parse"], + ["lightsteelblue", "rgb(176, 196, 222)", "Keyword should parse properly"], + ["LIGHTSTEELBLUE", "rgb(176, 196, 222)", "Keywords should be case-insensitive"], + ["lightsteelblue", "rgb(176, 196, 222)", "Code point should parse"], + ["lightyellow", "rgb(255, 255, 224)", "Keyword should parse properly"], + ["LIGHTYELLOW", "rgb(255, 255, 224)", "Keywords should be case-insensitive"], + ["lightyellow", "rgb(255, 255, 224)", "Code point should parse"], + ["lime", "rgb(0, 255, 0)", "Keyword should parse properly"], + ["LIME", "rgb(0, 255, 0)", "Keywords should be case-insensitive"], + ["lime", "rgb(0, 255, 0)", "Code point should parse"], + ["limegreen", "rgb(50, 205, 50)", "Keyword should parse properly"], + ["LIMEGREEN", "rgb(50, 205, 50)", "Keywords should be case-insensitive"], + ["limegreen", "rgb(50, 205, 50)", "Code point should parse"], + ["linen", "rgb(250, 240, 230)", "Keyword should parse properly"], + ["LINEN", "rgb(250, 240, 230)", "Keywords should be case-insensitive"], + ["linen", "rgb(250, 240, 230)", "Code point should parse"], + ["magenta", "rgb(255, 0, 255)", "Keyword should parse properly"], + ["MAGENTA", "rgb(255, 0, 255)", "Keywords should be case-insensitive"], + ["magenta", "rgb(255, 0, 255)", "Code point should parse"], + ["maroon", "rgb(128, 0, 0)", "Keyword should parse properly"], + ["MAROON", "rgb(128, 0, 0)", "Keywords should be case-insensitive"], + ["maroon", "rgb(128, 0, 0)", "Code point should parse"], + ["mediumaquamarine", "rgb(102, 205, 170)", "Keyword should parse properly"], + ["MEDIUMAQUAMARINE", "rgb(102, 205, 170)", "Keywords should be case-insensitive"], + ["mediumaquamarine", "rgb(102, 205, 170)", "Code point should parse"], + ["mediumblue", "rgb(0, 0, 205)", "Keyword should parse properly"], + ["MEDIUMBLUE", "rgb(0, 0, 205)", "Keywords should be case-insensitive"], + ["mediumblue", "rgb(0, 0, 205)", "Code point should parse"], + ["mediumorchid", "rgb(186, 85, 211)", "Keyword should parse properly"], + ["MEDIUMORCHID", "rgb(186, 85, 211)", "Keywords should be case-insensitive"], + ["mediumorchid", "rgb(186, 85, 211)", "Code point should parse"], + ["mediumpurple", "rgb(147, 112, 219)", "Keyword should parse properly"], + ["MEDIUMPURPLE", "rgb(147, 112, 219)", "Keywords should be case-insensitive"], + ["mediumpurple", "rgb(147, 112, 219)", "Code point should parse"], + ["mediumseagreen", "rgb(60, 179, 113)", "Keyword should parse properly"], + ["MEDIUMSEAGREEN", "rgb(60, 179, 113)", "Keywords should be case-insensitive"], + ["mediumseagreen", "rgb(60, 179, 113)", "Code point should parse"], + ["mediumslateblue", "rgb(123, 104, 238)", "Keyword should parse properly"], + ["MEDIUMSLATEBLUE", "rgb(123, 104, 238)", "Keywords should be case-insensitive"], + ["mediumslateblue", "rgb(123, 104, 238)", "Code point should parse"], + ["mediumspringgreen", "rgb(0, 250, 154)", "Keyword should parse properly"], + ["MEDIUMSPRINGGREEN", "rgb(0, 250, 154)", "Keywords should be case-insensitive"], + ["mediumspringgreen", "rgb(0, 250, 154)", "Code point should parse"], + ["mediumturquoise", "rgb(72, 209, 204)", "Keyword should parse properly"], + ["MEDIUMTURQUOISE", "rgb(72, 209, 204)", "Keywords should be case-insensitive"], + ["mediumturquoise", "rgb(72, 209, 204)", "Code point should parse"], + ["mediumvioletred", "rgb(199, 21, 133)", "Keyword should parse properly"], + ["MEDIUMVIOLETRED", "rgb(199, 21, 133)", "Keywords should be case-insensitive"], + ["mediumvioletred", "rgb(199, 21, 133)", "Code point should parse"], + ["midnightblue", "rgb(25, 25, 112)", "Keyword should parse properly"], + ["MIDNIGHTBLUE", "rgb(25, 25, 112)", "Keywords should be case-insensitive"], + ["midnightblue", "rgb(25, 25, 112)", "Code point should parse"], + ["mintcream", "rgb(245, 255, 250)", "Keyword should parse properly"], + ["MINTCREAM", "rgb(245, 255, 250)", "Keywords should be case-insensitive"], + ["mintcream", "rgb(245, 255, 250)", "Code point should parse"], + ["mistyrose", "rgb(255, 228, 225)", "Keyword should parse properly"], + ["MISTYROSE", "rgb(255, 228, 225)", "Keywords should be case-insensitive"], + ["mistyrose", "rgb(255, 228, 225)", "Code point should parse"], + ["moccasin", "rgb(255, 228, 181)", "Keyword should parse properly"], + ["MOCCASIN", "rgb(255, 228, 181)", "Keywords should be case-insensitive"], + ["moccasin", "rgb(255, 228, 181)", "Code point should parse"], + ["navajowhite", "rgb(255, 222, 173)", "Keyword should parse properly"], + ["NAVAJOWHITE", "rgb(255, 222, 173)", "Keywords should be case-insensitive"], + ["navajowhite", "rgb(255, 222, 173)", "Code point should parse"], + ["navy", "rgb(0, 0, 128)", "Keyword should parse properly"], + ["NAVY", "rgb(0, 0, 128)", "Keywords should be case-insensitive"], + ["navy", "rgb(0, 0, 128)", "Code point should parse"], + ["oldlace", "rgb(253, 245, 230)", "Keyword should parse properly"], + ["OLDLACE", "rgb(253, 245, 230)", "Keywords should be case-insensitive"], + ["oldlace", "rgb(253, 245, 230)", "Code point should parse"], + ["olive", "rgb(128, 128, 0)", "Keyword should parse properly"], + ["OLIVE", "rgb(128, 128, 0)", "Keywords should be case-insensitive"], + ["olive", "rgb(128, 128, 0)", "Code point should parse"], + ["olivedrab", "rgb(107, 142, 35)", "Keyword should parse properly"], + ["OLIVEDRAB", "rgb(107, 142, 35)", "Keywords should be case-insensitive"], + ["olivedrab", "rgb(107, 142, 35)", "Code point should parse"], + ["orange", "rgb(255, 165, 0)", "Keyword should parse properly"], + ["ORANGE", "rgb(255, 165, 0)", "Keywords should be case-insensitive"], + ["orange", "rgb(255, 165, 0)", "Code point should parse"], + ["orangered", "rgb(255, 69, 0)", "Keyword should parse properly"], + ["ORANGERED", "rgb(255, 69, 0)", "Keywords should be case-insensitive"], + ["orangered", "rgb(255, 69, 0)", "Code point should parse"], + ["orchid", "rgb(218, 112, 214)", "Keyword should parse properly"], + ["ORCHID", "rgb(218, 112, 214)", "Keywords should be case-insensitive"], + ["orchid", "rgb(218, 112, 214)", "Code point should parse"], + ["palegoldenrod", "rgb(238, 232, 170)", "Keyword should parse properly"], + ["PALEGOLDENROD", "rgb(238, 232, 170)", "Keywords should be case-insensitive"], + ["palegoldenrod", "rgb(238, 232, 170)", "Code point should parse"], + ["palegreen", "rgb(152, 251, 152)", "Keyword should parse properly"], + ["PALEGREEN", "rgb(152, 251, 152)", "Keywords should be case-insensitive"], + ["palegreen", "rgb(152, 251, 152)", "Code point should parse"], + ["paleturquoise", "rgb(175, 238, 238)", "Keyword should parse properly"], + ["PALETURQUOISE", "rgb(175, 238, 238)", "Keywords should be case-insensitive"], + ["paleturquoise", "rgb(175, 238, 238)", "Code point should parse"], + ["palevioletred", "rgb(219, 112, 147)", "Keyword should parse properly"], + ["PALEVIOLETRED", "rgb(219, 112, 147)", "Keywords should be case-insensitive"], + ["palevioletred", "rgb(219, 112, 147)", "Code point should parse"], + ["papayawhip", "rgb(255, 239, 213)", "Keyword should parse properly"], + ["PAPAYAWHIP", "rgb(255, 239, 213)", "Keywords should be case-insensitive"], + ["papayawhip", "rgb(255, 239, 213)", "Code point should parse"], + ["peachpuff", "rgb(255, 218, 185)", "Keyword should parse properly"], + ["PEACHPUFF", "rgb(255, 218, 185)", "Keywords should be case-insensitive"], + ["peachpuff", "rgb(255, 218, 185)", "Code point should parse"], + ["peru", "rgb(205, 133, 63)", "Keyword should parse properly"], + ["PERU", "rgb(205, 133, 63)", "Keywords should be case-insensitive"], + ["peru", "rgb(205, 133, 63)", "Code point should parse"], + ["pink", "rgb(255, 192, 203)", "Keyword should parse properly"], + ["PINK", "rgb(255, 192, 203)", "Keywords should be case-insensitive"], + ["pink", "rgb(255, 192, 203)", "Code point should parse"], + ["plum", "rgb(221, 160, 221)", "Keyword should parse properly"], + ["PLUM", "rgb(221, 160, 221)", "Keywords should be case-insensitive"], + ["plum", "rgb(221, 160, 221)", "Code point should parse"], + ["powderblue", "rgb(176, 224, 230)", "Keyword should parse properly"], + ["POWDERBLUE", "rgb(176, 224, 230)", "Keywords should be case-insensitive"], + ["powderblue", "rgb(176, 224, 230)", "Code point should parse"], + ["purple", "rgb(128, 0, 128)", "Keyword should parse properly"], + ["PURPLE", "rgb(128, 0, 128)", "Keywords should be case-insensitive"], + ["purple", "rgb(128, 0, 128)", "Code point should parse"], + ["red", "rgb(255, 0, 0)", "Keyword should parse properly"], + ["RED", "rgb(255, 0, 0)", "Keywords should be case-insensitive"], + ["red", "rgb(255, 0, 0)", "Code point should parse"], + ["rosybrown", "rgb(188, 143, 143)", "Keyword should parse properly"], + ["ROSYBROWN", "rgb(188, 143, 143)", "Keywords should be case-insensitive"], + ["rosybrown", "rgb(188, 143, 143)", "Code point should parse"], + ["royalblue", "rgb(65, 105, 225)", "Keyword should parse properly"], + ["ROYALBLUE", "rgb(65, 105, 225)", "Keywords should be case-insensitive"], + ["royalblue", "rgb(65, 105, 225)", "Code point should parse"], + ["saddlebrown", "rgb(139, 69, 19)", "Keyword should parse properly"], + ["SADDLEBROWN", "rgb(139, 69, 19)", "Keywords should be case-insensitive"], + ["saddlebrown", "rgb(139, 69, 19)", "Code point should parse"], + ["salmon", "rgb(250, 128, 114)", "Keyword should parse properly"], + ["SALMON", "rgb(250, 128, 114)", "Keywords should be case-insensitive"], + ["salmon", "rgb(250, 128, 114)", "Code point should parse"], + ["sandybrown", "rgb(244, 164, 96)", "Keyword should parse properly"], + ["SANDYBROWN", "rgb(244, 164, 96)", "Keywords should be case-insensitive"], + ["sandybrown", "rgb(244, 164, 96)", "Code point should parse"], + ["seagreen", "rgb(46, 139, 87)", "Keyword should parse properly"], + ["SEAGREEN", "rgb(46, 139, 87)", "Keywords should be case-insensitive"], + ["seagreen", "rgb(46, 139, 87)", "Code point should parse"], + ["seashell", "rgb(255, 245, 238)", "Keyword should parse properly"], + ["SEASHELL", "rgb(255, 245, 238)", "Keywords should be case-insensitive"], + ["seashell", "rgb(255, 245, 238)", "Code point should parse"], + ["sienna", "rgb(160, 82, 45)", "Keyword should parse properly"], + ["SIENNA", "rgb(160, 82, 45)", "Keywords should be case-insensitive"], + ["sienna", "rgb(160, 82, 45)", "Code point should parse"], + ["silver", "rgb(192, 192, 192)", "Keyword should parse properly"], + ["SILVER", "rgb(192, 192, 192)", "Keywords should be case-insensitive"], + ["silver", "rgb(192, 192, 192)", "Code point should parse"], + ["skyblue", "rgb(135, 206, 235)", "Keyword should parse properly"], + ["SKYBLUE", "rgb(135, 206, 235)", "Keywords should be case-insensitive"], + ["skyblue", "rgb(135, 206, 235)", "Code point should parse"], + ["slateblue", "rgb(106, 90, 205)", "Keyword should parse properly"], + ["SLATEBLUE", "rgb(106, 90, 205)", "Keywords should be case-insensitive"], + ["slateblue", "rgb(106, 90, 205)", "Code point should parse"], + ["slategray", "rgb(112, 128, 144)", "Keyword should parse properly"], + ["SLATEGRAY", "rgb(112, 128, 144)", "Keywords should be case-insensitive"], + ["slategray", "rgb(112, 128, 144)", "Code point should parse"], + ["slategrey", "rgb(112, 128, 144)", "Keyword should parse properly"], + ["SLATEGREY", "rgb(112, 128, 144)", "Keywords should be case-insensitive"], + ["slategrey", "rgb(112, 128, 144)", "Code point should parse"], + ["snow", "rgb(255, 250, 250)", "Keyword should parse properly"], + ["SNOW", "rgb(255, 250, 250)", "Keywords should be case-insensitive"], + ["snow", "rgb(255, 250, 250)", "Code point should parse"], + ["springgreen", "rgb(0, 255, 127)", "Keyword should parse properly"], + ["SPRINGGREEN", "rgb(0, 255, 127)", "Keywords should be case-insensitive"], + ["springgreen", "rgb(0, 255, 127)", "Code point should parse"], + ["steelblue", "rgb(70, 130, 180)", "Keyword should parse properly"], + ["STEELBLUE", "rgb(70, 130, 180)", "Keywords should be case-insensitive"], + ["steelblue", "rgb(70, 130, 180)", "Code point should parse"], + ["tan", "rgb(210, 180, 140)", "Keyword should parse properly"], + ["TAN", "rgb(210, 180, 140)", "Keywords should be case-insensitive"], + ["tan", "rgb(210, 180, 140)", "Code point should parse"], + ["teal", "rgb(0, 128, 128)", "Keyword should parse properly"], + ["TEAL", "rgb(0, 128, 128)", "Keywords should be case-insensitive"], + ["teal", "rgb(0, 128, 128)", "Code point should parse"], + ["thistle", "rgb(216, 191, 216)", "Keyword should parse properly"], + ["THISTLE", "rgb(216, 191, 216)", "Keywords should be case-insensitive"], + ["thistle", "rgb(216, 191, 216)", "Code point should parse"], + ["tomato", "rgb(255, 99, 71)", "Keyword should parse properly"], + ["TOMATO", "rgb(255, 99, 71)", "Keywords should be case-insensitive"], + ["tomato", "rgb(255, 99, 71)", "Code point should parse"], + ["turquoise", "rgb(64, 224, 208)", "Keyword should parse properly"], + ["TURQUOISE", "rgb(64, 224, 208)", "Keywords should be case-insensitive"], + ["turquoise", "rgb(64, 224, 208)", "Code point should parse"], + ["violet", "rgb(238, 130, 238)", "Keyword should parse properly"], + ["VIOLET", "rgb(238, 130, 238)", "Keywords should be case-insensitive"], + ["violet", "rgb(238, 130, 238)", "Code point should parse"], + ["wheat", "rgb(245, 222, 179)", "Keyword should parse properly"], + ["WHEAT", "rgb(245, 222, 179)", "Keywords should be case-insensitive"], + ["wheat", "rgb(245, 222, 179)", "Code point should parse"], + ["white", "rgb(255, 255, 255)", "Keyword should parse properly"], + ["WHITE", "rgb(255, 255, 255)", "Keywords should be case-insensitive"], + ["white", "rgb(255, 255, 255)", "Code point should parse"], + ["whitesmoke", "rgb(245, 245, 245)", "Keyword should parse properly"], + ["WHITESMOKE", "rgb(245, 245, 245)", "Keywords should be case-insensitive"], + ["whitesmoke", "rgb(245, 245, 245)", "Code point should parse"], + ["yellow", "rgb(255, 255, 0)", "Keyword should parse properly"], + ["YELLOW", "rgb(255, 255, 0)", "Keywords should be case-insensitive"], + ["yellow", "rgb(255, 255, 0)", "Code point should parse"], + ["yellowgreen", "rgb(154, 205, 50)", "Keyword should parse properly"], + ["YELLOWGREEN", "rgb(154, 205, 50)", "Keywords should be case-insensitive"], + ["yellowgreen", "rgb(154, 205, 50)", "Code point should parse"], +]; + +for (const test of tests) { + test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined); +} +</script> +</body> +</html> 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 new file mode 100644 index 0000000000..aa2e48723e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-relative-color.html @@ -0,0 +1,731 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Computation of colors using relative color syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#relative-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-relative-color"> +<meta name="assert" content="computed value of color using relative color syntax matches expected values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/color-testcommon.js"></script> +<style> + html { + --bg-color: blue; + --color: green; + --accent: lightseagreen; + --mycolor: orchid; + --mygray: lch(from var(--mycolor) l 0 h); + } +</style> +</head> +<body> +<div id="target"></div> +<script> + // rgb(from ...) + + // Testing no modifications. + fuzzy_test_computed_color(`rgb(from rebeccapurple r g b)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(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_computed_color(`rgb(from rgb(from rebeccapurple r g b) r g b)`, `color(srgb 0.4 0.2 0.6)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`rgb(from rebeccapurple 0 0 0)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple 0 0 0 / 0)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple 0 g b / alpha)`, `color(srgb 0 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r 0 b / alpha)`, `color(srgb 0.4 0 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g 0 / alpha)`, `color(srgb 0.4 0.2 0)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) 0 g b / alpha)`, `color(srgb 0 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 0 b / alpha)`, `color(srgb 0.2 0 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 0 / alpha)`, `color(srgb 0.2 0.4 0 / 0.8)`); + fuzzy_test_computed_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_computed_color(`rgb(from rebeccapurple 25 g b / alpha)`, `color(srgb 0.098 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r 25 b / alpha)`, `color(srgb 0.4 0.098 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g 25 / alpha)`, `color(srgb 0.4 0.2 0.098)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g b / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / alpha)`, `color(srgb 0.098 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / alpha)`, `color(srgb 0.2 0.098 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 25 / alpha)`, `color(srgb 0.2 0.4 0.098 / 0.8)`); + fuzzy_test_computed_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_computed_color(`rgb(from rebeccapurple 20% g b / alpha)`, `color(srgb 0.2 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g 20% / alpha)`, `color(srgb 0.4 0.2 0.2)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g b / 20%)`, `color(srgb 0.4 0.2 0.6 / 0.2)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) 20% g b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 20% b / alpha)`, `color(srgb 0.2 0.2 0.6 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r g 20% / alpha)`, `color(srgb 0.2 0.4 0.2 / 0.8)`); + fuzzy_test_computed_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_computed_color(`rgb(from rebeccapurple 25 g b / 25%)`, `color(srgb 0.098 0.2 0.6 / 0.25)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r 25 b / 25%)`, `color(srgb 0.4 0.098 0.6 / 0.25)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g 25 / 25%)`, `color(srgb 0.4 0.2 0.098 / 0.25)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) 25 g b / 25%)`, `color(srgb 0.098 0.4 0.6 / 0.25)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 25 b / 25%)`, `color(srgb 0.2 0.098 0.6 / 0.25)`); + fuzzy_test_computed_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_computed_color(`rgb(from rebeccapurple g b r)`, `color(srgb 0.2 0.6 0.4)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple b alpha r / g)`, `color(srgb 0.6 ${1/255} 0.4)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r r r / r)`, `color(srgb 0.4 0.4 0.4)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple alpha alpha alpha / alpha)`, `color(srgb ${1/255} ${1/255} ${1/255})`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) g b r)`, `color(srgb 0.4 0.6 0.2 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) b alpha r / g)`, `color(srgb 0.6 ${0.8/255} 0.2)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r r r / r)`, `color(srgb 0.2 0.2 0.2)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) alpha alpha alpha / alpha)`, `color(srgb ${0.8/255} ${0.8/255} ${0.8/255} / 0.8)`); + + // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax). + fuzzy_test_computed_color(`rgb(from rebeccapurple r 20% 10)`, `color(srgb 0.4 0.2 0.0392)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r 10 20%)`, `color(srgb 0.4 0.0392 0.2)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple 0% 10 10)`, `color(srgb 0 0.0392 0.0392)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 20% 10)`, `color(srgb 0.2 0.2 0.0392 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20%, 40%, 60%, 80%) r 10 20%)`, `color(srgb 0.2 0.0392 0.2 / 0.8)`); + fuzzy_test_computed_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_computed_color(`rgb(from rebeccapurple calc(r) calc(g) calc(b))`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r calc(g * 2) 10)`, `color(srgb 0.4 0.4 0.0392)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple b calc(r * .5) 10)`, `color(srgb 0.6 0.2 0.0392)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r calc(g * .5 + g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `color(srgb 0.4 0.2 0.0392)`); + fuzzy_test_computed_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)`); + 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) + + // 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)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple none none none / none)`, `color(srgb 0 0 0 / none)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g none)`, `color(srgb 0.4 0.2 0)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g none / alpha)`, `color(srgb 0.4 0.2 0)`); + fuzzy_test_computed_color(`rgb(from rebeccapurple r g b / none)`, `color(srgb 0.4 0.2 0.6 / none)`); + fuzzy_test_computed_color(`rgb(from rgb(20% 40% 60% / 80%) r g none / alpha)`, `color(srgb 0.2 0.4 0 / 0.8)`); + fuzzy_test_computed_color(`rgb(from rgb(20% 40% 60% / 80%) r g b / none)`, `color(srgb 0.2 0.4 0.6 / none)`); + fuzzy_test_computed_color(`rgb(from rgb(none none none) r g b)`, `color(srgb 0 0 0)`); + 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)`); + + + // hsl(from ...) + + // Testing no modifications. + fuzzy_test_computed_color(`hsl(from rebeccapurple h s l)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s l / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`hsl(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_computed_color(`hsl(from hsl(from rebeccapurple h s l) h s l)`, `color(srgb 0.4 0.2 0.6)`); + + + // Testing replacement with 0. + fuzzy_test_computed_color(`hsl(from rebeccapurple 0 0% 0%)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple 0deg 0% 0%)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 0 0 0 / 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s 0% / alpha)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s l / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) 0 s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) 0deg s l / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h 0% l / alpha)`, `color(srgb 0.4 0.4 0.4 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s 0% / alpha)`, `color(srgb 0 0 0 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s l / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`hsl(from rebeccapurple 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h 20% l / alpha)`, `color(srgb 0.4 0.32 0.48)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s 20% / alpha)`, `color(srgb 0.2 0.1 0.3)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s l / .25)`, `color(srgb 0.4 0.2 0.6 / 0.25)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) 25 s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) 25deg s l / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h 20% l / alpha)`, `color(srgb 0.32 0.4 0.48 / 0.8)`); + fuzzy_test_computed_color(`hsl(from rgb(20%, 40%, 60%, 80%) h s 20% / alpha)`, `color(srgb 0.1 0.2 0.3 / 0.8)`); + fuzzy_test_computed_color(`hsl(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_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 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)`); + + // 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) + + // 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)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple none none none / none)`, `color(srgb 0 0 0 / none)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s none)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s none / alpha)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple h s l / none)`, `color(srgb 0.4 0.2 0.6 / none)`); + fuzzy_test_computed_color(`hsl(from rebeccapurple none s l / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_computed_color(`hsl(from hsl(120deg 20% 50% / .5) h s none / alpha)`, `color(srgb 0 0 0 / 0.5)`); + fuzzy_test_computed_color(`hsl(from hsl(120deg 20% 50% / .5) h s l / none)`, `color(srgb 0.4 0.6 0.4 / none)`); + fuzzy_test_computed_color(`hsl(from hsl(120deg 20% 50% / .5) none s l / alpha)`, `color(srgb 0.6 0.4 0.4 / 0.5)`); + fuzzy_test_computed_color(`hsl(from hsl(none none none) h s l)`, `color(srgb 0 0 0)`); + fuzzy_test_computed_color(`hsl(from hsl(none none none / none) h s l / alpha)`, `color(srgb 0 0 0 / 0)`); + 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)`); + + // hwb(from ...) + + // Testing no modifications. + fuzzy_test_computed_color(`hwb(from rebeccapurple h w b)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`hwb(from hsl(120deg 20% 50% / .5) h w b / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`hwb(from hwb(from rebeccapurple h w b) h w b)`, `color(srgb 0.4 0.2 0.6)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`hwb(from rebeccapurple 0 0% 0%)`, `color(srgb 1 0 0)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple 0deg 0% 0%)`, `color(srgb 1 0 0)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 1 0 0 / 0)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 1 0 0 / 0)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple 0 w b / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple 0deg w b / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h 0% b / alpha)`, `color(srgb 0.3 0 0.6)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w 0% / alpha)`, `color(srgb 0.6 0.2 1)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) 0 w b / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) 0deg w b / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h 0% b / alpha)`, `color(srgb 0 0.3 0.6 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w 0% / alpha)`, `color(srgb 0.2 0.6 1 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w b / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`hwb(from rebeccapurple 25 w b / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple 25deg w b / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w 20% / alpha)`, `color(srgb 0.5 0.2 0.8)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w b / .2)`, `color(srgb 0.4 0.2 0.6 / 0.2)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) 25 w b / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) 25deg w b / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h 20% b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w 20% / alpha)`, `color(srgb 0.2 0.5 0.8 / 0.8)`); + fuzzy_test_computed_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w b / .2)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); + + // 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 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)`); + + // Testing with calc(). + fuzzy_test_computed_color(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_computed_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)`); + 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) + + // 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)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple none none none / none)`, `color(srgb 1 0 0 / none)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w none)`, `color(srgb 0.6 0.2 1)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w none / alpha)`, `color(srgb 0.6 0.2 1)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple h w b / none)`, `color(srgb 0.4 0.2 0.6 / none)`); + fuzzy_test_computed_color(`hwb(from rebeccapurple none w b / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_computed_color(`hwb(from hwb(120deg 20% 50% / .5) h w none / alpha)`, `color(srgb 0.2 1 0.2 / 0.5)`); + fuzzy_test_computed_color(`hwb(from hwb(120deg 20% 50% / .5) h w b / none)`, `color(srgb 0.2 0.5 0.2 / none)`); + fuzzy_test_computed_color(`hwb(from hwb(120deg 20% 50% / .5) none w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`); + fuzzy_test_computed_color(`hwb(from hwb(none none none) h w b)`, `color(srgb 1 0 0)`); + fuzzy_test_computed_color(`hwb(from hwb(none none none / none) h w b / alpha)`, `color(srgb 1 0 0 / 0)`); + 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)`); + + // lab() + + // Testing no modifications. + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a b)`, `lab(25 20 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a b / alpha)`, `lab(25 20 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a b / alpha)`, `lab(25 20 50 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(200 300 400 / 500%) l a b / alpha)`, `lab(100 300 400)`); + fuzzy_test_computed_color(`lab(from lab(-200 -300 -400 / -500%) l a b / alpha)`, `lab(0 -300 -400 / 0)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`lab(from lab(from lab(25 20 50) l a b) l a b)`, `lab(25 20 50)`); + + // Testing non-lab origin to see conversion. + fuzzy_test_computed_color(`lab(from color(display-p3 0 0 0) l a b / alpha)`, `lab(0 0 0)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`lab(from lab(25 20 50) 0 0 0)`, `lab(0 0 0)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) 0 0 0 / 0)`, `lab(0 0 0 / 0)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) 0 a b / alpha)`, `lab(0 20 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l 0 b / alpha)`, `lab(25 0 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a 0 / alpha)`, `lab(25 20 0)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a b / 0)`, `lab(25 20 50 / 0)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) 0 a b / alpha)`, `lab(0 20 50 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l 0 b / alpha)`, `lab(25 0 50 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a 0 / alpha)`, `lab(25 20 0 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a b / 0)`, `lab(25 20 50 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`lab(from lab(25 20 50) 35 a b / alpha)`, `lab(35 20 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l 35 b / alpha)`, `lab(25 35 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a 35 / alpha)`, `lab(25 20 35)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a b / .35)`, `lab(25 20 50 / 0.35)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) 35 a b / alpha)`, `lab(35 20 50 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l 35 b / alpha)`, `lab(25 35 50 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a 35 / alpha)`, `lab(25 20 35 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a b / .35)`, `lab(25 20 50 / 0.35)`); + fuzzy_test_computed_color(`lab(from lab(0.7 45 30 / 40%) 200 300 400 / 500)`, `lab(100 300 400)`); + fuzzy_test_computed_color(`lab(from lab(0.7 45 30 / 40%) -200 -300 -400 / -500)`, `lab(0 -300 -400 / 0)`); + + // Testing valid permutation (types match). + fuzzy_test_computed_color(`lab(from lab(25 20 50) l b a)`, `lab(25 50 20)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a a / a)`, `lab(25 20 20)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l b a)`, `lab(25 50 20 / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a a / a)`, `lab(25 20 20)`); + + // Testing with calc(). + fuzzy_test_computed_color(`lab(from lab(25 20 50) calc(l) calc(a) calc(b))`, `lab(25 20 50)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `lab(25 20 50 / 0.4)`); + 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)`); + + // 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)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a none)`, `lab(25 20 none)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a none / alpha)`, `lab(25 20 none)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50) l a b / none)`, `lab(25 20 50 / none)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a none / alpha)`, `lab(25 20 none / 0.4)`); + fuzzy_test_computed_color(`lab(from lab(25 20 50 / 40%) l a b / none)`, `lab(25 20 50 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_computed_color(`lab(from lab(none none none) l a b)`, `lab(0 0 0)`); + 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)`); + + // oklab() + + // Testing no modifications. + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a b)`, `oklab(0.25 0.2 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a b / alpha)`, `oklab(0.25 0.2 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / alpha)`, `oklab(0.25 0.2 0.5 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(2 3 4 / 500%) l a b / alpha)`, `oklab(1 3 4)`); + fuzzy_test_computed_color(`oklab(from oklab(-2 -3 -4 / -500%) l a b / alpha)`, `oklab(0 -3 -4 / 0)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`oklab(from oklab(from oklab(0.25 0.2 0.5) l a b) l a b)`, `oklab(0.25 0.2 0.5)`); + + // Testing non-oklab origin to see conversion. + fuzzy_test_computed_color(`oklab(from color(display-p3 0 0 0) l a b / alpha)`, `oklab(0 0 0)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) 0 0 0)`, `oklab(0 0 0)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) 0 0 0 / 0)`, `oklab(0 0 0 / 0)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) 0 a b / alpha)`, `oklab(0 0.2 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l 0 b / alpha)`, `oklab(0.25 0 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a 0 / alpha)`, `oklab(0.25 0.2 0)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a b / 0)`, `oklab(0.25 0.2 0.5 / 0)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) 0 a b / alpha)`, `oklab(0 0.2 0.5 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l 0 b / alpha)`, `oklab(0.25 0 0.5 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a 0 / alpha)`, `oklab(0.25 0.2 0 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / 0)`, `oklab(0.25 0.2 0.5 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) 0.35 a b / alpha)`, `oklab(0.35 0.2 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l 0.35 b / alpha)`, `oklab(0.25 0.35 0.5)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a 0.35 / alpha)`, `oklab(0.25 0.2 0.35)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a b / .35)`, `oklab(0.25 0.2 0.5 / 0.35)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) 0.35 a b / alpha)`, `oklab(0.35 0.2 0.5 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l 0.35 b / alpha)`, `oklab(0.25 0.35 0.5 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a 0.35 / alpha)`, `oklab(0.25 0.2 0.35 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / .35)`, `oklab(0.25 0.2 0.5 / 0.35)`); + fuzzy_test_computed_color(`oklab(from oklab(0.7 0.45 0.3 / 40%) 2 3 4 / 500)`, `oklab(1 3 4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.7 0.45 0.3 / 40%) -2 -3 -4 / -500)`, `oklab(0 -3 -4 / 0)`); + + // Testing valid permutation (types match). + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l b a)`, `oklab(0.25 0.5 0.2)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a a / a)`, `oklab(0.25 0.2 0.2 / 0.2)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l b a)`, `oklab(0.25 0.5 0.2 / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a a / a)`, `oklab(0.25 0.2 0.2 / 0.2)`); + + // Testing with calc(). + fuzzy_test_computed_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_computed_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_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)`); + + // 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)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a none)`, `oklab(0.25 0.2 none)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a none / alpha)`, `oklab(0.25 0.2 none)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5) l a b / none)`, `oklab(0.25 0.2 0.5 / none)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a none / alpha)`, `oklab(0.25 0.2 none / 0.4)`); + fuzzy_test_computed_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / none)`, `oklab(0.25 0.2 0.5 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_computed_color(`oklab(from oklab(none none none) l a b)`, `oklab(0 0 0)`); + 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)`); + + // lch() + + // Testing no modifications. + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c h)`, `lch(0.7 45 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c h / alpha)`, `lch(0.7 45 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c h / alpha)`, `lch(0.7 45 30 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(200 300 400 / 500%) l c h / alpha)`, `lch(100 300 40)`); + fuzzy_test_computed_color(`lch(from lch(-200 -300 -400 / -500%) l c h / alpha)`, `lch(0 0 320 / 0)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`lch(from lch(from lch(0.7 45 30) l c h) l c h)`, `lch(0.7 45 30)`); + + // Testing non-sRGB origin colors (no gamut mapping will happen since the destination is not a bounded RGB color space). + fuzzy_test_computed_color(`lch(from color(display-p3 0 0 0) l c h / alpha)`, `lch(0 0 0)`); + fuzzy_test_computed_color(`lch(from lab(0.7 45 30) l c h / alpha)`, `lch(0.7 54.08327 33.690067)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) 0 0 0)`, `lch(0 0 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) 0 0 0deg)`, `lch(0 0 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) 0 0 0 / 0)`, `lch(0 0 0 / 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) 0 0 0deg / 0)`, `lch(0 0 0 / 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) 0 c h / alpha)`, `lch(0 45 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l 0 h / alpha)`, `lch(0.7 0 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c 0 / alpha)`, `lch(0.7 45 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c 0deg / alpha)`, `lch(0.7 45 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c h / 0)`, `lch(0.7 45 30 / 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) 0 c h / alpha)`, `lch(0 45 30 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l 0 h / alpha)`, `lch(0.7 0 30 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c 0 / alpha)`, `lch(0.7 45 0 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c 0deg / alpha)`, `lch(0.7 45 0 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c h / 0)`, `lch(0.7 45 30 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) 25 c h / alpha)`, `lch(25 45 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l 25 h / alpha)`, `lch(0.7 25 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c 25 / alpha)`, `lch(0.7 45 25)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c 25deg / alpha)`, `lch(0.7 45 25)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c h / .25)`, `lch(0.7 45 30 / 0.25)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) 25 c h / alpha)`, `lch(25 45 30 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l 25 h / alpha)`, `lch(0.7 25 30 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c 25 / alpha)`, `lch(0.7 45 25 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c 25deg / alpha)`, `lch(0.7 45 25 / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c h / .25)`, `lch(0.7 45 30 / 0.25)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) 200 300 400 / 500)`, `lch(100 300 40)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) -200 -300 -400 / -500)`, `lch(0 0 320 / 0)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) 50 120 400deg / 500)`, `lch(50 120 40)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) 50 120 -400deg / -500)`, `lch(50 120 320 / 0)`); + + // Testing valid permutation (types match). + // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>. + fuzzy_test_computed_color(`lch(from lch(.7 45 30) l c c / alpha)`, `lch(0.7 45 45)`); + fuzzy_test_computed_color(`lch(from lch(.7 45 30 / 40%) l c c / alpha)`, `lch(0.7 45 45 / 0.4)`); + + // Testing with calc(). + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) calc(l) calc(c) calc(h))`, `lch(0.7 45 30)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `lch(0.7 45 30 / 0.4)`); + 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)`); + + // 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)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c none)`, `lch(0.7 45 none)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c none / alpha)`, `lch(0.7 45 none)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30) l c h / none)`, `lch(0.7 45 30 / none)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c none / alpha)`, `lch(0.7 45 none / 0.4)`); + fuzzy_test_computed_color(`lch(from lch(0.7 45 30 / 40%) l c h / none)`, `lch(0.7 45 30 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_computed_color(`lch(from lch(none none none) l c h)`, `lch(0 0 0)`); + 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)`); + + // oklch() + + // Testing no modifications. + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c h)`, `oklch(0.7 0.45 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c h / alpha)`, `oklch(0.7 0.45 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / alpha)`, `oklch(0.7 0.45 30 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(2 3 400 / 500%) l c h / alpha)`, `oklch(1 3 40)`); + fuzzy_test_computed_color(`oklch(from oklch(-2 -3 -400 / -500%) l c h / alpha)`, `oklch(0 0 320 / 0)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`oklch(from oklch(from oklch(0.7 0.45 30) l c h) l c h)`, `oklch(0.7 0.45 30)`); + + // Testing non-sRGB origin colors (no gamut mapping will happen since the destination is not a bounded RGB color space). + fuzzy_test_computed_color(`oklch(from color(display-p3 0 0 0) l c h / alpha)`, `oklch(0 0 0)`); + // TODO: redo conversion with oklab(0.7 0.45 0.3) + fuzzy_test_computed_color(`oklch(from oklab(0.7 45 30) l c h / alpha)`, `oklch(0.7 54.08327 33.690067)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) 0 0 0)`, `oklch(0 0 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) 0 0 0deg)`, `oklch(0 0 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) 0 0 0 / 0)`, `oklch(0 0 0 / 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) 0 0 0deg / 0)`, `oklch(0 0 0 / 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) 0 c h / alpha)`, `oklch(0 0.45 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l 0 h / alpha)`, `oklch(0.7 0 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c 0 / alpha)`, `oklch(0.7 0.45 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c 0deg / alpha)`, `oklch(0.7 0.45 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c h / 0)`, `oklch(0.7 0.45 30 / 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0 c h / alpha)`, `oklch(0 0.45 30 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l 0 h / alpha)`, `oklch(0.7 0 30 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 0 / alpha)`, `oklch(0.7 0.45 0 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 0deg / alpha)`, `oklch(0.7 0.45 0 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / 0)`, `oklch(0.7 0.45 30 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) 0.25 c h / alpha)`, `oklch(0.25 0.45 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l 0.25 h / alpha)`, `oklch(0.7 0.25 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c 25 / alpha)`, `oklch(0.7 0.45 25)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c 25deg / alpha)`, `oklch(0.7 0.45 25)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c h / .25)`, `oklch(0.7 0.45 30 / 0.25)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0.25 c h / alpha)`, `oklch(0.25 0.45 30 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l 0.25 h / alpha)`, `oklch(0.7 0.25 30 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 25 / alpha)`, `oklch(0.7 0.45 25 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 25deg / alpha)`, `oklch(0.7 0.45 25 / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / .25)`, `oklch(0.7 0.45 30 / 0.25)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) 2 3 400 / 500)`, `oklch(1 3 40)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) -2 -3 -400 / -500)`, `oklch(0 0 320 / 0)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0.5 1.2 400deg / 500)`, `oklch(0.5 1.2 40)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0.5 1.2 -400deg / -500)`, `oklch(0.5 1.2 320 / 0)`); + + // Testing valid permutation (types match). + // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>. + fuzzy_test_computed_color(`oklch(from oklch(.7 0.45 30) l c c / alpha)`, `oklch(0.7 0.45 0.45)`); + fuzzy_test_computed_color(`oklch(from oklch(.7 0.45 30 / 40%) l c c / alpha)`, `oklch(0.7 0.45 0.45 / 0.4)`); + + // Testing with calc(). + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) calc(l) calc(c) calc(h))`, `oklch(0.7 0.45 30)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `oklch(0.7 0.45 30 / 0.4)`); + 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)`); + + // 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)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c none)`, `oklch(0.7 0.45 none)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c none / alpha)`, `oklch(0.7 0.45 none)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30) l c h / none)`, `oklch(0.7 0.45 30 / none)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c none / alpha)`, `oklch(0.7 0.45 none / 0.4)`); + fuzzy_test_computed_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / none)`, `oklch(0.7 0.45 30 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_computed_color(`oklch(from oklch(none none none) l c h)`, `oklch(0 0 0)`); + 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)`); + + for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) { + // Testing no modifications. + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0)`, `color(${colorSpace} 0 0 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0 / 0)`, `color(${colorSpace} 0 0 0 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 g b / alpha)`, `color(${colorSpace} 0 0.5 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0 b / alpha)`, `color(${colorSpace} 0.7 0 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0 / alpha)`, `color(${colorSpace} 0.7 0.5 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 0 g b / alpha)`, `color(${colorSpace} 0 0.5 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 0 b / alpha)`, `color(${colorSpace} 0.7 0 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 0 / alpha)`, `color(${colorSpace} 0.7 0.5 0 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 0)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0.2 g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 20% g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0.2 b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 20% b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0.2 / alpha)`, `color(${colorSpace} 0.7 0.5 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 20% / alpha)`, `color(${colorSpace} 0.7 0.5 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0.2)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 20%)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 0.2 g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 20% g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 0.2 b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 20% b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 0.2 / alpha)`, `color(${colorSpace} 0.7 0.5 0.2 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 20% / alpha)`, `color(${colorSpace} 0.7 0.5 0.2 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 0.2)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 20%)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 2 3 4)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 2 3 4 / 5)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -2 -3 -4)`, `color(${colorSpace} -2 -3 -4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -2 -3 -4 / -5)`, `color(${colorSpace} -2 -3 -4 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 200% 300% 400%)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 200% 300% 400% / 500%)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -200% -300% -400%)`, `color(${colorSpace} -2 -3 -4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -200% -300% -400% / -500%)`, `color(${colorSpace} -2 -3 -4 / 0)`); + + // Testing valid permutation (types match). + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} g b r)`, `color(${colorSpace} 0.5 0.3 0.7)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} b alpha r / g)`, `color(${colorSpace} 0.3 1 0.7 / 0.5)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r r r / r)`, `color(${colorSpace} 0.7 0.7 0.7 / 0.7)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} alpha alpha alpha / alpha)`, `color(${colorSpace} 1 1 1)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} g b r)`, `color(${colorSpace} 0.5 0.3 0.7 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} b alpha r / g)`, `color(${colorSpace} 0.3 0.4 0.7 / 0.5)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r r r / r)`, `color(${colorSpace} 0.7 0.7 0.7 / 0.7)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} alpha alpha alpha / alpha)`, `color(${colorSpace} 0.4 0.4 0.4 / 0.4)`); + + // Testing out of gamut components. + fuzzy_test_computed_color(`color(from color(${colorSpace} 1.7 1.5 1.3) ${colorSpace} r g b)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 1.7 1.5 1.3) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 1.7 1.5 1.3 / 140%) ${colorSpace} r g b)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 1.7 1.5 1.3 / 140%) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3) ${colorSpace} r g b)`, `color(${colorSpace} -0.7 -0.5 -0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3) ${colorSpace} r g b / alpha)`, `color(${colorSpace} -0.7 -0.5 -0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3 / -40%) ${colorSpace} r g b)`, `color(${colorSpace} -0.7 -0.5 -0.3 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3 / -40%) ${colorSpace} r g b / alpha)`, `color(${colorSpace} -0.7 -0.5 -0.3 / 0)`); + + // Testing with calc(). + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r) calc(g) calc(b))`, `color(${colorSpace} 0.7 0.5 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} calc(r) calc(g) calc(b) / calc(alpha))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); + 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)`); + + // 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)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g none)`, `color(${colorSpace} 0.7 0.5 none)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g none / alpha)`, `color(${colorSpace} 0.7 0.5 none)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / none)`, `color(${colorSpace} 0.7 0.5 0.3 / none)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g none / alpha)`, `color(${colorSpace} 0.7 0.5 none / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / none)`, `color(${colorSpace} 0.7 0.5 0.3 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_computed_color(`color(from color(${colorSpace} none none none) ${colorSpace} r g b)`, `color(${colorSpace} 0 0 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} none none none / none) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0 0 0 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 none 0.3) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0 0.3)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / none) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + } + + for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { + const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; + + // Testing no modifications. + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 -20.5 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); + + // Test nesting relative colors. + fuzzy_test_computed_color(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 -20.5 100)`); + + // Testing replacement with 0. + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0)`, `color(${resultColorSpace} 0 0 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0 / 0)`, `color(${resultColorSpace} 0 0 0 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 y z / alpha)`, `color(${resultColorSpace} 0 -20.5 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0 z / alpha)`, `color(${resultColorSpace} 7 0 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0 / alpha)`, `color(${resultColorSpace} 7 -20.5 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0 y z / alpha)`, `color(${resultColorSpace} 0 -20.5 100 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0 z / alpha)`, `color(${resultColorSpace} 7 0 100 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0 / alpha)`, `color(${resultColorSpace} 7 -20.5 0 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / 0)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0.2 y z / alpha)`, `color(${resultColorSpace} 0.2 -20.5 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0.2 z / alpha)`, `color(${resultColorSpace} 7 0.2 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0.2 / alpha)`, `color(${resultColorSpace} 7 -20.5 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0.2)`, `color(${resultColorSpace} 7 -20.5 100 / 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 20%)`, `color(${resultColorSpace} 7 -20.5 100 / 0.2)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0.2 y z / alpha)`, `color(${resultColorSpace} 0.2 -20.5 100 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0.2 z / alpha)`, `color(${resultColorSpace} 7 0.2 100 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0.2 / alpha)`, `color(${resultColorSpace} 7 -20.5 0.2 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / 0.2)`, `color(${resultColorSpace} 7 -20.5 100 / 0.2)`); + + // Testing valid permutation (types match). + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} y z x)`, `color(${resultColorSpace} -20.5 100 7)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x x x / x)`, `color(${resultColorSpace} 7 7 7)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} y z x)`, `color(${resultColorSpace} -20.5 100 7 / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x x x / x)`, `color(${resultColorSpace} 7 7 7)`); + + // Testing with calc(). + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x) calc(y) calc(z))`, `color(${resultColorSpace} 7 -20.5 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} calc(x) calc(y) calc(z) / calc(alpha))`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); + 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)`); + + // 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)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y none)`, `color(${resultColorSpace} 7 -20.5 none)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y none / alpha)`, `color(${resultColorSpace} 7 -20.5 none)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / none)`, `color(${resultColorSpace} 7 -20.5 100 / none)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y none / alpha)`, `color(${resultColorSpace} 7 -20.5 none / 0.4)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / none)`, `color(${resultColorSpace} 7 -20.5 100 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_computed_color(`color(from color(${colorSpace} none none none) ${colorSpace} x y z)`, `color(${resultColorSpace} 0 0 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} none none none / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 0 0 0 / 0)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 none 100) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 0 100)`); + fuzzy_test_computed_color(`color(from color(${colorSpace} 7 -20.5 100 / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + } + + // Test origin colors with different color spaces, going both to and from srgb. + fuzzy_test_computed_color(`color(from color(srgb-linear 0.25 0.5 0.75) srgb r g b)`, `color(srgb 0.537121 0.735394 0.880852)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) srgb-linear r g b)`, `color(srgb-linear 0.050864 0.213993 0.522484)`, 0.001); + fuzzy_test_computed_color(`color(from color(display-p3 0.25 0.5 0.75) srgb r g b)`, `color(srgb 0.123874 0.507355 0.771198)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) display-p3 r g b)`, `color(display-p3 0.313084 0.494041 0.730118)`, 0.001); + fuzzy_test_computed_color(`color(from color(a98-rgb 0.25 0.5 0.75) srgb r g b)`, `color(srgb -0.153808 0.503925 0.763874)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) a98-rgb r g b)`, `color(a98-rgb 0.346851 0.496124 0.736271)`, 0.001); + fuzzy_test_computed_color(`color(from color(prophoto-rgb 0.25 0.5 0.75) srgb r g b)`, `color(srgb -0.510605 0.612396 0.825333)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) prophoto-rgb r g b)`, `color(prophoto-rgb 0.374905 0.416401 0.663692)`, 0.001); + fuzzy_test_computed_color(`color(from color(rec2020 0.25 0.5 0.75) srgb r g b)`, `color(srgb -0.280102 0.565536 0.79958)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) rec2020 r g b)`, `color(rec2020 0.331976 0.440887 0.696358)`, 0.001); + fuzzy_test_computed_color(`color(from color(xyz-d50 0.25 0.5 0.75) srgb r g b)`, `color(srgb -0.660065 0.874863 0.981117)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) xyz-d50 x y z)`, `color(xyz-d50 0.179349 0.196389 0.394585)`, 0.001); + fuzzy_test_computed_color(`color(from color(xyz-d65 0.25 0.5 0.75) srgb r g b)`, `color(srgb -0.611881 0.868732 0.856899)`, 0.001); + fuzzy_test_computed_color(`color(from color(srgb 0.25 0.5 0.75) xyz-d65 x y z)`, `color(xyz-d65 0.191791 0.201562 0.523057)`, 0.001); + fuzzy_test_computed_color(`lab(from color(srgb 0.25 0.5 0.75) l a b)`, `lab(51.4265 -5.21401 -40.1491)`, 0.02); // Larger values means larger epsilon. + fuzzy_test_computed_color(`color(from lab(67.5345 -8.6911 -41.6019) srgb r g b)`, `color(srgb 0.382744 0.672806 0.938545)`, 0.001); + fuzzy_test_computed_color(`oklab(from color(srgb 0.25 0.5 0.75) l a b)`, `oklab(0.585502 -0.0393846 -0.111503)`, 0.001); + fuzzy_test_computed_color(`color(from oklab(72.322% -0.0465 -0.1150) srgb r g b)`, `color(srgb 0.382504 0.672783 0.938919)`, 0.001); + fuzzy_test_computed_color(`lch(from color(srgb 0.25 0.5 0.75) l c h)`, `lch(51.4265 40.4863 262.601)`, 0.02); // Larger values means larger epsilon. + fuzzy_test_computed_color(`color(from lch(67.5345% 42.5 258.2) srgb r g b)`, `color(srgb 0.382744 0.672806 0.938545)`, 0.001); + 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); + + // 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. + fuzzy_test_computed_color(`rgb(from var(--bg-color) r g b / 80%)`, `color(srgb 0 0 1 / 0.8)`, 0.02); + fuzzy_test_computed_color(`lch(from var(--color) calc(l / 2) c h)`, `lch(23.14 67.99 134.39)`, 0.02); + fuzzy_test_computed_color(`rgb(from var(--color) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11))`, `color(srgb 0.3 0.3 0.3)`, 0.02); + fuzzy_test_computed_color(`lch(from var(--color) l 0 h)`, `lch(46.28 0 134.39)`, 0.02); + fuzzy_test_computed_color(`rgb(from indianred 255 g b)`, `color(srgb 1 0.36 0.36)`, 0.02); + fuzzy_test_computed_color(`hsl(from var(--accent) calc(h + 180) s l)`, `color(srgb 0.7 0.13 0.16)`, 0.02); + fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / 100%)`, `lab(62.75 52.46 -34.12)`, 0.02); + fuzzy_test_computed_color(`lab(from var(--mycolor) l a b / calc(alpha * 0.8))`, `lab(62.75 52.46 -34.12 / 0.8)`, 0.02); + fuzzy_test_computed_color(`lab(from var(--mycolor) l 0 0)`, `lab(62.75 0 0)`, 0.02); + fuzzy_test_computed_color(`lch(from peru calc(l * 0.8) c h)`, `lch(49.80 54 63.68)`, 0.02); + fuzzy_test_computed_color(`LCH(from var(--accent) l c calc(h + 180))`, `lch(65.49 39.45 10.11)`, 0.02); + fuzzy_test_computed_color(`lch(from var(--mycolor) l 0 h)`, `lch(62.75 0 326.96)`, 0.02); + fuzzy_test_computed_color(`var(--mygray)`, `lch(62.75 0 326.96)`, 0.02); + fuzzy_test_computed_color(`lch(from var(--mygray) l 30 h)`, `lch(62.75 30 326.96)`, 0.02); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed-rgb.html b/testing/web-platform/tests/css/css-color/parsing/color-computed-rgb.html new file mode 100644 index 0000000000..1f62567f5c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed-rgb.html @@ -0,0 +1,122 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using RGB notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + :root { + --high: 500; + --negative: -100; + } + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +tests = [ + ["rgb(none none none)", "rgb(0, 0, 0)"], + ["rgb(none none none / none)", "rgba(0, 0, 0, 0)"], + ["rgb(128 none none)", "rgb(128, 0, 0)"], + ["rgb(128 none none / none)", "rgba(128, 0, 0, 0)"], + ["rgb(none none none / .5)", "rgba(0, 0, 0, 0.5)"], + ["rgb(20% none none)", "rgb(51, 0, 0)"], + ["rgb(20% none none / none)", "rgba(51, 0, 0, 0)"], + ["rgb(none none none / 50%)", "rgba(0, 0, 0, 0.5)"], + ["rgba(none none none)", "rgb(0, 0, 0)"], + ["rgba(none none none / none)", "rgba(0, 0, 0, 0)"], + ["rgba(128 none none)", "rgb(128, 0, 0)"], + ["rgba(128 none none / none)", "rgba(128, 0, 0, 0)"], + ["rgba(none none none / .5)", "rgba(0, 0, 0, 0.5)"], + ["rgba(20% none none)", "rgb(51, 0, 0)"], + ["rgba(20% none none / none)", "rgba(51, 0, 0, 0)"], + ["rgba(none none none / 50%)", "rgba(0, 0, 0, 0.5)"], + + ["rgb(2.5, 3.4, 4.6)", ["rgb(3, 3, 5)", "rgb(2.5, 3.4, 4.6)"], "Tests that RGB channels are rounded appropriately"], + + ["rgb(00, 51, 102)", "rgb(0, 51, 102)", "Valid numbers should be parsed"], + ["r\\gb(00, 51, 102)", "rgb(0, 51, 102)", "Correct escape sequences should still parse"], + ["r\\67 b(00, 51, 102)", "rgb(0, 51, 102)", "Correct escape sequences should still parse"], + ["RGB(153, 204, 255)", "rgb(153, 204, 255)", "Capitalization should not affect parsing"], + ["rgB(0, 0, 0)", "rgb(0, 0, 0)", "Capitalization should not affect parsing"], + ["rgB(0, 51, 255)", "rgb(0, 51, 255)", "Capitalization should not affect parsing"], + ["rgb(0,51,255)", "rgb(0, 51, 255)", "Lack of whitespace should not affect parsing"], + ["rgb(0\t, 51 ,255)", "rgb(0, 51, 255)", "Whitespace should not affect parsing"], + ["rgb(/* R */0, /* G */51, /* B */255)", "rgb(0, 51, 255)", "Comments should be allowed within function"], + ["rgb(-51, 306, 0)", "rgb(0, 255, 0)", "Invalid values should be clamped to 0 and 255 respectively"], + ["rgb(42%, 3%, 50%)", "rgb(107, 8, 128)", "Valid percentages should be parsed"], + ["RGB(100%, 100%, 100%)", "rgb(255, 255, 255)", "Capitalization should not affect parsing"], + ["rgB(0%, 0%, 0%)", "rgb(0, 0, 0)", "Capitalization should not affect parsing"], + ["rgB(10%, 20%, 30%)", "rgb(26, 51, 77)", "Capitalization should not affect parsing"], + ["rgb(10%,20%,30%)", "rgb(26, 51, 77)", "Whitespace should not affect parsing"], + ["rgb(10%\t, 20% ,30%)", "rgb(26, 51, 77)", "Whitespace should not affect parsing"], + ["rgb(/* R */ 10%, /* G */ 20%, /* B */ 30%)", "rgb(26, 51, 77)", "Comments should not affect parsing"], + ["rgb(-12%, 110%, 1400%)", "rgb(0, 255, 255)", "Invalid values should be clamped to 0 and 255 respectively"], + ["rgb(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "RGB and RGBA are synonyms"], + ["rgb(0%, 0%, 0%, 0%)", "rgba(0, 0, 0, 0)", "RGB and RGBA are synonyms"], + ["rgb(0%, 0%, 0%, 0)", "rgba(0, 0, 0, 0)", "RGB and RGBA are synonyms"], + ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0)", "Valid numbers should be parsed"], + ["rgba(204, 0, 102, 0.3)", "rgba(204, 0, 102, 0.3)", "Valid numbers should be parsed"], + ["RGBA(255, 255, 255, 0)", "rgba(255, 255, 255, 0)", "Capitalization should not affect parsing"], + ["rgBA(0, 51, 255, 1)", "rgb(0, 51, 255)", "Capitalization should not affect parsing"], + ["rgba(0, 51, 255, 1.1)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(0, 51, 255, 37)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(0, 51, 255, 0.42)", "rgba(0, 51, 255, 0.42)", "Valid numbers should be parsed"], + ["rgba(0, 51, 255, 0)", "rgba(0, 51, 255, 0)", "Valid numbers should be parsed"], + ["rgba(0, 51, 255, -0.1)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(0, 51, 255, -139)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["RGBA(100%, 100%, 100%, 0)", "rgba(255, 255, 255, 0)", "Capitalization should not affect parsing"], + ["rgba(42%, 3%, 50%, 0.3)", "rgba(107, 8, 128, 0.3)", "Valid percentages should be parsed"], + ["rgBA(0%, 20%, 100%, 1)", "rgb(0, 51, 255)", "Capitalization should not affect parsing"], + ["rgba(0%, 20%, 100%, 1.1)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(0%, 20%, 100%, 37)", "rgb(0, 51, 255)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(0%, 20%, 100%, 0.42)", "rgba(0, 51, 255, 0.42)", "Valid percentages should be parsed"], + ["rgba(0%, 20%, 100%, 0)", "rgba(0, 51, 255, 0)", "Valid percentages should be parsed"], + ["rgba(0%, 20%, 100%, -0.1)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(0%, 20%, 100%, -139)", "rgba(0, 51, 255, 0)", "Invalid alpha values should be clamped to 0 and 1 respectively"], + ["rgba(255, 255, 255, 0%)", "rgba(255, 255, 255, 0)", "Percent alpha values are accepted in rgb/rgba"], + ["rgba(0%, 0%, 0%, 0%)", "rgba(0, 0, 0, 0)", "Percent alpha values are accepted in rgb/rgba"], + ["rgba(0%, 0%, 0%)", "rgb(0, 0, 0)", "RGB and RGBA are synonyms"], + ["rgba(0, 0, 0)", "rgb(0, 0, 0)", "RGB and RGBA are synonyms"], + + // rgb are in the range [0, 255], alpha is in the range [0, 1]. + // calc(infinity) resolves to the upper bound while calc(-infinity) and calc(NaN) resolves the lower bound. + // See: https://github.com/w3c/csswg-drafts/issues/8629 + ["rgb(calc(infinity), 0, 0)", "rgb(255, 0, 0)", "Red channel resolves positive infinity to 255"], + ["rgb(0, calc(infinity), 0)", "rgb(0, 255, 0)", "Green channel resolves positive infinity to 255"], + ["rgb(0, 0, calc(infinity))", "rgb(0, 0, 255)", "Blue channel resolves positive infinity to 255"], + ["rgba(0, 0, 0, calc(infinity))", "rgb(0, 0, 0)", "Alpha channel resolves positive infinity to fully opaque"], + ["rgb(calc(-infinity), 0, 0)", "rgb(0, 0, 0)", "Red channel resolves negative infinity to zero"], + ["rgb(0, calc(-infinity), 0)", "rgb(0, 0, 0)", "Green channel resolves negative infinity to zero"], + ["rgb(0, 0, calc(-infinity))", "rgb(0, 0, 0)", "Blue channel resolves negative infinity to zero"], + ["rgba(0, 0, 0, calc(-infinity))", "rgba(0, 0, 0, 0)", "Alpha channel resolves negative infinity to fully transparent"], + ["rgb(calc(NaN), 0, 0)", "rgb(0, 0, 0)", "Red channel resolves NaN to zero"], + ["rgb(0, calc(NaN), 0)", "rgb(0, 0, 0)", "Green channel resolves NaN to zero"], + ["rgb(0, 0, calc(NaN))", "rgb(0, 0, 0)", "Blue channel resolves NaN to zero"], + ["rgba(0, 0, 0, calc(NaN))", "rgba(0, 0, 0, 0)", "Alpha channel resolves NaN to zero"], + ["rgb(calc(0 / 0), 0, 0)", "rgb(0, 0, 0)", "Red channel resolves NaN equivalent calc statements to zero"], + ["rgb(0, calc(0 / 0), 0)", "rgb(0, 0, 0)", "Green channel resolves NaN equivalent calc statements to zero"], + ["rgb(0, 0, calc(0 / 0))", "rgb(0, 0, 0)", "Blue channel resolves NaN equivalent calc statements to zero"], + ["rgba(0, 0, 0, calc(0 / 0))", "rgba(0, 0, 0, 0)", "Alpha channel resolves NaN equivalent calc statements to zero"], + + ["rgb(var(--high), 0, 0)", "rgb(255, 0, 0)", "Variables above 255 get clamped to 255."], + ["rgb(var(--negative), 64, 128)", "rgb(0, 64, 128)", "Variables below 0 get clamped to 0."], +]; + +for (const test of tests) { + test_computed_value("color", test[0], test[1], test[2] ? `[${test[2]}]` : undefined); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-computed.html b/testing/web-platform/tests/css/css-color/parsing/color-computed.html new file mode 100644 index 0000000000..8aa2216fbd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-computed.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 3: getComputedStyle().color</title> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#foreground"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="container"> + <div id="target"></div> +</div> +<style> + #container { + color: rgb(255, 0, 0); + } +</style> +<script> +test_computed_value("color", "currentcolor", "rgb(255, 0, 0)"); +test_computed_value("color", "transparent", "rgba(0, 0, 0, 0)"); +test_computed_value("color", "red", "rgb(255, 0, 0)"); +test_computed_value("color", "magenta", "rgb(255, 0, 255)"); +test_computed_value("color", "#234", "rgb(34, 51, 68)"); +test_computed_value("color", "#FEDCBA", "rgb(254, 220, 186)"); +test_computed_value("color", "rgb(2, 3, 4)"); +test_computed_value("color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)"); +test_computed_value("color", "rgba(2, 3, 4, 0.5)"); +test_computed_value("color", "rgba(2, 3, 4, 50%)", "rgba(2, 3, 4, 0.5)"); +test_computed_value("color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)"); +test_computed_value("color", "hsla(120, 100%, 50%, 0.25)", "rgba(0, 255, 0, 0.25)"); +test_computed_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)"); +test_computed_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)"); +test_computed_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)"); +test_computed_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-contrast-function.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-contrast-function.html new file mode 100644 index 0000000000..1ac9792691 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-contrast-function.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 6: Parsing and serialization of colors using invalid color-contrast() function syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#colorcontrast"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#resolving-contrast"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#serial-color-contrast"> +<meta name="assert" content="invalid color-contrast() values fail to parse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + test_invalid_value('color', `color-contrast(white vs red)`); + test_invalid_value('color', `color-contrast(white vs red,)`); + test_invalid_value('color', `color-contrast(white vs )`); + test_invalid_value('color', `color-contrast(white)`); + test_invalid_value('color', `color-contrast(white vs red green)`); + test_invalid_value('color', `color-contrast(white vs red, green to)`); + test_invalid_value('color', `color-contrast(white vs red, green to invalid)`); + test_invalid_value('color', `color-contrast(white vs red to AA)`); + test_invalid_value('color', `color-contrast(white vs red, green white)`); + test_invalid_value('color', `color-contrast(white vs red, green to AA white)`); +</script> +</body> +</html> 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 new file mode 100644 index 0000000000..5a39d42c2d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-function.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid color() function syntax</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-function"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-function-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-color-function-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) { + 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)`); + test_invalid_value("color", `color(${colorSpace} 0% 0 0 10%)`); + test_invalid_value("color", `color(${colorSpace} 0% 0 0deg)`); + test_invalid_value("color", `color(${colorSpace} 0% 0% 0deg)`); + test_invalid_value("color", `color(${colorSpace} 40% 0 0deg)`); + // Missing parameters should not parse + test_invalid_value("color", `color(${colorSpace} 50% -200)`); + test_invalid_value("color", `color(${colorSpace} 50%)`); + test_invalid_value("color", `color(${colorSpace})`); + test_invalid_value("color", `color(${colorSpace} 50% -200 / 0.5)`); + test_invalid_value("color", `color(${colorSpace} 50% / 0.5)`); + test_invalid_value("color", `color(${colorSpace} / 0.5)`); +} + +for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { + 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)`); + test_invalid_value("color", `color(${colorSpace} 0% 0 0 10%)`); + test_invalid_value("color", `color(${colorSpace} 0% 0 0deg)`); + test_invalid_value("color", `color(${colorSpace} 0% 0% 0deg)`); + test_invalid_value("color", `color(${colorSpace} 40% 0 0deg)`); + // Missing parameters should not parse + test_invalid_value("color", `color(${colorSpace} 1 1)`); + test_invalid_value("color", `color(${colorSpace} 1)`); + test_invalid_value("color", `color(${colorSpace})`); + test_invalid_value("color", `color(${colorSpace} 1 1 / .5)`); + test_invalid_value("color", `color(${colorSpace} 1 / 0.5)`); + test_invalid_value("color", `color(${colorSpace} / 50%)`); +} + +test_invalid_value("color", "color()"); // Empty +test_invalid_value("color", "color(banana 1 1 1)"); // Bad color space +test_invalid_value("color", "color(displayp3 1 1 1)"); // Bad Display P3 color space +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 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 +</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 new file mode 100644 index 0000000000..40299644bf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-color-mix-function.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Parsing and serialization of colors using invalid color-mix() function syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-color-mix"> +<meta name="assert" content="invalid color-mix() values fail to parse for all color interpolation methods"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) -10%, hsl(30deg 30% 40%))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 150%, hsl(30deg 30% 40%))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% 40%) -10%, hsl(30deg 30% 40% 80%))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% 40%) 150%, hsl(30deg 30% 40% 80%))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% 40%) 0%, hsl(30deg 30% 40% 80%) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in hsl hue, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // `hue` keyword without a specified method. + test_invalid_value(`color`, `color-mix(in hsl shorter, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Specified hue method without trailing `hue` keyword. + test_invalid_value(`color`, `color-mix(in hsl foo, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Trailing identifier after color space that is not a hue method. + test_invalid_value(`color`, `color-mix(in hsl hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Missing comma after interpolation method. + test_invalid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) hsl(30deg 30% 40%))`); // Missing comma between colors. + test_invalid_value(`color`, `color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%), in hsl)`); // Interpolation method not at the beginning. + test_invalid_value(`color`, `color-mix(hsl(120deg 10% 20%), hsl(30deg 30% 40%))`); // Missing interpolation method. + + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) -10%, hwb(30deg 30% 40%))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 150%, hwb(30deg 30% 40%))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% 40%) -10%, hwb(30deg 30% 40% 80%))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% 40%) 150%, hwb(30deg 30% 40% 80%))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% 40%) 0%, hwb(30deg 30% 40% 80%) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in hwb hue, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // `hue` keyword without a specified method. + test_invalid_value(`color`, `color-mix(in hwb shorter, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Specified hue method without trailing `hue` keyword. + test_invalid_value(`color`, `color-mix(in hwb foo, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Trailing identifier after color space that is not a hue method. + test_invalid_value(`color`, `color-mix(in hwb hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Missing comma after interpolation method. + test_invalid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) hwb(30deg 30% 40%))`); // Missing comma between colors. + test_invalid_value(`color`, `color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%), in hwb)`); // Interpolation method not at the beginning. + test_invalid_value(`color`, `color-mix(hwb(120deg 10% 20%), hwb(30deg 30% 40%))`); // Missing interpolation method. + test_invalid_value(`color`, `color-mix(in srgb, red, blue blue)`); // Too many parameters. + + for (const colorSpace of [ "lch", "oklch" ]) { + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) -10%, ${colorSpace}(50% 60 70deg))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) 150%, ${colorSpace}(50% 60 70deg))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) 0%, ${colorSpace}(50% 60 70deg) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) -10%, ${colorSpace}(50% 60 70deg / .8))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 150%, ${colorSpace}(50% 60 70deg / .8))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg / .4) 0%, ${colorSpace}(50% 60 70deg / .8) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in ${colorSpace} hue, ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // `hue` keyword without a specified method. + test_invalid_value(`color`, `color-mix(in ${colorSpace} shorter, ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Specified hue method without trailing `hue` keyword. + test_invalid_value(`color`, `color-mix(in ${colorSpace} foo, ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Trailing identifier after color space that is not a hue method. + test_invalid_value(`color`, `color-mix(in ${colorSpace} ${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Missing comma after interpolation method. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30deg) ${colorSpace}(50% 60 70deg))`); // Missing comma between colors. + test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg), in ${colorSpace})`); // Interpolation method not at the beginning. + test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30deg), ${colorSpace}(50% 60 70deg))`); // Missing interpolation method. + } + + for (const colorSpace of [ "lab", "oklab" ]) { + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) -10%, ${colorSpace}(50% 60 70))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) 150%, ${colorSpace}(50% 60 70))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) 0%, ${colorSpace}(50% 60 70) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) -10%, ${colorSpace}(50% 60 70 / .8))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 150%, ${colorSpace}(50% 60 70 / .8))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30 / .4) 0%, ${colorSpace}(50% 60 70 / .8) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in ${colorSpace} longer hue, ${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Hue modifier on a non-polar color space. + test_invalid_value(`color`, `color-mix(in ${colorSpace} ${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70))`); // Missing comma after interpolation method. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, ${colorSpace}(10% 20 30) ${colorSpace}(50% 60 70))`); // Missing comma between colors. + test_invalid_value(`color`, `color-mix(${colorSpace}(10% 20 30), ${colorSpace}(50% 60 70), in ${colorSpace})`); // Interpolation method not at the beginning. + 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" ]) { + 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%. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) -10%, color(${colorSpace} .5 .6 .7 / .8))`); // Percentages less than 0 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 150%, color(${colorSpace} .5 .6 .7 / .8))`); // Percentages greater than 100 are not valid. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8) 0%)`); // Sum of percengates cannot be 0%. + test_invalid_value(`color`, `color-mix(in ${colorSpace} longer hue, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Hue modifier on a non-polar color space. + test_invalid_value(`color`, `color-mix(in ${colorSpace} color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Missing comma after interpolation method. + test_invalid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) color(${colorSpace} .5 .6 .7))`); // Missing comma between colors. + test_invalid_value(`color`, `color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7), in ${colorSpace})`); // Interpolation method not at the beginning. + test_invalid_value(`color`, `color-mix(color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7))`); // Missing interpolation method. + } +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-hex-color.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-hex-color.html new file mode 100644 index 0000000000..f879f334a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-hex-color.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid hex color notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#hex-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +tests = [ + ["#", "Should not parse invalid hex"], + ["#f", "Should not parse invalid hex"], + ["#ff", "Should not parse invalid hex"], + ["#ffg", "Should not parse invalid hex"], + ["#fffg", "Should not parse invalid hex"], + ["#fffff", "Should not parse invalid hex"], + ["#fffffg", "Should not parse invalid hex"], + ["#fffffff", "Should not parse invalid hex"], + ["#fffffffg", "Should not parse invalid hex"], + ["#fffffffff", "Should not parse invalid hex"], +]; + +for (const test of tests) { + test_invalid_value("color", test[0]); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-hsl.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-hsl.html new file mode 100644 index 0000000000..10967588bd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-hsl.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid HSL notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +tests = [ + ["hsl(none, none, none)", "The none keyword is invalid in legacy color syntax"], + ["hsla(none, none, none, none)", "The none keyword is invalid in legacy color syntax"], + ["hsl(none, 100%, 50%)", "The none keyword is invalid in legacy color syntax"], + ["hsla(120, 100%, 50%, none)", "The none keyword is invalid in legacy color syntax"], + + ["hsl(10, 50%, 0)", "The second and third parameters of hsl/hsla must be a percent in legacy color syntax"], + ["hsl(50%, 50%, 0%)", "The first parameter of hsl/hsla must be a number or angle"], + ["hsl(0, 0% 0%)", "Modern color syntax requires no commas at all"], + ["hsl(0, 0%, light)", "Keywords are not accepted in the hsl function"], + ["hsl()", "The hsl function requires 3 or 4 arguments"], + ["hsl(0)", "The hsl function requires 3 or 4 arguments"], + ["hsl(0, 0%)", "The hsl function requires 3 or 4 arguments"], + ["hsl(0, 50, 30%)", "The legacy color syntax does not allow numbers for saturation"], + ["hsl(0, 50%, 30)", "The legacy color syntax does not allow numbers for lightness"], + ["hsla(10, 50%, 0, 1)", "The second and third parameters of hsl/hsla must be a percent in legacy color syntax"], + ["hsla(50%, 50%, 0%, 1)", "The first parameter of hsl/hsla must be a number or angle"], + ["hsla(0, 0% 0%, 1)", "Modern color syntax requires no commas at all"], + ["hsla(0, 0%, light, 1)", "Keywords are not accepted in the hsla function"], + ["hsla()", "The hsla function requires 3 or 4 arguments"], + ["hsla(0)", "The hsla function requires 3 or 4 arguments"], + ["hsla(0, 0%)", "The hsla function requires 3 or 4 arguments"], + ["hsla(0, 0%, 0%, 1, 0%)", "The hsla function requires 3 or 4 arguments"], + ["hsl(0, 50, 30%, 1)", "The legacy color syntax does not allow numbers for saturation"], + ["hsl(0, 50%, 30, 1)", "The legacy color syntax does not allow numbers for lightness"], +]; + +for (const test of tests) { + test_invalid_value("color", test[0]); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-hwb.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-hwb.html new file mode 100644 index 0000000000..8c15419d60 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-hwb.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid HWB notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +tests = [ + ["hwba(120 30% 50%)", "HWB syntax does not have the hwba function"], + ["hwba(120 30% 50% / 0.5)", "HWB syntax does not have the hwba function"], + + ["hwb(90deg, 50%, 50%)", "HWB value with commas should not be parsed"], + ["hwb(90deg, 50%, 50%, 0.2)", "HWB value with commas should not be parsed"], + ["hwb(90, 50%, 50%)", "HWB value with commas should not be parsed"], + ["hwb(90, 50%, 50%, 0.2)", "HWB value with commas should not be parsed"], +]; + +for (const test of tests) { + test_invalid_value("color", test[0]); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-lab.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-lab.html new file mode 100644 index 0000000000..36b93c6c5c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-lab.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid Lab notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#lab-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-lab-lch-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-oklab-oklch-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-lab-lch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-oklab-oklch"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +for (const colorSpace of [ "lab", "oklab" ]) { + test_invalid_value("color", `${colorSpace}(0% 0 0 1)`); + test_invalid_value("color", `${colorSpace}(0% 0 0 10%)`); + test_invalid_value("color", `${colorSpace}(0% 0 0deg)`); + test_invalid_value("color", `${colorSpace}(0% 0% 0deg)`); + test_invalid_value("color", `${colorSpace}(40% 0 0deg)`); + test_invalid_value("color", `color(${colorSpace} 20% 0 10 / 50%)`); +} + +for (const colorSpace of [ "lch", "oklch" ]) { + test_invalid_value("color", `${colorSpace}(20% 10 10deg 10)`); + test_invalid_value("color", `${colorSpace}(20% 10 10deg 10 / 0.5)`); + test_invalid_value("color", `color(${colorSpace} 20% 0 10 / 50%)`); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid-named-color.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid-named-color.html new file mode 100644 index 0000000000..8e3f1f2ba7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-named-color.html @@ -0,0 +1,209 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid named color notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#named-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +tests = [ + ["", "Should not parse invalid keyword"], + [" /* hey */\n", "Should not parse invalid keyword"], + ["4", "Should not parse invalid keyword"], + ["top", "Should not parse invalid keyword"], + ["current-Color", "Should not parse invalid keyword"], + + ["ransparent", "Partial keywords shouldn't parse"], + ["aiceblue", "Partial keywords shouldn't parse"], + ["aniquewhite", "Partial keywords shouldn't parse"], + ["aqu", "Partial keywords shouldn't parse"], + ["aquaarine", "Partial keywords shouldn't parse"], + ["zure", "Partial keywords shouldn't parse"], + ["bige", "Partial keywords shouldn't parse"], + ["bsque", "Partial keywords shouldn't parse"], + ["blak", "Partial keywords shouldn't parse"], + ["blacK", "Unicode modification shouldn't parse"], + ["blanchedamond", "Partial keywords shouldn't parse"], + ["ble", "Partial keywords shouldn't parse"], + ["bueviolet", "Partial keywords shouldn't parse"], + ["brwn", "Partial keywords shouldn't parse"], + ["burlwood", "Partial keywords shouldn't parse"], + ["cadetlue", "Partial keywords shouldn't parse"], + ["charteuse", "Partial keywords shouldn't parse"], + ["chocolae", "Partial keywords shouldn't parse"], + ["coal", "Partial keywords shouldn't parse"], + ["cornlowerblue", "Partial keywords shouldn't parse"], + ["corsilk", "Partial keywords shouldn't parse"], + ["cornsilK", "Unicode modification shouldn't parse"], + ["crimso", "Partial keywords shouldn't parse"], + ["can", "Partial keywords shouldn't parse"], + ["darkble", "Partial keywords shouldn't parse"], + ["darKblue", "Unicode modification shouldn't parse"], + ["darkcya", "Partial keywords shouldn't parse"], + ["darKcyan", "Unicode modification shouldn't parse"], + ["darkgoldenrd", "Partial keywords shouldn't parse"], + ["darKgoldenrod", "Unicode modification shouldn't parse"], + ["drkgray", "Partial keywords shouldn't parse"], + ["darKgray", "Unicode modification shouldn't parse"], + ["darkgree", "Partial keywords shouldn't parse"], + ["darKgreen", "Unicode modification shouldn't parse"], + ["dargrey", "Partial keywords shouldn't parse"], + ["darKgrey", "Unicode modification shouldn't parse"], + ["drkkhaki", "Partial keywords shouldn't parse"], + ["darKkhaki", "Unicode modification shouldn't parse"], + ["darkmagnta", "Partial keywords shouldn't parse"], + ["darKmagenta", "Unicode modification shouldn't parse"], + ["dakolivegreen", "Partial keywords shouldn't parse"], + ["darKolivegreen", "Unicode modification shouldn't parse"], + ["drkorange", "Partial keywords shouldn't parse"], + ["darKorange", "Unicode modification shouldn't parse"], + ["dakorchid", "Partial keywords shouldn't parse"], + ["darKorchid", "Unicode modification shouldn't parse"], + ["darkrd", "Partial keywords shouldn't parse"], + ["darKred", "Unicode modification shouldn't parse"], + ["darkalmon", "Partial keywords shouldn't parse"], + ["darKsalmon", "Unicode modification shouldn't parse"], + ["darkseagree", "Partial keywords shouldn't parse"], + ["darKseagreen", "Unicode modification shouldn't parse"], + ["darkslatebue", "Partial keywords shouldn't parse"], + ["darKslateblue", "Unicode modification shouldn't parse"], + ["darkslategry", "Partial keywords shouldn't parse"], + ["darKslategray", "Unicode modification shouldn't parse"], + ["darkslategre", "Partial keywords shouldn't parse"], + ["darKslategrey", "Unicode modification shouldn't parse"], + ["arkturquoise", "Partial keywords shouldn't parse"], + ["darKturquoise", "Unicode modification shouldn't parse"], + ["arkviolet", "Partial keywords shouldn't parse"], + ["darKviolet", "Unicode modification shouldn't parse"], + ["deppink", "Partial keywords shouldn't parse"], + ["deeppinK", "Unicode modification shouldn't parse"], + ["deepskyble", "Partial keywords shouldn't parse"], + ["deepsKyblue", "Unicode modification shouldn't parse"], + ["dmgray", "Partial keywords shouldn't parse"], + ["digrey", "Partial keywords shouldn't parse"], + ["dodgeblue", "Partial keywords shouldn't parse"], + ["frebrick", "Partial keywords shouldn't parse"], + ["firebricK", "Unicode modification shouldn't parse"], + ["floalwhite", "Partial keywords shouldn't parse"], + ["foretgreen", "Partial keywords shouldn't parse"], + ["uchsia", "Partial keywords shouldn't parse"], + ["gainsoro", "Partial keywords shouldn't parse"], + ["gostwhite", "Partial keywords shouldn't parse"], + ["old", "Partial keywords shouldn't parse"], + ["goldenro", "Partial keywords shouldn't parse"], + ["gry", "Partial keywords shouldn't parse"], + ["reen", "Partial keywords shouldn't parse"], + ["geenyellow", "Partial keywords shouldn't parse"], + ["gey", "Partial keywords shouldn't parse"], + ["hoeydew", "Partial keywords shouldn't parse"], + ["hotink", "Partial keywords shouldn't parse"], + ["hotpinK", "Unicode modification shouldn't parse"], + ["indianed", "Partial keywords shouldn't parse"], + ["idigo", "Partial keywords shouldn't parse"], + ["ivry", "Partial keywords shouldn't parse"], + ["khai", "Partial keywords shouldn't parse"], + ["Khaki", "Unicode modification shouldn't parse"], + ["avender", "Partial keywords shouldn't parse"], + ["avenderblush", "Partial keywords shouldn't parse"], + ["lawgreen", "Partial keywords shouldn't parse"], + ["lemonchffon", "Partial keywords shouldn't parse"], + ["lightlue", "Partial keywords shouldn't parse"], + ["lightcora", "Partial keywords shouldn't parse"], + ["lightcyn", "Partial keywords shouldn't parse"], + ["lightgoldenodyellow", "Partial keywords shouldn't parse"], + ["ightgray", "Partial keywords shouldn't parse"], + ["ligtgreen", "Partial keywords shouldn't parse"], + ["lihtgrey", "Partial keywords shouldn't parse"], + ["ligtpink", "Partial keywords shouldn't parse"], + ["lightpinK", "Unicode modification shouldn't parse"], + ["lightsalmo", "Partial keywords shouldn't parse"], + ["lightseagree", "Partial keywords shouldn't parse"], + ["lightsyblue", "Partial keywords shouldn't parse"], + ["lightsKyblue", "Unicode modification shouldn't parse"], + ["lightslatgray", "Partial keywords shouldn't parse"], + ["lightslaterey", "Partial keywords shouldn't parse"], + ["lightsteelbue", "Partial keywords shouldn't parse"], + ["lightellow", "Partial keywords shouldn't parse"], + ["lim", "Partial keywords shouldn't parse"], + ["limgreen", "Partial keywords shouldn't parse"], + ["inen", "Partial keywords shouldn't parse"], + ["maenta", "Partial keywords shouldn't parse"], + ["maron", "Partial keywords shouldn't parse"], + ["mediumaqamarine", "Partial keywords shouldn't parse"], + ["mediumblu", "Partial keywords shouldn't parse"], + ["mediumrchid", "Partial keywords shouldn't parse"], + ["mediumprple", "Partial keywords shouldn't parse"], + ["mediumsegreen", "Partial keywords shouldn't parse"], + ["medumslateblue", "Partial keywords shouldn't parse"], + ["mediumsprnggreen", "Partial keywords shouldn't parse"], + ["mediuturquoise", "Partial keywords shouldn't parse"], + ["mediumioletred", "Partial keywords shouldn't parse"], + ["mdnightblue", "Partial keywords shouldn't parse"], + ["mintcrea", "Partial keywords shouldn't parse"], + ["istyrose", "Partial keywords shouldn't parse"], + ["moccsin", "Partial keywords shouldn't parse"], + ["naajowhite", "Partial keywords shouldn't parse"], + ["nay", "Partial keywords shouldn't parse"], + ["oldlae", "Partial keywords shouldn't parse"], + ["oliv", "Partial keywords shouldn't parse"], + ["olivedab", "Partial keywords shouldn't parse"], + ["orane", "Partial keywords shouldn't parse"], + ["orangere", "Partial keywords shouldn't parse"], + ["rchid", "Partial keywords shouldn't parse"], + ["palegldenrod", "Partial keywords shouldn't parse"], + ["paegreen", "Partial keywords shouldn't parse"], + ["paleturuoise", "Partial keywords shouldn't parse"], + ["palevioltred", "Partial keywords shouldn't parse"], + ["papyawhip", "Partial keywords shouldn't parse"], + ["peachpff", "Partial keywords shouldn't parse"], + ["per", "Partial keywords shouldn't parse"], + ["ink", "Partial keywords shouldn't parse"], + ["pinK", "Unicode modification shouldn't parse"], + ["pum", "Partial keywords shouldn't parse"], + ["powderble", "Partial keywords shouldn't parse"], + ["purpl", "Partial keywords shouldn't parse"], + ["ed", "Partial keywords shouldn't parse"], + ["rosyrown", "Partial keywords shouldn't parse"], + ["royallue", "Partial keywords shouldn't parse"], + ["sadlebrown", "Partial keywords shouldn't parse"], + ["salmn", "Partial keywords shouldn't parse"], + ["sandyrown", "Partial keywords shouldn't parse"], + ["seagren", "Partial keywords shouldn't parse"], + ["seashel", "Partial keywords shouldn't parse"], + ["sinna", "Partial keywords shouldn't parse"], + ["siler", "Partial keywords shouldn't parse"], + ["skybue", "Partial keywords shouldn't parse"], + ["sKyblue", "Unicode modification shouldn't parse"], + ["slatelue", "Partial keywords shouldn't parse"], + ["slategay", "Partial keywords shouldn't parse"], + ["slategry", "Partial keywords shouldn't parse"], + ["snw", "Partial keywords shouldn't parse"], + ["sprnggreen", "Partial keywords shouldn't parse"], + ["seelblue", "Partial keywords shouldn't parse"], + ["ta", "Partial keywords shouldn't parse"], + ["tel", "Partial keywords shouldn't parse"], + ["thistl", "Partial keywords shouldn't parse"], + ["toato", "Partial keywords shouldn't parse"], + ["turquose", "Partial keywords shouldn't parse"], + ["violt", "Partial keywords shouldn't parse"], + ["whet", "Partial keywords shouldn't parse"], + ["whit", "Partial keywords shouldn't parse"], + ["whitemoke", "Partial keywords shouldn't parse"], + ["whitesmoKe", "Unicode modification shouldn't parse"], + ["yelow", "Partial keywords shouldn't parse"], + ["yellwgreen", "Partial keywords shouldn't parse"], +]; + +for (const test of tests) { + test_invalid_value("color", test[0]); +} +</script> +</body> +</html> 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 new file mode 100644 index 0000000000..2cb3a25291 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-relative-color.html @@ -0,0 +1,145 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Parsing and serialization of colors using invalid relative color syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#relative-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-relative-color"> +<meta name="assert" content="invalid colors using relative color syntax fail to parse"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + // rgb(from ...) + + // Testing invalid values + test_invalid_value(`color`, `rgb(from rebeccapurple r 10deg 10)`); + test_invalid_value(`color`, `rgb(from rebeccapurple r 10 10deg)`); + test_invalid_value(`color`, `rgb(from rebeccapurple 10deg g b)`); + test_invalid_value(`color`, `rgb(from rgb(10%, 20%, 30%, 40%) r 10deg 10)`); + test_invalid_value(`color`, `rgb(from rgb(10%, 20%, 30%, 40%) r 10 10deg)`); + test_invalid_value(`color`, `rgb(from rgb(10%, 20%, 30%, 40%) 10deg g b)`); + + // Testing invalid component names + test_invalid_value(`color`, `rgb(from rebeccapurple red g b)`); + 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 with calc(). + test_invalid_value(`color`, `rgb(from rebeccapurple calc(r + 1%) g b)`); + + + // hsl(from ...) + + // Testing invalid values. + test_invalid_value(`color`, `hsl(from rebeccapurple 10% s l)`); + test_invalid_value(`color`, `hsl(from rgb(10%, 20%, 30%, 40%) 10% s l)`); + + // Testing invalid component names + test_invalid_value(`color`, `hsl(from rebeccapurple hue s l)`); + 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 with calc(). + test_invalid_value(`color`, `hsl(from rebeccapurple calc(h + 1deg) s l)`); + test_invalid_value(`color`, `hsl(from rebeccapurple calc(h + 1%) s l)`); + + // hwb(from ...) + + // Testing invalid values. + test_invalid_value(`color`, `hwb(from rebeccapurple 10% w b)`); + test_invalid_value(`color`, `hwb(from rgb(10%, 20%, 30%, 40%) 10% w b)`); + + // Testing invalid component names + test_invalid_value(`color`, `hwb(from rebeccapurple hue w b)`); + test_invalid_value(`color`, `hwb(from rebeccapurple x w b)`); + test_invalid_value(`color`, `hwb(from rebeccapurple h g b)`); + + // Testing with calc(). + test_invalid_value(`color`, `hwb(from rebeccapurple calc(h + 1deg) w b)`); + test_invalid_value(`color`, `hwb(from rebeccapurple calc(h + 1%) w b)`); + + for (const colorSpace of [ "lab", "oklab" ]) { + // Testing invalid values. + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) l 10deg 10)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) l 10 10deg)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) 10deg a b)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50 / 40%) l 10deg 10)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50 / 40%) l 10 10deg)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50 / 40%) 10deg a b)`); + + // Testing invalid component names + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) lightness a b)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) x a b)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) h g b)`); + + // Testing with calc(). + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.25 20 50) l calc(a + 1%) b)`); + } + + for (const colorSpace of [ "lch", "oklch" ]) { + // Testing invalid values. + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l 10deg h)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l c 10%)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) 10deg c h)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30 / 40%) l 10deg h)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30 / 40%) l c 10%)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30 / 40%) 10deg c h)`); + + // Testing invalid component names + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) lightness c h)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) x c h)`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l g b)`); + + // Testing with calc(). + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l c calc(h + 1%))`); + test_invalid_value(`color`, `${colorSpace}(from ${colorSpace}(.70 45 30) l c calc(h + 1deg))`); + } + + for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) { + // Testing invalid values. + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 10deg g b)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 10deg b)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 10deg)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 10deg)`); + + // Testing invalid component names + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} red g b)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} x g b)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} l g b)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} x y z)`); + + // Testing with calc(). + test_invalid_value(`color`, `color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r + 1%) g b)`); + } + + for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { + // Testing invalid values. + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 10deg y z)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 10deg z)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 10deg)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 10deg)`); + + // Testing invalid component names + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} red y)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} r y z)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} l y z)`); + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} r g b)`); + + // Testing with calc(). + test_invalid_value(`color`, `color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x + 1%) y z)`); + } +</script> +</body> +</html> 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 new file mode 100644 index 0000000000..90dd082f2a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid-rgb.html @@ -0,0 +1,51 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using invalid RGB notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +tests = [ + ["rgb(none, none, none)", "The none keyword is invalid in legacy color syntax"], + ["rgba(none, none, none, none)", "The none keyword is invalid in legacy color syntax"], + ["rgb(128, 0, none)", "The none keyword is invalid in legacy color syntax"], + ["rgb(255, 255, 255, none)", "The none keyword is invalid in legacy color syntax"], + + ["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, 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"], + ["rgb(0)", "The rgb function requires 3 or 4 arguments"], + ["rgb(0, 0)", "The rgb function requires 3 or 4 arguments"], + ["rgb(0%)", "The rgb function requires 3 or 4 arguments"], + ["rgb(0%, 0%)", "The rgb function requires 3 or 4 arguments"], + ["rgba(10%, 50%, 0, 1)", "Values must be all numbers or all percentages"], + ["rgba(255, 50%, 0%, 1)", "Values must be all numbers or all percentages"], + ["rgba(0, 0, 0 0)", "Comma optional syntax requires no commas at all"], + ["rgba(0, 0, 0, 0deg)", "Angles are not accepted in the rgb function"], + ["rgba(0, 0, 0, light)", "Keywords are not accepted in the rgb function"], + ["rgba()", "The rgba function requires 3 or 4 arguments"], + ["rgba(0)", "The rgba function requires 3 or 4 arguments"], + ["rgba(0, 0, 0, 0, 0)", "The rgba function requires 3 or 4 arguments"], + ["rgba(0%)", "The rgba function requires 3 or 4 arguments"], + ["rgba(0%, 0%)", "The rgba function requires 3 or 4 arguments"], + ["rgba(0%, 0%, 0%, 0%, 0%)", "The rgba function requires 3 or 4 arguments"], + ["rgb(257, 0, 5 / 0)", "Cannot mix legacy and non-legacy formats"], +]; + +for (const test of tests) { + test_invalid_value("color", test[0]); +} +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-invalid.html b/testing/web-platform/tests/css/css-color/parsing/color-invalid.html new file mode 100644 index 0000000000..276ab806a6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-invalid.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 3: parsing color with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#foreground"> +<meta name="assert" content="color supports only the '<color>' grammar defined in CSS Color Level 3."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("color", "auto"); +test_invalid_value("color", "123"); +test_invalid_value("color", "#12"); +test_invalid_value("color", "#123456789"); +test_invalid_value("color", "rgb"); +test_invalid_value("color", "rgb(1)"); +test_invalid_value("color", "rgb(1,2,3,4,5)"); +test_invalid_value("color", "hsla(1,2,3,4,5)"); +test_invalid_value("color", "rgb(10%, 20, 30%)"); +test_invalid_value("color", "rgba(-2, 300, 400%, -0.5)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-mix-out-of-gamut.html b/testing/web-platform/tests/css/css-color/parsing/color-mix-out-of-gamut.html new file mode 100644 index 0000000000..d3e8a3560d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-mix-out-of-gamut.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Computation of colors using color-mix() function syntax that result in out-of-gamut sRGB colors</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-color-mix"> +<meta name="assert" content="gamut mapping works for computed value of color-mix()"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/color-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + fuzzy_test_computed_color(`color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color(srgb -0.511814 1.01832 -0.310726)`); + fuzzy_test_computed_color(`color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59343 0.58802 1.40564)`); + fuzzy_test_computed_color(`color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.351376 -0.213938 0.299501)`); + fuzzy_test_computed_color(`color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59328 0.588284 1.40527)`); + fuzzy_test_computed_color(`color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.351307 -0.213865 0.299236)`); + fuzzy_test_computed_color(`color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59295 0.360371 1.38571)`); + fuzzy_test_computed_color(`color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.0763893 -0.0456266 0.0932598)`); + fuzzy_test_computed_color(`color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59328 0.358734 1.38664)`); + fuzzy_test_computed_color(`color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.076536 -0.045825 0.0937443)`); + + fuzzy_test_computed_color(`color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color(srgb -0.511814 1.01832 -0.310726)`); + fuzzy_test_computed_color(`color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59343 0.58802 1.40564)`); + fuzzy_test_computed_color(`color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.351376 -0.213938 0.299501)`); + fuzzy_test_computed_color(`color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59328 0.588284 1.40527)`); + fuzzy_test_computed_color(`color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.351307 -0.213865 0.299236)`); + fuzzy_test_computed_color(`color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59295 0.360371 1.38571)`); + fuzzy_test_computed_color(`color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.0763893 -0.0456266 0.0932598)`); + fuzzy_test_computed_color(`color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 1.59328 0.358736 1.38664)`); + fuzzy_test_computed_color(`color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color(srgb 0.0765361 -0.045825 0.0937443)`); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-contrast-function.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-contrast-function.html new file mode 100644 index 0000000000..bdb8f0f588 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-contrast-function.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 6: Parsing and serialization of colors using valid color-contrast() function syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#colorcontrast"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#resolving-contrast"> +<link rel="help" href="https://drafts.csswg.org/css-color-6/#serial-color-contrast"> +<meta name="assert" content="color-contrast() parses and serializes"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + // Test with no specified target contrast + test_valid_value(`color`, `color-contrast(white vs red, blue)`, `rgb(0, 0, 255)`); + test_valid_value(`color`, `color-contrast(white vs blue, red)`, `rgb(0, 0, 255)`); + test_valid_value(`color`, `color-contrast(white vs red, blue, green)`, `rgb(0, 0, 255)`); + test_valid_value(`color`, `color-contrast(white vs white, white)`, `rgb(255, 255, 255)`); + test_valid_value(`color`, `color-contrast(blue vs red, white)`, `rgb(255, 255, 255)`); + test_valid_value(`color`, `color-contrast(red vs blue, white, red)`, `rgb(255, 255, 255)`); + test_valid_value(`color`, `color-contrast(black vs red, blue)`, `rgb(255, 0, 0)`); + test_valid_value(`color`, `color-contrast(black vs blue, red)`, `rgb(255, 0, 0)`); + test_valid_value(`color`, `color-contrast(black vs white, white)`, `rgb(255, 255, 255)`); + test_valid_value(`color`, `color-contrast(red vs blue, rgb(255, 255, 255, .5))`, `rgba(255, 255, 255, 0.5)`); + + // Test with specified target contrast. + test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA)`, `rgb(0, 100, 0)`); // darkgreen + test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AA-large)`, `rgb(128, 128, 0)`); // olive + test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA)`, `rgb(128, 0, 0)`); // maroon + test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to AAA-large)`, `rgb(0, 100, 0)`); // darkgreen + test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive, sienna, darkgreen, maroon to 5.8)`, `rgb(128, 0, 0)`); // maroon + + // Test with specified target contrast that none meet. + test_valid_value(`color`, `color-contrast(wheat vs bisque, darkgoldenrod, olive to 100)`, `rgb(0, 0, 0)`); // black + test_valid_value(`color`, `color-contrast(green vs bisque, darkgoldenrod, olive to 100)`, `rgb(255, 255, 255)`); // white + + // Test non-sRGB colors. + test_valid_value(`color`, `color-contrast(green vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 1 0)`); + test_valid_value(`color`, `color-contrast(color(display-p3 1 1 0) vs color(display-p3 0 1 0), color(display-p3 0 0 1))`, `color(display-p3 0 0 1)`); + test_valid_value(`color`, `color-contrast(green vs lab(50% -160 160), lch(0.2 50 20deg))`, `lch(0.2 50 20)`); + test_valid_value(`color`, `color-contrast(lab(50% -160 160) vs green, lch(0.2 50 20deg))`, `lch(0.2 50 20)`); + + // Test with extra whitespace + test_valid_value(`color`, `color-contrast( white vs red, blue )`, `rgb(0, 0, 255)`); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-color-function.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-function.html new file mode 100644 index 0000000000..2a7750539c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-function.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using valid color() function syntax</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#color-function"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-function-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-color-function-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) { + test_valid_value("color", `color(${colorSpace} 0% 0% 0%)`, `color(${colorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 10% 10% 10%)`, `color(${colorSpace} 0.1 0.1 0.1)`); + test_valid_value("color", `color(${colorSpace} .2 .2 25%)`, `color(${colorSpace} 0.2 0.2 0.25)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 1)`, `color(${colorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 0% 0 0 / 0.5)`, `color(${colorSpace} 0 0 0 / 0.5)`); + test_valid_value("color", `color(${colorSpace} 20% 0 10/0.5)`, `color(${colorSpace} 0.2 0 10 / 0.5)`); + test_valid_value("color", `color(${colorSpace} 20% 0 10/50%)`, `color(${colorSpace} 0.2 0 10 / 0.5)`); + test_valid_value("color", `color(${colorSpace} 400% 0 10/50%)`, `color(${colorSpace} 4 0 10 / 0.5)`); + test_valid_value("color", `color(${colorSpace} 50% -160 160)`, `color(${colorSpace} 0.5 -160 160)`); + test_valid_value("color", `color(${colorSpace} 50% -200 200)`, `color(${colorSpace} 0.5 -200 200)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / -10%)`, `color(${colorSpace} 0 0 0 / 0)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 110%)`, `color(${colorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 300%)`, `color(${colorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 200 200 200)`, `color(${colorSpace} 200 200 200)`); + test_valid_value("color", `color(${colorSpace} 200 200 200 / 200)`, `color(${colorSpace} 200 200 200)`); + test_valid_value("color", `color(${colorSpace} -200 -200 -200)`, `color(${colorSpace} -200 -200 -200)`); + test_valid_value("color", `color(${colorSpace} -200 -200 -200 / -200)`, `color(${colorSpace} -200 -200 -200 / 0)`); + test_valid_value("color", `color(${colorSpace} 200% 200% 200%)`, `color(${colorSpace} 2 2 2)`); + test_valid_value("color", `color(${colorSpace} 200% 200% 200% / 200%)`, `color(${colorSpace} 2 2 2)`); + test_valid_value("color", `color(${colorSpace} -200% -200% -200% / -200%)`, `color(${colorSpace} -2 -2 -2 / 0)`); + test_valid_value("color", `color(${colorSpace} calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))`, `color(${colorSpace} 1.5 -0.5 0.5 / 0.5)`); + test_valid_value("color", `color(${colorSpace} calc(50% * 3) calc(-150% / 3) calc(50%) / calc(-50% * 3))`, `color(${colorSpace} 1.5 -0.5 0.5 / 0)`); + + test_valid_value("color", `color(${colorSpace} none none none / none)`, `color(${colorSpace} none none none / none)`); + test_valid_value("color", `color(${colorSpace} none none none)`, `color(${colorSpace} none none none)`); + test_valid_value("color", `color(${colorSpace} 10% none none / none)`, `color(${colorSpace} 0.1 none none / none)`); + test_valid_value("color", `color(${colorSpace} none none none / 0.5)`, `color(${colorSpace} none none none / 0.5)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / none)`, `color(${colorSpace} 0 0 0 / none)`); + + test_valid_value("color", `color(${colorSpace} 0 calc(infinity) 0)`, `color(${colorSpace} 0 calc(infinity) 0)`); + test_valid_value("color", `color(${colorSpace} 0 calc(-infinity) 0)`, `color(${colorSpace} 0 calc(-infinity) 0)`); + test_valid_value("color", `color(${colorSpace} calc(NaN) 0 0)`, `color(${colorSpace} calc(NaN) 0 0)`); + test_valid_value("color", `color(${colorSpace} calc(0 / 0) 0 0)`, `color(${colorSpace} calc(NaN) 0 0)`); +} + +for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { + const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; + + test_valid_value("color", `color(${colorSpace} 0 0 0)`, `color(${resultColorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 1)`, `color(${resultColorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 1 1 1)`, `color(${resultColorSpace} 1 1 1)`); + test_valid_value("color", `color(${colorSpace} 1 1 1 / 1)`, `color(${resultColorSpace} 1 1 1)`); + test_valid_value("color", `color(${colorSpace} -1 -1 -1)`, `color(${resultColorSpace} -1 -1 -1)`); + test_valid_value("color", `color(${colorSpace} 0.1 0.1 0.1)`, `color(${resultColorSpace} 0.1 0.1 0.1)`); + test_valid_value("color", `color(${colorSpace} 10 10 10)`, `color(${resultColorSpace} 10 10 10)`); + test_valid_value("color", `color(${colorSpace} .2 .2 .25)`, `color(${resultColorSpace} 0.2 0.2 0.25)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 0.5)`, `color(${resultColorSpace} 0 0 0 / 0.5)`); + test_valid_value("color", `color(${colorSpace} .20 0 10/0.5)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`); + test_valid_value("color", `color(${colorSpace} .20 0 10/50%)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / -10%)`, `color(${resultColorSpace} 0 0 0 / 0)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 110%)`, `color(${resultColorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / 300%)`, `color(${resultColorSpace} 0 0 0)`); + test_valid_value("color", `color(${colorSpace} calc(0.5 + 1) calc(0.5 - 1) calc(0.5) / calc(-0.5 + 1))`, `color(${resultColorSpace} 1.5 -0.5 0.5 / 0.5)`); + + test_valid_value("color", `color(${colorSpace} none none none / none)`, `color(${resultColorSpace} none none none / none)`); + test_valid_value("color", `color(${colorSpace} none none none)`, `color(${resultColorSpace} none none none)`); + test_valid_value("color", `color(${colorSpace} 0.2 none none / none)`, `color(${resultColorSpace} 0.2 none none / none)`); + test_valid_value("color", `color(${colorSpace} none none none / 0.5)`, `color(${resultColorSpace} none none none / 0.5)`); + test_valid_value("color", `color(${colorSpace} 0 0 0 / none)`, `color(${resultColorSpace} 0 0 0 / none)`); + + test_valid_value("color", `color(${colorSpace} 0 calc(infinity) 0)`, `color(${resultColorSpace} 0 calc(infinity) 0)`); + test_valid_value("color", `color(${colorSpace} 0 calc(-infinity) 0)`, `color(${resultColorSpace} 0 calc(-infinity) 0)`); + test_valid_value("color", `color(${colorSpace} calc(NaN) 0 0)`, `color(${resultColorSpace} calc(NaN) 0 0)`); + test_valid_value("color", `color(${colorSpace} calc(0 / 0) 0 0)`, `color(${resultColorSpace} calc(NaN) 0 0)`); +} +</script> +</body> +</html> 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 new file mode 100644 index 0000000000..f11ecc8e47 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-color-mix-function.html @@ -0,0 +1,420 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Parsing and serialization of colors using valid color-mix() function syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#color-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-mix"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-color-mix"> +<meta name="assert" content="color-mix() parses and serializes for all color interpolation methods"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> + // https://github.com/w3c/csswg-drafts/issues/7302: Specified values shouldn't resolve keyword colors or calc values + test_valid_value(`color`, `color-mix(in srgb, red, blue)`, `color-mix(in srgb, red, blue)`); + test_valid_value(`color`, `color-mix(in srgb, 70% red, 50% blue)`, `color-mix(in srgb, red 70%, blue 50%)`); + test_valid_value(`color`, `color-mix(in hsl, red, blue)`, `color-mix(in hsl, red, blue)`); + test_valid_value(`color`, `color-mix(in hsl, red calc(20%), blue)`, `color-mix(in hsl, red calc(20%), blue)`); + test_valid_value(`color`, `color-mix(in hsl, red calc(var(--v)*1%), blue)`, `color-mix(in hsl, red calc(var(--v)*1%), blue)`); + test_valid_value(`color`, `color-mix(in hsl, currentcolor, blue)`, `color-mix(in hsl, currentcolor, blue)`); + test_valid_value(`color`, `color-mix(in hsl, red 60%, blue 40%)`, `color-mix(in hsl, red 60%, blue)`); + test_valid_value(`color`, `color-mix(in hsl, red 50%, blue)`, `color-mix(in hsl, red, blue)`); + test_valid_value(`color`, `color-mix(in hsl, red, blue 50%)`, `color-mix(in hsl, red, blue)`); + test_valid_value(`color`, `color-mix(in lch decreasing hue, red, hsl(120, 100%, 50%))`, `color-mix(in lch decreasing hue, red, rgb(0, 255, 0))`); + + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, 50% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), 50% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46), rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, 25% hsl(120deg 10% 20%), hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), 25% hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%), hsl(30deg 30% 40%) 25%)`, `color-mix(in hsl, rgb(46, 56, 46) 75%, rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40%) 75%)`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgb(133, 102, 71))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 30%, hsl(30deg 30% 40%) 90%)`, `color-mix(in hsl, rgb(46, 56, 46) 30%, rgb(133, 102, 71) 90%)`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 12.5%, hsl(30deg 30% 40%) 37.5%)`, `color-mix(in hsl, rgb(46, 56, 46) 12.5%, rgb(133, 102, 71) 37.5%)`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 0%, hsl(30deg 30% 40%))`, `color-mix(in hsl, rgb(46, 56, 46) 0%, rgb(133, 102, 71))`); + + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4), rgba(133, 102, 71, 0.8))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20%) 25%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgb(46, 56, 46) 25%, rgba(133, 102, 71, 0.8))`); + test_valid_value(`color`, `color-mix(in hsl, 25% hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4), 25% hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4), hsl(30deg 30% 40% / .8) 25%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 75%, rgba(133, 102, 71, 0.8))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 25%, hsl(30deg 30% 40% / .8) 75%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 25%, rgba(133, 102, 71, 0.8))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 30%, hsl(30deg 30% 40% / .8) 90%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 30%, rgba(133, 102, 71, 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 12.5%, hsl(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 12.5%, rgba(133, 102, 71, 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 10% 20% / .4) 0%, hsl(30deg 30% 40% / .8))`, `color-mix(in hsl, rgba(46, 56, 46, 0.4) 0%, rgba(133, 102, 71, 0.8))`); + + test_valid_value(`color`, `color-mix(in hsl, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`); + + test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl, rgb(191, 149, 64), rgb(191, 191, 64))`); + test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl, rgb(191, 191, 64), rgb(191, 149, 64))`); + test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl, rgb(191, 170, 64), rgb(191, 64, 128))`); + test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 128), rgb(191, 170, 64))`); + test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl, rgb(191, 106, 64), rgb(191, 64, 149))`); + test_valid_value(`color`, `color-mix(in hsl shorter hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl, rgb(191, 64, 149), rgb(191, 106, 64))`); + + test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 149, 64), rgb(191, 191, 64))`); + test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 191, 64), rgb(191, 149, 64))`); + test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 170, 64), rgb(191, 64, 128))`); + test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 128), rgb(191, 170, 64))`); + test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 106, 64), rgb(191, 64, 149))`); + test_valid_value(`color`, `color-mix(in hsl longer hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl longer hue, rgb(191, 64, 149), rgb(191, 106, 64))`); + + test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`); + test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`); + test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`); + test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`); + test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`); + test_valid_value(`color`, `color-mix(in hsl increasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl increasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`); + + test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(40deg 50% 50%), hsl(60deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 149, 64), rgb(191, 191, 64))`); + test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(60deg 50% 50%), hsl(40deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 191, 64), rgb(191, 149, 64))`); + test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(50deg 50% 50%), hsl(330deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 170, 64), rgb(191, 64, 128))`); + test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(330deg 50% 50%), hsl(50deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 128), rgb(191, 170, 64))`); + test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(20deg 50% 50%), hsl(320deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 106, 64), rgb(191, 64, 149))`); + test_valid_value(`color`, `color-mix(in hsl decreasing hue, hsl(320deg 50% 50%), hsl(20deg 50% 50%))`, `color-mix(in hsl decreasing hue, rgb(191, 64, 149), rgb(191, 106, 64))`); + + test_valid_value(`color`, `color-mix(in hsl, hsl(none none none), hsl(none none none))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(none none none), hsl(30deg 40% 80%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(224, 204, 184))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 20% 40%), hsl(none none none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 20% none), hsl(30deg 40% 60%))`, `color-mix(in hsl, rgb(0, 0, 0), rgb(194, 153, 112))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 20% 40%), hsl(30deg 20% none))`, `color-mix(in hsl, rgb(82, 122, 82), rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(none 20% 40%), hsl(30deg none 80%))`, `color-mix(in hsl, rgb(122, 82, 82), rgb(204, 204, 204))`); + + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40%))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgb(143, 61, 61))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / 0.5))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0.5))`); + test_valid_value(`color`, `color-mix(in hsl, hsl(120deg 40% 40% / none), hsl(0deg 40% 40% / none))`, `color-mix(in hsl, rgba(61, 143, 61, 0), rgba(143, 61, 61, 0))`); + + test_valid_value(`color`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(100 116 334) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, lch(0 116 334) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hsl, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`); + + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, 50% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), 50% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, 25% hwb(120deg 10% 20%), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% 40%) 25%)`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 25%, hwb(30deg 30% 40%) 75%)`, `color-mix(in hwb, rgb(26, 204, 26) 25%, rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 30%, hwb(30deg 30% 40%) 90%)`, `color-mix(in hwb, rgb(26, 204, 26) 30%, rgb(153, 115, 77) 90%)`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 12.5%, hwb(30deg 30% 40%) 37.5%)`, `color-mix(in hwb, rgb(26, 204, 26) 12.5%, rgb(153, 115, 77) 37.5%)`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%) 0%, hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 204, 26) 0%, rgb(153, 115, 77))`); + + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4), rgba(153, 115, 77, 0.8))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`); + test_valid_value(`color`, `color-mix(in hwb, 25% hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), 25% hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgb(26, 204, 26) 75%, rgba(153, 115, 77, 0.8))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4), hwb(30deg 30% 40% / .8) 25%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 75%, rgba(153, 115, 77, 0.8))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 25%, hwb(30deg 30% 40% / .8) 75%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 25%, rgba(153, 115, 77, 0.8))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 30%, hwb(30deg 30% 40% / .8) 90%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 30%, rgba(153, 115, 77, 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 12.5%, hwb(30deg 30% 40% / .8) 37.5%)`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 12.5%, rgba(153, 115, 77, 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / .4) 0%, hwb(30deg 30% 40% / .8))`, `color-mix(in hwb, rgba(26, 204, 26, 0.4) 0%, rgba(153, 115, 77, 0.8))`); + + test_valid_value(`color`, `color-mix(in hwb, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`); + + test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb, rgb(153, 128, 77), rgb(153, 153, 77))`); + test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb, rgb(153, 153, 77), rgb(153, 128, 77))`); + test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb, rgb(153, 140, 77), rgb(153, 77, 115))`); + test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 115), rgb(153, 140, 77))`); + test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb, rgb(153, 102, 77), rgb(153, 77, 128))`); + test_valid_value(`color`, `color-mix(in hwb shorter hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb, rgb(153, 77, 128), rgb(153, 102, 77))`); + + test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 128, 77), rgb(153, 153, 77))`); + test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 153, 77), rgb(153, 128, 77))`); + test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 140, 77), rgb(153, 77, 115))`); + test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 115), rgb(153, 140, 77))`); + test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 102, 77), rgb(153, 77, 128))`); + test_valid_value(`color`, `color-mix(in hwb longer hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb longer hue, rgb(153, 77, 128), rgb(153, 102, 77))`); + + test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`); + test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`); + test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`); + test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`); + test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`); + test_valid_value(`color`, `color-mix(in hwb increasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb increasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`); + + test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(40deg 30% 40%), hwb(60deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 128, 77), rgb(153, 153, 77))`); + test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(60deg 30% 40%), hwb(40deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 153, 77), rgb(153, 128, 77))`); + test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(50deg 30% 40%), hwb(330deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 140, 77), rgb(153, 77, 115))`); + test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(330deg 30% 40%), hwb(50deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 115), rgb(153, 140, 77))`); + test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(20deg 30% 40%), hwb(320deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 102, 77), rgb(153, 77, 128))`); + test_valid_value(`color`, `color-mix(in hwb decreasing hue, hwb(320deg 30% 40%), hwb(20deg 30% 40%))`, `color-mix(in hwb decreasing hue, rgb(153, 77, 128), rgb(153, 102, 77))`); + + test_valid_value(`color`, `color-mix(in hwb, hwb(none none none), hwb(none none none))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(255, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(none none none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(255, 0, 0), rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(none none none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgb(26, 255, 26), rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20%), hwb(30deg 30% none))`, `color-mix(in hwb, rgb(26, 204, 26), rgb(255, 166, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(none 10% 20%), hwb(30deg none 40%))`, `color-mix(in hwb, rgb(204, 26, 26), rgb(153, 77, 0))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40%))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgb(153, 115, 77))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / 0.5))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0.5))`); + test_valid_value(`color`, `color-mix(in hwb, hwb(120deg 10% 20% / none), hwb(30deg 30% 40% / none))`, `color-mix(in hwb, rgba(26, 204, 26, 0), rgba(153, 115, 77, 0))`); + + test_valid_value(`color`, `color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, color(display-p3 0 1 0) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(100 104.3 -50.9) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lab(0 104.3 -50.9) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(100 116 334) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, lch(0 116 334) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, oklab(100 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(0 0.365 -0.16) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, oklch(100 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(0 0.399 336.3) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklab(1 0.365 -0.16) 100%, rgb(0, 0, 0))`); + test_valid_value(`color`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0) 0%)`, `color-mix(in hwb, oklch(1 0.399 336.3) 100%, rgb(0, 0, 0))`); + + // lch() + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30), lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, 25% lch(10 20 30deg), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), 25% lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(50 60 70deg) 25%)`, `color-mix(in lch, lch(10 20 30) 75%, lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 25%, lch(50 60 70deg) 75%)`, `color-mix(in lch, lch(10 20 30) 25%, lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 30%, lch(50 60 70deg) 90%)`, `color-mix(in lch, lch(10 20 30) 30%, lch(50 60 70) 90%)`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 12.5%, lch(50 60 70deg) 37.5%)`, `color-mix(in lch, lch(10 20 30) 12.5%, lch(50 60 70) 37.5%)`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg) 0%, lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30) 0%, lch(50 60 70))`); + + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4), lch(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lch, 25% lch(10 20 30deg / .4), lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4), 25% lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4), lch(50 60 70deg / .8) 25%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 75%, lch(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 25%, lch(50 60 70deg / .8) 75%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 25%, lch(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 30%, lch(50 60 70deg / .8) 90%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 30%, lch(50 60 70 / 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 12.5%, lch(50 60 70deg / .8) 37.5%)`, `color-mix(in lch, lch(10 20 30 / 0.4) 12.5%, lch(50 60 70 / 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / .4) 0%, lch(50 60 70deg / .8))`, `color-mix(in lch, lch(10 20 30 / 0.4) 0%, lch(50 60 70 / 0.8))`); + + test_valid_value(`color`, `color-mix(in lch, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`); + test_valid_value(`color`, `color-mix(in lch, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`); + test_valid_value(`color`, `color-mix(in lch, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`); + test_valid_value(`color`, `color-mix(in lch, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`); + test_valid_value(`color`, `color-mix(in lch, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`); + test_valid_value(`color`, `color-mix(in lch, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`); + + test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch, lch(100 0 40), lch(100 0 60))`); + test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch, lch(100 0 60), lch(100 0 40))`); + test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch, lch(100 0 50), lch(100 0 330))`); + test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch, lch(100 0 330), lch(100 0 50))`); + test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch, lch(100 0 20), lch(100 0 320))`); + test_valid_value(`color`, `color-mix(in lch shorter hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch, lch(100 0 320), lch(100 0 20))`); + + test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch longer hue, lch(100 0 40), lch(100 0 60))`); + test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch longer hue, lch(100 0 60), lch(100 0 40))`); + test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch longer hue, lch(100 0 50), lch(100 0 330))`); + test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch longer hue, lch(100 0 330), lch(100 0 50))`); + test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch longer hue, lch(100 0 20), lch(100 0 320))`); + test_valid_value(`color`, `color-mix(in lch longer hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch longer hue, lch(100 0 320), lch(100 0 20))`); + + test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch increasing hue, lch(100 0 40), lch(100 0 60))`); + test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch increasing hue, lch(100 0 60), lch(100 0 40))`); + test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch increasing hue, lch(100 0 50), lch(100 0 330))`); + test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch increasing hue, lch(100 0 330), lch(100 0 50))`); + test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch increasing hue, lch(100 0 20), lch(100 0 320))`); + test_valid_value(`color`, `color-mix(in lch increasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch increasing hue, lch(100 0 320), lch(100 0 20))`); + + test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 40deg), lch(100 0 60deg))`, `color-mix(in lch decreasing hue, lch(100 0 40), lch(100 0 60))`); + test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 60deg), lch(100 0 40deg))`, `color-mix(in lch decreasing hue, lch(100 0 60), lch(100 0 40))`); + test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 50deg), lch(100 0 330deg))`, `color-mix(in lch decreasing hue, lch(100 0 50), lch(100 0 330))`); + test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 330deg), lch(100 0 50deg))`, `color-mix(in lch decreasing hue, lch(100 0 330), lch(100 0 50))`); + test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 20deg), lch(100 0 320deg))`, `color-mix(in lch decreasing hue, lch(100 0 20), lch(100 0 320))`); + test_valid_value(`color`, `color-mix(in lch decreasing hue, lch(100 0 320deg), lch(100 0 20deg))`, `color-mix(in lch decreasing hue, lch(100 0 320), lch(100 0 20))`); + + test_valid_value(`color`, `color-mix(in lch, lch(none none none), lch(none none none))`, `color-mix(in lch, lch(none none none), lch(none none none))`); + test_valid_value(`color`, `color-mix(in lch, lch(none none none), lch(50 60 70deg))`, `color-mix(in lch, lch(none none none), lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(none none none))`, `color-mix(in lch, lch(10 20 30), lch(none none none))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 none), lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg), lch(50 60 none))`, `color-mix(in lch, lch(10 20 30), lch(50 60 none))`); + test_valid_value(`color`, `color-mix(in lch, lch(none 20 30deg), lch(50 none 70deg))`, `color-mix(in lch, lch(none 20 30), lch(50 none 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / 0.5))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / 0.5))`); + test_valid_value(`color`, `color-mix(in lch, lch(10 20 30deg / none), lch(50 60 70deg / none))`, `color-mix(in lch, lch(10 20 30 / none), lch(50 60 70 / none))`); + + // oklch() + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, 25% oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), 25% oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 70deg) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 75%, oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 25%, oklch(0.5 0.6 70deg) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 25%, oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 30%, oklch(0.5 0.6 70deg) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 30%, oklch(0.5 0.6 70) 90%)`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 12.5%, oklch(0.5 0.6 70deg) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30) 12.5%, oklch(0.5 0.6 70) 37.5%)`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg) 0%, oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30) 0%, oklch(0.5 0.6 70))`); + + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4), oklch(0.5 0.6 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklch, 25% oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4), 25% oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4), oklch(0.5 0.6 70deg / .8) 25%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 75%, oklch(0.5 0.6 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 25%, oklch(0.5 0.6 70deg / .8) 75%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 25%, oklch(0.5 0.6 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 30%, oklch(0.5 0.6 70deg / .8) 90%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 30%, oklch(0.5 0.6 70 / 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 12.5%, oklch(0.5 0.6 70deg / .8) 37.5%)`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 12.5%, oklch(0.5 0.6 70 / 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / .4) 0%, oklch(0.5 0.6 70deg / .8))`, `color-mix(in oklch, oklch(0.1 0.2 30 / 0.4) 0%, oklch(0.5 0.6 70 / 0.8))`); + + test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`); + + test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch, oklch(1 0 40), oklch(1 0 60))`); + test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch, oklch(1 0 60), oklch(1 0 40))`); + test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch, oklch(1 0 50), oklch(1 0 330))`); + test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch, oklch(1 0 330), oklch(1 0 50))`); + test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch, oklch(1 0 20), oklch(1 0 320))`); + test_valid_value(`color`, `color-mix(in oklch shorter hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch, oklch(1 0 320), oklch(1 0 20))`); + + test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch longer hue, oklch(1 0 40), oklch(1 0 60))`); + test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch longer hue, oklch(1 0 60), oklch(1 0 40))`); + test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch longer hue, oklch(1 0 50), oklch(1 0 330))`); + test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch longer hue, oklch(1 0 330), oklch(1 0 50))`); + test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch longer hue, oklch(1 0 20), oklch(1 0 320))`); + test_valid_value(`color`, `color-mix(in oklch longer hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch longer hue, oklch(1 0 320), oklch(1 0 20))`); + + test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch increasing hue, oklch(1 0 40), oklch(1 0 60))`); + test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch increasing hue, oklch(1 0 60), oklch(1 0 40))`); + test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch increasing hue, oklch(1 0 50), oklch(1 0 330))`); + test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch increasing hue, oklch(1 0 330), oklch(1 0 50))`); + test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch increasing hue, oklch(1 0 20), oklch(1 0 320))`); + test_valid_value(`color`, `color-mix(in oklch increasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch increasing hue, oklch(1 0 320), oklch(1 0 20))`); + + test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 40deg), oklch(1 0 60deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 40), oklch(1 0 60))`); + test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 60deg), oklch(1 0 40deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 60), oklch(1 0 40))`); + test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 50deg), oklch(1 0 330deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 50), oklch(1 0 330))`); + test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 330deg), oklch(1 0 50deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 330), oklch(1 0 50))`); + test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 20deg), oklch(1 0 320deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 20), oklch(1 0 320))`); + test_valid_value(`color`, `color-mix(in oklch decreasing hue, oklch(1 0 320deg), oklch(1 0 20deg))`, `color-mix(in oklch decreasing hue, oklch(1 0 320), oklch(1 0 20))`); + + test_valid_value(`color`, `color-mix(in oklch, oklch(none none none), oklch(none none none))`, `color-mix(in oklch, oklch(none none none), oklch(none none none))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(none none none), oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(none none none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(none none none))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 none), oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg), oklch(0.5 0.6 none))`, `color-mix(in oklch, oklch(0.1 0.2 30), oklch(0.5 0.6 none))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(none 0.2 30deg), oklch(0.5 none 70deg))`, `color-mix(in oklch, oklch(none 0.2 30), oklch(0.5 none 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / 0.5))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / 0.5))`); + test_valid_value(`color`, `color-mix(in oklch, oklch(0.1 0.2 30deg / none), oklch(0.5 0.6 70deg / none))`, `color-mix(in oklch, oklch(0.1 0.2 30 / none), oklch(0.5 0.6 70 / none))`); + + // lab() + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30), lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, 25% lab(10 20 30), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), 25% lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(50 60 70) 25%)`, `color-mix(in lab, lab(10 20 30) 75%, lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70) 75%)`, `color-mix(in lab, lab(10 20 30) 25%, lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`, `color-mix(in lab, lab(10 20 30) 30%, lab(50 60 70) 90%)`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`, `color-mix(in lab, lab(10 20 30) 12.5%, lab(50 60 70) 37.5%)`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`, `color-mix(in lab, lab(10 20 30) 0%, lab(50 60 70))`); + + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4), lab(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lab, 25% lab(10 20 30 / .4), lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4), 25% lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4), lab(50 60 70 / .8) 25%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 75%, lab(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 25%, lab(50 60 70 / .8) 75%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 25%, lab(50 60 70 / 0.8))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 30%, lab(50 60 70 / .8) 90%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 30%, lab(50 60 70 / 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 12.5%, lab(50 60 70 / .8) 37.5%)`, `color-mix(in lab, lab(10 20 30 / 0.4) 12.5%, lab(50 60 70 / 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / .4) 0%, lab(50 60 70 / .8))`, `color-mix(in lab, lab(10 20 30 / 0.4) 0%, lab(50 60 70 / 0.8))`); + + test_valid_value(`color`, `color-mix(in lab, lab(none none none), lab(none none none))`, `color-mix(in lab, lab(none none none), lab(none none none))`); + test_valid_value(`color`, `color-mix(in lab, lab(none none none), lab(50 60 70))`, `color-mix(in lab, lab(none none none), lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(none none none))`, `color-mix(in lab, lab(10 20 30), lab(none none none))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 none), lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30), lab(50 60 none))`, `color-mix(in lab, lab(10 20 30), lab(50 60 none))`); + test_valid_value(`color`, `color-mix(in lab, lab(none 20 30), lab(50 none 70))`, `color-mix(in lab, lab(none 20 30), lab(50 none 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / 0.5))`); + test_valid_value(`color`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`, `color-mix(in lab, lab(10 20 30 / none), lab(50 60 70 / none))`); + + // oklab() + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, 25% oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), 25% oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 0.7) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 75%, oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 25%, oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 30%, oklab(0.5 0.6 0.7) 90%)`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 12.5%, oklab(0.5 0.6 0.7) 37.5%)`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3) 0%, oklab(0.5 0.6 0.7))`); + + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4), oklab(0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklab, 25% oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), 25% oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4), oklab(0.5 0.6 0.7 / .8) 25%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 75%, oklab(0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 25%, oklab(0.5 0.6 0.7 / .8) 75%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 25%, oklab(0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 30%, oklab(0.5 0.6 0.7 / .8) 90%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 30%, oklab(0.5 0.6 0.7 / 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 12.5%, oklab(0.5 0.6 0.7 / .8) 37.5%)`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 12.5%, oklab(0.5 0.6 0.7 / 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / .4) 0%, oklab(0.5 0.6 0.7 / .8))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / 0.4) 0%, oklab(0.5 0.6 0.7 / 0.8))`); + + test_valid_value(`color`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`, `color-mix(in oklab, oklab(none none none), oklab(none none none))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(none none none), oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(none none none))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 none), oklab(0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`, `color-mix(in oklab, oklab(0.1 0.2 0.3), oklab(0.5 0.6 none))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`, `color-mix(in oklab, oklab(none 0.2 0.3), oklab(0.5 none 0.7))`); + test_valid_value(`color`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.7))`, `color-mix(in oklab, oklab(0.1 0.2 0.3 / none), oklab(0.5 0.6 0.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" ]) { + 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))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, 50% 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))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), 50% 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))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 .7) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 75%, color(${resultColorSpace} 0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 25%, color(${colorSpace} .5 .6 .7) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 25%, color(${resultColorSpace} 0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 30%, color(${colorSpace} .5 .6 .7) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 30%, color(${resultColorSpace} 0.5 0.6 0.7) 90%)`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 12.5%, color(${colorSpace} .5 .6 .7) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7) 37.5%)`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3) 0%, color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3) 0%, color(${resultColorSpace} 0.5 0.6 0.7))`); + + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .5), color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.5), color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4), color(${colorSpace} .5 .6 .7 / .8) 25%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 75%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 25%, color(${colorSpace} .5 .6 .7 / .8) 75%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 25%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 30%, color(${colorSpace} .5 .6 .7 / .8) 90%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 30%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 90%)`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 12.5%, color(${colorSpace} .5 .6 .7 / .8) 37.5%)`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 12.5%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8) 37.5%)`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / .4) 0%, color(${colorSpace} .5 .6 .7 / .8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / 0.4) 0%, color(${resultColorSpace} 0.5 0.6 0.7 / 0.8))`); + + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} 2 3 4 / 5), color(${colorSpace} 4 6 8 / 10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 2 3 4), color(${resultColorSpace} 4 6 8))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4), color(${colorSpace} -4 -6 -8))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4), color(${resultColorSpace} -4 -6 -8))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} -2 -3 -4 / -5), color(${colorSpace} -4 -6 -8 / -10))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} -2 -3 -4 / 0), color(${resultColorSpace} -4 -6 -8 / 0))`); + + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} none none none))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} none none none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none none none), color(${resultColorSpace} 0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} none none none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} none none none))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 none), color(${resultColorSpace} 0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3), color(${colorSpace} .5 .6 none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3), color(${resultColorSpace} 0.5 0.6 none))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} none .2 .3), color(${colorSpace} .5 none .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} none 0.2 0.3), color(${resultColorSpace} 0.5 none 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / 0.5))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / 0.5))`); + test_valid_value(`color`, `color-mix(in ${colorSpace}, color(${colorSpace} .1 .2 .3 / none), color(${colorSpace} .5 .6 .7 / none))`, `color-mix(in ${resultColorSpace}, color(${resultColorSpace} 0.1 0.2 0.3 / none), color(${resultColorSpace} 0.5 0.6 0.7 / none))`); + } +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html new file mode 100644 index 0000000000..7ab1274176 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-hsl.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using valid HSL notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hsl-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("color", "hsl(120 30% 50%)", "rgb(89, 166, 89)"); +test_valid_value("color", "hsl(120 30% 50% / 0.5)", "rgba(89, 166, 89, 0.5)"); +test_valid_value("color", "hsl(none none none)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(0 0% 0%)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(none none none / none)", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "hsl(0 0% 0% / 0)", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "hsla(none none none)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsla(0 0% 0%)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsla(none none none / none)", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "hsla(0 0% 0% / 0)", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "hsl(120 none none)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(120 0% 0%)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(120 80% none)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(120 80% 0%)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(120 none 50%)", "rgb(128, 128, 128)"); +test_valid_value("color", "hsl(120 0% 50%)", "rgb(128, 128, 128)"); +test_valid_value("color", "hsl(120 100% 50% / none)", "rgba(0, 255, 0, 0)"); +test_valid_value("color", "hsl(120 100% 50% / 0)", "rgba(0, 255, 0, 0)"); +test_valid_value("color", "hsl(none 100% 50%)", "rgb(255, 0, 0)"); +test_valid_value("color", "hsl(0 100% 50%)", "rgb(255, 0, 0)"); + +// Test with number components. +test_valid_value("color", "hsl(120 30 50)", "rgb(89, 166, 89)"); +test_valid_value("color", "hsl(120 30 50 / 0.5)", "rgba(89, 166, 89, 0.5)"); +test_valid_value("color", "hsl(120 30% 50)", "rgb(89, 166, 89)"); +test_valid_value("color", "hsl(120 30% 50 / 0.5)", "rgba(89, 166, 89, 0.5)"); +test_valid_value("color", "hsl(120 30 50%)", "rgb(89, 166, 89)"); +test_valid_value("color", "hsl(120 30 50% / 0.5)", "rgba(89, 166, 89, 0.5)"); +test_valid_value("color", "hsl(120 none 50)", "rgb(128, 128, 128)"); +test_valid_value("color", "hsl(120 none 50 / 0.5)", "rgba(128, 128, 128, 0.5)"); +test_valid_value("color", "hsl(120 30 none)", "rgb(0, 0, 0)"); +test_valid_value("color", "hsl(120 30 none / 0.5)", "rgba(0, 0, 0, 0.5)"); +test_valid_value("color", "hsl(120 30 50 / none)", "rgba(89, 166, 89, 0)"); + +// Test non-finite values. calc(infinity) goes to upper bound while calc(-infinity) and NaN go to the lower bound. +// See: https://github.com/w3c/csswg-drafts/issues/8629 +test_valid_value("color", "hsl(calc(infinity) 100% 50%)", "rgb(255, 0, 0)"); // hsl(360 100% 50%) +test_valid_value("color", "hsl(calc(-infinity) 100% 50%)", "rgb(255, 0, 0)"); // hsl(0 100% 50%) +test_valid_value("color", "hsl(calc(0 / 0) 100% 50%)", "rgb(255, 0, 0)"); // hsl(0 100% 50%) +test_valid_value("color", "hsl(90 50% 50% / calc(infinity))", "rgb(128, 191, 64)"); // hsl(90 50% 50%) +test_valid_value("color", "hsl(90 50% 50% / calc(-infinity))", "rgba(128, 191, 64, 0)"); // hsl(90 50% 50% / 0) +test_valid_value("color", "hsl(90 50% 50% / calc(0 / 0))", "rgba(128, 191, 64, 0)"); // hsl(90 50% 50% / 0) +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-hwb.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-hwb.html new file mode 100644 index 0000000000..374634c084 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-hwb.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using valid HWB notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#the-hwb-notation"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("color", "hwb(120 30% 50%)", "rgb(77, 128, 77)"); +test_valid_value("color", "hwb(120 30% 50% / 0.5)", "rgba(77, 128, 77, 0.5)"); +test_valid_value("color", "hwb(none none none)", "rgb(255, 0, 0)"); +test_valid_value("color", "hwb(0 0% 0%)", "rgb(255, 0, 0)"); +test_valid_value("color", "hwb(none none none / none)", "rgba(255, 0, 0, 0)"); +test_valid_value("color", "hwb(0 0% 0% / 0)", "rgba(255, 0, 0, 0)"); +test_valid_value("color", "hwb(120 none none)", "rgb(0, 255, 0)"); +test_valid_value("color", "hwb(120 0% 0%)", "rgb(0, 255, 0)"); +test_valid_value("color", "hwb(120 80% none)", "rgb(204, 255, 204)"); +test_valid_value("color", "hwb(120 80% 0%)", "rgb(204, 255, 204)"); +test_valid_value("color", "hwb(120 none 50%)", "rgb(0, 128, 0)"); +test_valid_value("color", "hwb(120 0% 50%)", "rgb(0, 128, 0)"); +test_valid_value("color", "hwb(120 30% 50% / none)", "rgba(77, 128, 77, 0)"); +test_valid_value("color", "hwb(120 30% 50% / 0)", "rgba(77, 128, 77, 0)"); +test_valid_value("color", "hwb(none 100% 50% / none)", "rgba(170, 170, 170, 0)"); +test_valid_value("color", "hwb(0 100% 50% / 0)", "rgba(170, 170, 170, 0)"); + +// Test with number components. +test_valid_value("color", "hwb(120 30 50)", "rgb(77, 128, 77)"); +test_valid_value("color", "hwb(120 30 50 / 0.5)", "rgba(77, 128, 77, 0.5)"); +test_valid_value("color", "hwb(120 30% 50)", "rgb(77, 128, 77)"); +test_valid_value("color", "hwb(120 30% 50 / 0.5)", "rgba(77, 128, 77, 0.5)"); +test_valid_value("color", "hwb(120 30 50%)", "rgb(77, 128, 77)"); +test_valid_value("color", "hwb(120 30 50% / 0.5)", "rgba(77, 128, 77, 0.5)"); +test_valid_value("color", "hwb(120 none 50)", "rgb(0, 128, 0)"); +test_valid_value("color", "hwb(120 none 50 / 0.5)", "rgba(0, 128, 0, 0.5)"); +test_valid_value("color", "hwb(120 30 none)", "rgb(77, 255, 77)"); +test_valid_value("color", "hwb(120 30 none / 0.5)", "rgba(77, 255, 77, 0.5)"); +test_valid_value("color", "hwb(120 30 50 / none)", "rgba(77, 128, 77, 0)"); + +// Test that rounding happens properly. hwb(320deg 30% 40%) in sRGB has a blue +// channel of exactly one-half. +// 0.5 * 255 = 127.5. This value should be rounded UP to 128, not down to 127. +test_valid_value("color", "hwb(320deg 30% 40%)", "rgb(153, 77, 128)"); + +// Test non-finite values. calc(infinity) goes to upper bound while calc(-infinity) and NaN go to the lower bound. +// See: https://github.com/w3c/csswg-drafts/issues/8629 +test_valid_value("color", "hwb(calc(infinity) 20% 10%)", "rgb(230, 51, 51)"); // hwb(360 20% 10%) +test_valid_value("color", "hwb(calc(-infinity) 20% 10%)", "rgb(230, 51, 51)"); // hwb(0 20% 10%) +test_valid_value("color", "hwb(calc(0 / 0) 20% 10%)", "rgb(230, 51, 51)"); // hwb(0 20% 10%) +test_valid_value("color", "hwb(90 20% 10% / calc(infinity))", "rgb(140, 230, 51)"); // hwb(90 20% 10%) +test_valid_value("color", "hwb(90 20% 10% / calc(-infinity))", "rgba(140, 230, 51, 0)"); // hwb(90 20% 10% / 0) +test_valid_value("color", "hwb(90 20% 10% / calc(0 / 0))", "rgba(140, 230, 51, 0)"); // hwb(90 20% 10% / 0) + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-lab.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-lab.html new file mode 100644 index 0000000000..95423f1965 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-lab.html @@ -0,0 +1,157 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using valid Lab notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#lab-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-lab-lch-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-oklab-oklch-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-lab-lch"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-oklab-oklch"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> + +// lab() +test_valid_value("color", "lab(0 0 0)", "lab(0 0 0)"); +test_valid_value("color", "lab(0 0 0 / 1)", "lab(0 0 0)"); +test_valid_value("color", "lab(0 0 0 / 0.5)", "lab(0 0 0 / 0.5)"); +test_valid_value("color", "lab(20 0 10/0.5)", "lab(20 0 10 / 0.5)"); +test_valid_value("color", "lab(20 0 10/50%)", "lab(20 0 10 / 0.5)"); +test_valid_value("color", "lab(400 0 10/50%)", "lab(100 0 10 / 0.5)"); +test_valid_value("color", "lab(50 -160 160)", "lab(50 -160 160)"); +test_valid_value("color", "lab(50 -200 200)", "lab(50 -200 200)"); +test_valid_value("color", "lab(0 0 0 / -10%)", "lab(0 0 0 / 0)"); +test_valid_value("color", "lab(0 0 0 / 110%)", "lab(0 0 0)"); +test_valid_value("color", "lab(0 0 0 / 300%)", "lab(0 0 0)"); +test_valid_value("color", "lab(-40 0 0)", "lab(0 0 0)"); +test_valid_value("color", "lab(50 -20 0)", "lab(50 -20 0)"); +test_valid_value("color", "lab(50 0 -20)", "lab(50 0 -20)"); +test_valid_value("color", "lab(calc(50 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))", "lab(100 -0.5 1.5 / 0.5)"); +test_valid_value("color", "lab(calc(-50 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))", "lab(0 1.5 -1.5 / 0)"); + +test_valid_value("color", "lab(none none none / none)", "lab(none none none / none)"); +test_valid_value("color", "lab(none none none)", "lab(none none none)"); +test_valid_value("color", "lab(20 none none / none)", "lab(20 none none / none)"); +test_valid_value("color", "lab(none none none / 0.5)", "lab(none none none / 0.5)"); +test_valid_value("color", "lab(0 0 0 / none)", "lab(0 0 0 / none)"); + +test_valid_value("color", "lab(calc(infinity) 0 0)", "lab(100 0 0)"); +test_valid_value("color", "lab(50 calc(infinity) 0)", "lab(50 calc(infinity) 0)"); +test_valid_value("color", "lab(50 calc(-infinity) 0)", "lab(50 calc(-infinity) 0)"); +test_valid_value("color", "lab(calc(NaN) 0 0)", "lab(calc(NaN) 0 0)"); +test_valid_value("color", "lab(calc(0 / 0) 0 0)", "lab(calc(NaN) 0 0)"); + +// oklab() +test_valid_value("color", "oklab(0 0 0)", "oklab(0 0 0)"); +test_valid_value("color", "oklab(0 0 0 / 1)", "oklab(0 0 0)"); +test_valid_value("color", "oklab(0 0 0 / 0.5)", "oklab(0 0 0 / 0.5)"); +test_valid_value("color", "oklab(0.2 0 0.1/0.5)", "oklab(0.2 0 0.1 / 0.5)"); +test_valid_value("color", "oklab(0.2 0 0.1/50%)", "oklab(0.2 0 0.1 / 0.5)"); +test_valid_value("color", "oklab(4 0 0.1/50%)", "oklab(1 0 0.1 / 0.5)"); +test_valid_value("color", "oklab(0.5 -1.6 1.6)", "oklab(0.5 -1.6 1.6)"); +test_valid_value("color", "oklab(0.5 -2 2)", "oklab(0.5 -2 2)"); +test_valid_value("color", "oklab(0 0 0 / -10%)", "oklab(0 0 0 / 0)"); +test_valid_value("color", "oklab(0 0 0 / 110%)", "oklab(0 0 0)"); +test_valid_value("color", "oklab(0 0 0 / 300%)", "oklab(0 0 0)"); +test_valid_value("color", "oklab(-0.4 0 0)", "oklab(0 0 0)"); +test_valid_value("color", "oklab(0.5 -2 0)", "oklab(0.5 -2 0)"); +test_valid_value("color", "oklab(0.5 0 -2)", "oklab(0.5 0 -2)"); +test_valid_value("color", "oklab(calc(0.5 * 3) calc(0.5 - 1) calc(1.5) / calc(-0.5 + 1))", "oklab(1 -0.5 1.5 / 0.5)"); +test_valid_value("color", "oklab(calc(-0.5 * 3) calc(0.5 + 1) calc(-1.5) / calc(-0.5 * 2))", "oklab(0 1.5 -1.5 / 0)"); + +test_valid_value("color", "oklab(none none none / none)", "oklab(none none none / none)"); +test_valid_value("color", "oklab(none none none)", "oklab(none none none)"); +test_valid_value("color", "oklab(0.2 none none / none)", "oklab(0.2 none none / none)"); +test_valid_value("color", "oklab(none none none / 0.5)", "oklab(none none none / 0.5)"); +test_valid_value("color", "oklab(0 0 0 / none)", "oklab(0 0 0 / none)"); + +// These tests validate the ranges of lab() vs. oklab() components +test_valid_value("color", "lab(20% -50% 90%/0.5)", "lab(20 -62.5 112.5 / 0.5)"); +test_valid_value("color", "oklab(20% 70% -80%/0.5)", "oklab(0.2 0.28 -0.32 / 0.5)"); + +test_valid_value("color", "oklab(calc(infinity) 0 0)", "oklab(1 0 0)"); +test_valid_value("color", "oklab(0.5 calc(infinity) 0)", "oklab(0.5 calc(infinity) 0)"); +test_valid_value("color", "oklab(0.5 calc(-infinity) 0)", "oklab(0.5 calc(-infinity) 0)"); +test_valid_value("color", "oklab(calc(NaN) 0 0)", "oklab(calc(NaN) 0 0)"); +test_valid_value("color", "oklab(calc(0 / 0) 0 0)", "oklab(calc(NaN) 0 0)"); + +// lch() +test_valid_value("color", "lch(0 0 0deg)", "lch(0 0 0)"); +test_valid_value("color", "lch(0 0 0deg / 1)", "lch(0 0 0)"); +test_valid_value("color", "lch(0 0 0deg / 0.5)", "lch(0 0 0 / 0.5)"); +test_valid_value("color", "lch(100 230 0deg / 0.5)", "lch(100 230 0 / 0.5)"); +test_valid_value("color", "lch(20 50 20deg/0.5)", "lch(20 50 20 / 0.5)"); +test_valid_value("color", "lch(20 50 20deg/50%)", "lch(20 50 20 / 0.5)"); +test_valid_value("color", "lch(10 20 20deg / -10%)", "lch(10 20 20 / 0)"); +test_valid_value("color", "lch(10 20 20deg / 110%)", "lch(10 20 20)"); +test_valid_value("color", "lch(10 20 1.28rad)", "lch(10 20 73.3386)"); +test_valid_value("color", "lch(10 20 380deg)", "lch(10 20 20)"); +test_valid_value("color", "lch(10 20 -340deg)", "lch(10 20 20)"); +test_valid_value("color", "lch(10 20 740deg)", "lch(10 20 20)"); +test_valid_value("color", "lch(10 20 -700deg)", "lch(10 20 20)"); +test_valid_value("color", "lch(-40 0 0)", "lch(0 0 0)"); +test_valid_value("color", "lch(20 -20 0)", "lch(20 0 0)"); +test_valid_value("color", "lch(0 0 0 / 0.5)", "lch(0 0 0 / 0.5)"); +test_valid_value("color", "lch(10 20 20 / 110%)", "lch(10 20 20)"); +test_valid_value("color", "lch(10 20 -700)", "lch(10 20 20)"); +test_valid_value("color", "lch(calc(50 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))", "lch(100 0 40 / 0.5)"); +test_valid_value("color", "lch(calc(-50 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))", "lch(0 1.5 320 / 0)"); + +test_valid_value("color", "lch(none none none / none)", "lch(none none none / none)"); +test_valid_value("color", "lch(none none none)", "lch(none none none)"); +test_valid_value("color", "lch(20 none none / none)", "lch(20 none none / none)"); +test_valid_value("color", "lch(none none none / 0.5)", "lch(none none none / 0.5)"); +test_valid_value("color", "lch(0 0 0 / none)", "lch(0 0 0 / none)"); + +test_valid_value("color", "lch(calc(infinity) 0 0)", "lch(100 0 0)"); +test_valid_value("color", "lch(50 calc(infinity) 0)", "lch(50 calc(infinity) 0)"); +test_valid_value("color", "lch(50 calc(-infinity) 0)", "lch(50 0 0)"); +test_valid_value("color", "lch(calc(NaN) 0 0)", "lch(calc(NaN) 0 0)"); +test_valid_value("color", "lch(calc(0 / 0) 0 0)", "lch(calc(NaN) 0 0)"); + +// oklch() +test_valid_value("color", "oklch(0 0 0deg)", "oklch(0 0 0)"); +test_valid_value("color", "oklch(0 0 0deg / 1)", "oklch(0 0 0)"); +test_valid_value("color", "oklch(0 0 0deg / 0.5)", "oklch(0 0 0 / 0.5)"); +test_valid_value("color", "oklch(1 2.3 0deg / 0.5)", "oklch(1 2.3 0 / 0.5)"); +test_valid_value("color", "oklch(0.2 0.5 20deg/0.5)", "oklch(0.2 0.5 20 / 0.5)"); +test_valid_value("color", "oklch(0.2 0.5 20deg/50%)", "oklch(0.2 0.5 20 / 0.5)"); +test_valid_value("color", "oklch(0.1 0.2 20deg / -10%)", "oklch(0.1 0.2 20 / 0)"); +test_valid_value("color", "oklch(0.1 0.2 20deg / 110%)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(0.1 0.2 1.28rad)", "oklch(0.1 0.2 73.3386)"); +test_valid_value("color", "oklch(0.1 0.2 380deg)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(0.1 0.2 -340deg)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(0.1 0.2 740deg)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(0.1 0.2 -700deg)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(-4 0 0)", "oklch(0 0 0)"); +test_valid_value("color", "oklch(0.2 -0.2 0)", "oklch(0.2 0 0)"); +test_valid_value("color", "oklch(0 0 0 / 0.5)", "oklch(0 0 0 / 0.5)"); +test_valid_value("color", "oklch(0.1 0.2 20 / 110%)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(0.1 0.2 -700)", "oklch(0.1 0.2 20)"); +test_valid_value("color", "oklch(calc(0.5 * 3) calc(0.5 - 1) calc(20deg * 2) / calc(-0.5 + 1))", "oklch(1 0 40 / 0.5)"); +test_valid_value("color", "oklch(calc(-0.5 * 3) calc(0.5 + 1) calc(-20deg * 2) / calc(-0.5 * 2))", "oklch(0 1.5 320 / 0)"); + +test_valid_value("color", "oklch(none none none / none)", "oklch(none none none / none)"); +test_valid_value("color", "oklch(none none none)", "oklch(none none none)"); +test_valid_value("color", "oklch(0.2 none none / none)", "oklch(0.2 none none / none)"); +test_valid_value("color", "oklch(none none none / 0.5)", "oklch(none none none / 0.5)"); +test_valid_value("color", "oklch(0 0 0 / none)", "oklch(0 0 0 / none)"); + + +// These tests validate the ranges of lch() vs. oklch() lightness and chroma +test_valid_value("color", "lch(20% 80% 10/0.5)", "lch(20 120 10 / 0.5)"); +test_valid_value("color", "oklch(20% 60% 10/0.5)", "oklch(0.2 0.24 10 / 0.5)"); + +test_valid_value("color", "oklch(calc(infinity) 0 0)", "oklch(1 0 0)"); +test_valid_value("color", "oklch(0.5 calc(infinity) 0)", "oklch(0.5 calc(infinity) 0)"); +test_valid_value("color", "oklch(0.5 calc(-infinity) 0)", "oklch(0.5 0 0)"); +test_valid_value("color", "oklch(calc(NaN) 0 0)", "oklch(calc(NaN) 0 0)"); +test_valid_value("color", "oklch(calc(0 / 0) 0 0)", "oklch(calc(NaN) 0 0)"); + +</script> +</body> +</html> 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 new file mode 100644 index 0000000000..543c2486c0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-relative-color.html @@ -0,0 +1,738 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Parsing and serialization of colors using valid relative color syntax</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#relative-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-relative-color"> +<meta name="assert" content="colors using relative color syntax parse and serialize as expected"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script src="/css/support/color-testcommon.js"></script> +<style> + html { + --bg-color: blue; + --color: green; + --accent: lightseagreen; + --mycolor: orchid; + --mygray: lch(from var(--mycolor) l 0 h); + } +</style> +</head> +<body> +<script> + // rgb(from ...) + + // 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)`); + + // 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)`); + + // 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 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 'currentColor' + fuzzy_test_valid_color(`rgb(from currentColor r g b)`, `rgb(from currentColor r g b)`); + + // hsl(from ...) + + // 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)`); + + // 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)`); + + // 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 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 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 '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 'currentColor' + fuzzy_test_valid_color(`hsl(from currentColor h s l)`, `hsl(from currentColor h s l)`); + + // hwb(from ...) + + // Testing no modifications. + fuzzy_test_valid_color(`hwb(from rebeccapurple h w b)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`hwb(from hsl(120deg 20% 50% / .5) h w b / alpha)`, `color(srgb 0.4 0.6 0.4 / 0.5)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`hwb(from hwb(from rebeccapurple h w b) h w b)`, `color(srgb 0.4 0.2 0.6)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`hwb(from rebeccapurple 0 0% 0%)`, `color(srgb 1 0 0)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple 0deg 0% 0%)`, `color(srgb 1 0 0)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple 0 0% 0% / 0)`, `color(srgb 1 0 0 / 0)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple 0deg 0% 0% / 0)`, `color(srgb 1 0 0 / 0)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple 0 w b / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple 0deg w b / alpha)`, `color(srgb 0.6 0.2 0.2)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h 0% b / alpha)`, `color(srgb 0.3 0 0.6)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w 0% / alpha)`, `color(srgb 0.6 0.2 1)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w b / 0)`, `color(srgb 0.4 0.2 0.6 / 0)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) 0 w b / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) 0deg w b / alpha)`, `color(srgb 0.6 0.2 0.2 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h 0% b / alpha)`, `color(srgb 0 0.3 0.6 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w 0% / alpha)`, `color(srgb 0.2 0.6 1 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w b / 0)`, `color(srgb 0.2 0.4 0.6 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`hwb(from rebeccapurple 25 w b / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple 25deg w b / alpha)`, `color(srgb 0.6 0.3667 0.2)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h 20% b / alpha)`, `color(srgb 0.4 0.2 0.6)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w 20% / alpha)`, `color(srgb 0.5 0.2 0.8)`); + fuzzy_test_valid_color(`hwb(from rebeccapurple h w b / .2)`, `color(srgb 0.4 0.2 0.6 / 0.2)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) 25 w b / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) 25deg w b / alpha)`, `color(srgb 0.6 0.3667 0.2 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h 20% b / alpha)`, `color(srgb 0.2 0.4 0.6 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w 20% / alpha)`, `color(srgb 0.2 0.5 0.8 / 0.8)`); + fuzzy_test_valid_color(`hwb(from rgb(20%, 40%, 60%, 80%) h w b / .2)`, `color(srgb 0.2 0.4 0.6 / 0.2)`); + + // 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 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)`); + + // 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 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 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)`); + // 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)`); + fuzzy_test_valid_color(`hwb(from hwb(120deg none 50% / .5) h w b)`, `color(srgb 0 0.5 0 / 0.5)`); + fuzzy_test_valid_color(`hwb(from hwb(120deg 20% 50% / none) h w b / alpha)`, `color(srgb 0.2 0.5 0.2 / 0)`); + fuzzy_test_valid_color(`hwb(from hwb(none 20% 50% / .5) h w b / alpha)`, `color(srgb 0.5 0.2 0.2 / 0.5)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`hwb(from currentColor h w b)`, `hwb(from currentColor h w b)`); + + // lab() + + // Testing no modifications. + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a b)`, `lab(25 20 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a b / alpha)`, `lab(25 20 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a b / alpha)`, `lab(25 20 50 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(200 300 400 / 500%) l a b / alpha)`, `lab(100 300 400)`); + fuzzy_test_valid_color(`lab(from lab(-200 -300 -400 / -500%) l a b / alpha)`, `lab(0 -300 -400 / 0)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`lab(from lab(from lab(25 20 50) l a b) l a b)`, `lab(25 20 50)`); + + // Testing non-lab origin to see conversion. + fuzzy_test_valid_color(`lab(from color(display-p3 0 0 0) l a b / alpha)`, `lab(0 0 0)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`lab(from lab(25 20 50) 0 0 0)`, `lab(0 0 0)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) 0 0 0 / 0)`, `lab(0 0 0 / 0)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) 0 a b / alpha)`, `lab(0 20 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l 0 b / alpha)`, `lab(25 0 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a 0 / alpha)`, `lab(25 20 0)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a b / 0)`, `lab(25 20 50 / 0)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) 0 a b / alpha)`, `lab(0 20 50 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l 0 b / alpha)`, `lab(25 0 50 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a 0 / alpha)`, `lab(25 20 0 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a b / 0)`, `lab(25 20 50 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`lab(from lab(25 20 50) 35 a b / alpha)`, `lab(35 20 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l 35 b / alpha)`, `lab(25 35 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a 35 / alpha)`, `lab(25 20 35)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a b / .35)`, `lab(25 20 50 / 0.35)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) 35 a b / alpha)`, `lab(35 20 50 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l 35 b / alpha)`, `lab(25 35 50 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a 35 / alpha)`, `lab(25 20 35 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a b / .35)`, `lab(25 20 50 / 0.35)`); + fuzzy_test_valid_color(`lab(from lab(0.7 45 30 / 40%) 200 300 400 / 500)`, `lab(100 300 400)`); + fuzzy_test_valid_color(`lab(from lab(0.7 45 30 / 40%) -200 -300 -400 / -500)`, `lab(0 -300 -400 / 0)`); + + // Testing valid permutation (types match). + fuzzy_test_valid_color(`lab(from lab(25 20 50) l b a)`, `lab(25 50 20)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a a / a)`, `lab(25 20 20)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l b a)`, `lab(25 50 20 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a a / a)`, `lab(25 20 20)`); + + // Testing with calc(). + fuzzy_test_valid_color(`lab(from lab(25 20 50) calc(l) calc(a) calc(b))`, `lab(25 20 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `lab(25 20 50 / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(50 -30 40) calc(l - 20) a b)`, `lab(30 -30 40)`); + fuzzy_test_valid_color(`lab(from lab(50 -30 40) l calc(a / 3) calc(b / 2))`, `lab(50 -10 20)`); + + // Testing with 'none'. + fuzzy_test_valid_color(`lab(from lab(25 20 50) none none none)`, `lab(none none none)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) none none none / none)`, `lab(none none none / none)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a none)`, `lab(25 20 none)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a none / alpha)`, `lab(25 20 none)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50) l a b / none)`, `lab(25 20 50 / none)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a none / alpha)`, `lab(25 20 none / 0.4)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / 40%) l a b / none)`, `lab(25 20 50 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`lab(from lab(none none none) l a b)`, `lab(0 0 0)`); + fuzzy_test_valid_color(`lab(from lab(none none none / none) l a b / alpha)`, `lab(0 0 0 / 0)`); + fuzzy_test_valid_color(`lab(from lab(25 none 50) l a b)`, `lab(25 0 50)`); + fuzzy_test_valid_color(`lab(from lab(25 20 50 / none) l a b / alpha)`, `lab(25 20 50 / 0)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`lab(from currentColor l a b)`, `lab(from currentColor l a b)`); + + // oklab() + + // Testing no modifications. + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a b)`, `oklab(0.25 0.2 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a b / alpha)`, `oklab(0.25 0.2 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / alpha)`, `oklab(0.25 0.2 0.5 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(2 3 4 / 500%) l a b / alpha)`, `oklab(1 3 4)`); + fuzzy_test_valid_color(`oklab(from oklab(-2 -3 -4 / -500%) l a b / alpha)`, `oklab(0 -3 -4 / 0)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`oklab(from oklab(from oklab(0.25 0.2 0.5) l a b) l a b)`, `oklab(0.25 0.2 0.5)`); + + // Testing non-oklab origin to see conversion. + fuzzy_test_valid_color(`oklab(from color(display-p3 0 0 0) l a b / alpha)`, `oklab(0 0 0)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) 0 0 0)`, `oklab(0 0 0)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) 0 0 0 / 0)`, `oklab(0 0 0 / 0)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) 0 a b / alpha)`, `oklab(0 0.2 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l 0 b / alpha)`, `oklab(0.25 0 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a 0 / alpha)`, `oklab(0.25 0.2 0)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a b / 0)`, `oklab(0.25 0.2 0.5 / 0)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) 0 a b / alpha)`, `oklab(0 0.2 0.5 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l 0 b / alpha)`, `oklab(0.25 0 0.5 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a 0 / alpha)`, `oklab(0.25 0.2 0 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / 0)`, `oklab(0.25 0.2 0.5 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) 0.35 a b / alpha)`, `oklab(0.35 0.2 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l 0.35 b / alpha)`, `oklab(0.25 0.35 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a 0.35 / alpha)`, `oklab(0.25 0.2 0.35)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a b / .35)`, `oklab(0.25 0.2 0.5 / 0.35)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) 0.35 a b / alpha)`, `oklab(0.35 0.2 0.5 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l 0.35 b / alpha)`, `oklab(0.25 0.35 0.5 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a 0.35 / alpha)`, `oklab(0.25 0.2 0.35 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / .35)`, `oklab(0.25 0.2 0.5 / 0.35)`); + fuzzy_test_valid_color(`oklab(from oklab(0.7 0.45 0.3 / 40%) 2 3 4 / 500)`, `oklab(1 3 4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.7 0.45 0.3 / 40%) -2 -3 -4 / -500)`, `oklab(0 -3 -4 / 0)`); + + // Testing valid permutation (types match). + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l b a)`, `oklab(0.25 0.5 0.2)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a a / a)`, `oklab(0.25 0.2 0.2 / 0.2)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l b a)`, `oklab(0.25 0.5 0.2 / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a a / a)`, `oklab(0.25 0.2 0.2 / 0.2)`); + + // Testing with calc(). + 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)`); + + // Testing with 'none'. + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) none none none)`, `oklab(none none none)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) none none none / none)`, `oklab(none none none / none)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a none)`, `oklab(0.25 0.2 none)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a none / alpha)`, `oklab(0.25 0.2 none)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5) l a b / none)`, `oklab(0.25 0.2 0.5 / none)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a none / alpha)`, `oklab(0.25 0.2 none / 0.4)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / 40%) l a b / none)`, `oklab(0.25 0.2 0.5 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`oklab(from oklab(none none none) l a b)`, `oklab(0 0 0)`); + fuzzy_test_valid_color(`oklab(from oklab(none none none / none) l a b / alpha)`, `oklab(0 0 0 / 0)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 none 0.5) l a b)`, `oklab(0.25 0 0.5)`); + fuzzy_test_valid_color(`oklab(from oklab(0.25 0.2 0.5 / none) l a b / alpha)`, `oklab(0.25 0.2 0.5 / 0)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`oklab(from currentColor l a b)`, `oklab(from currentColor l a b)`); + + // lch() + + // Testing no modifications. + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c h)`, `lch(0.7 45 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c h / alpha)`, `lch(0.7 45 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c h / alpha)`, `lch(0.7 45 30 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(200 300 400 / 500%) l c h / alpha)`, `lch(100 300 40)`); + fuzzy_test_valid_color(`lch(from lch(-200 -300 -400 / -500%) l c h / alpha)`, `lch(0 0 320 / 0)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`lch(from lch(from lch(0.7 45 30) l c h) l c h)`, `lch(0.7 45 30)`); + + // Testing non-sRGB origin colors (no gamut mapping will happen since the destination is not a bounded RGB color space). + fuzzy_test_valid_color(`lch(from color(display-p3 0 0 0) l c h / alpha)`, `lch(0 0 0)`); + fuzzy_test_valid_color(`lch(from lab(0.7 45 30) l c h / alpha)`, `lch(0.7 54.08327 33.690067)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) 0 0 0)`, `lch(0 0 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) 0 0 0deg)`, `lch(0 0 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) 0 0 0 / 0)`, `lch(0 0 0 / 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) 0 0 0deg / 0)`, `lch(0 0 0 / 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) 0 c h / alpha)`, `lch(0 45 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l 0 h / alpha)`, `lch(0.7 0 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c 0 / alpha)`, `lch(0.7 45 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c 0deg / alpha)`, `lch(0.7 45 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c h / 0)`, `lch(0.7 45 30 / 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) 0 c h / alpha)`, `lch(0 45 30 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l 0 h / alpha)`, `lch(0.7 0 30 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c 0 / alpha)`, `lch(0.7 45 0 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c 0deg / alpha)`, `lch(0.7 45 0 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c h / 0)`, `lch(0.7 45 30 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) 25 c h / alpha)`, `lch(25 45 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l 25 h / alpha)`, `lch(0.7 25 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c 25 / alpha)`, `lch(0.7 45 25)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c 25deg / alpha)`, `lch(0.7 45 25)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c h / .25)`, `lch(0.7 45 30 / 0.25)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) 25 c h / alpha)`, `lch(25 45 30 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l 25 h / alpha)`, `lch(0.7 25 30 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c 25 / alpha)`, `lch(0.7 45 25 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c 25deg / alpha)`, `lch(0.7 45 25 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c h / .25)`, `lch(0.7 45 30 / 0.25)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) 200 300 400 / 500)`, `lch(100 300 40)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) -200 -300 -400 / -500)`, `lch(0 0 320 / 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) 50 120 400deg / 500)`, `lch(50 120 40)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) 50 120 -400deg / -500)`, `lch(50 120 320 / 0)`); + + // Testing valid permutation (types match). + // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>. + fuzzy_test_valid_color(`lch(from lch(.7 45 30) l c c / alpha)`, `lch(0.7 45 45)`); + fuzzy_test_valid_color(`lch(from lch(.7 45 30 / 40%) l c c / alpha)`, `lch(0.7 45 45 / 0.4)`); + + // Testing with calc(). + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) calc(l) calc(c) calc(h))`, `lch(0.7 45 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `lch(0.7 45 30 / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(50 100 300) calc(l - 20) c h)`, `lch(30 100 300)`); + fuzzy_test_valid_color(`lch(from lch(50 100 300) l calc(c / 2) h)`, `lch(50 50 300)`); + fuzzy_test_valid_color(`lch(from lch(50 100 300) l c calc(h * 2.5))`, `lch(50 100 30)`); + + // Testing with 'none'. + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) none none none)`, `lch(none none none)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) none none none / none)`, `lch(none none none / none)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c none)`, `lch(0.7 45 none)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c none / alpha)`, `lch(0.7 45 none)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30) l c h / none)`, `lch(0.7 45 30 / none)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c none / alpha)`, `lch(0.7 45 none / 0.4)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / 40%) l c h / none)`, `lch(0.7 45 30 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`lch(from lch(none none none) l c h)`, `lch(0 0 0)`); + fuzzy_test_valid_color(`lch(from lch(none none none / none) l c h / alpha)`, `lch(0 0 0 / 0)`); + fuzzy_test_valid_color(`lch(from lch(0.7 none 30) l c h)`, `lch(0.7 0 30)`); + fuzzy_test_valid_color(`lch(from lch(0.7 45 30 / none) l c h / alpha)`, `lch(0.7 45 30 / 0)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`lch(from currentColor) l c h)`, `lch(from currentColor) l c h)`); + + // oklch() + + // Testing no modifications. + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c h)`, `oklch(0.7 0.45 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c h / alpha)`, `oklch(0.7 0.45 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / alpha)`, `oklch(0.7 0.45 30 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(2 3 400 / 500%) l c h / alpha)`, `oklch(1 3 40)`); + fuzzy_test_valid_color(`oklch(from oklch(-2 -3 -400 / -500%) l c h / alpha)`, `oklch(0 0 320 / 0)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`oklch(from oklch(from oklch(0.7 0.45 30) l c h) l c h)`, `oklch(0.7 0.45 30)`); + + // Testing non-sRGB origin colors (no gamut mapping will happen since the destination is not a bounded RGB color space). + fuzzy_test_valid_color(`oklch(from color(display-p3 0 0 0) l c h / alpha)`, `oklch(0 0 0)`); + // TODO: redo conversion with oklab(0.7 0.45 0.3) + fuzzy_test_valid_color(`oklch(from oklab(0.7 45 30) l c h / alpha)`, `oklch(0.7 54.08327 33.690067)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) 0 0 0)`, `oklch(0 0 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) 0 0 0deg)`, `oklch(0 0 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) 0 0 0 / 0)`, `oklch(0 0 0 / 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) 0 0 0deg / 0)`, `oklch(0 0 0 / 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) 0 c h / alpha)`, `oklch(0 0.45 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l 0 h / alpha)`, `oklch(0.7 0 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c 0 / alpha)`, `oklch(0.7 0.45 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c 0deg / alpha)`, `oklch(0.7 0.45 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c h / 0)`, `oklch(0.7 0.45 30 / 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0 c h / alpha)`, `oklch(0 0.45 30 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l 0 h / alpha)`, `oklch(0.7 0 30 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 0 / alpha)`, `oklch(0.7 0.45 0 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 0deg / alpha)`, `oklch(0.7 0.45 0 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / 0)`, `oklch(0.7 0.45 30 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) 0.25 c h / alpha)`, `oklch(0.25 0.45 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l 0.25 h / alpha)`, `oklch(0.7 0.25 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c 0.25 / alpha)`, `oklch(0.7 0.45 0.25)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c 25deg / alpha)`, `oklch(0.7 0.45 25)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c h / .25)`, `oklch(0.7 0.45 30 / 0.25)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0.25 c h / alpha)`, `oklch(0.25 0.45 30 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l 0.25 h / alpha)`, `oklch(0.7 0.25 30 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 0.25 / alpha)`, `oklch(0.7 0.45 0.25 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c 25deg / alpha)`, `oklch(0.7 0.45 25 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / .25)`, `oklch(0.7 0.45 30 / 0.25)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) 2 3 400 / 500)`, `oklch(1 3 40)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) -2 -3 -400 / -500)`, `oklch(0 0 320 / 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0.5 1.2 400deg / 500)`, `oklch(0.5 1.2 40)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) 0.5 1.2 -400deg / -500)`, `oklch(0.5 1.2 320 / 0)`); + + // Testing valid permutation (types match). + // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>. + fuzzy_test_valid_color(`oklch(from oklch(.7 0.45 30) l c c / alpha)`, `oklch(0.7 0.45 0.45)`); + fuzzy_test_valid_color(`oklch(from oklch(.7 0.45 30 / 40%) l c c / alpha)`, `oklch(0.7 0.45 0.45 / 0.4)`); + + // Testing with calc(). + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) calc(l) calc(c) calc(h))`, `oklch(0.7 0.45 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `oklch(0.7 0.45 30 / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.2 300) calc(l - 0.2) c h)`, `oklch(0.5 0.2 300)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.2 300) l calc(c / 2) h)`, `oklch(0.7 0.1 300)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.2 300) l c calc(h * 2.5))`, `oklch(0.7 0.2 30)`); + + // Testing with 'none'. + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) none none none)`, `oklch(none none none)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) none none none / none)`, `oklch(none none none / none)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c none)`, `oklch(0.7 0.45 none)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c none / alpha)`, `oklch(0.7 0.45 none)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30) l c h / none)`, `oklch(0.7 0.45 30 / none)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c none / alpha)`, `oklch(0.7 0.45 none / 0.4)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / 40%) l c h / none)`, `oklch(0.7 0.45 30 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`oklch(from oklch(none none none) l c h)`, `oklch(0 0 0)`); + fuzzy_test_valid_color(`oklch(from oklch(none none none / none) l c h / alpha)`, `oklch(0 0 0 / 0)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 none 30) l c h)`, `oklch(0.7 0 30)`); + fuzzy_test_valid_color(`oklch(from oklch(0.7 0.45 30 / none) l c h / alpha)`, `oklch(0.7 0.45 30 / 0)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`oklch(from currentColor l c h)`, `oklch(from currentColor l c h)`); + + for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb", "display-p3" ]) { + // Testing no modifications. + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`color(from color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0.5 0.3)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0)`, `color(${colorSpace} 0 0 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0 / 0)`, `color(${colorSpace} 0 0 0 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 g b / alpha)`, `color(${colorSpace} 0 0.5 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0 b / alpha)`, `color(${colorSpace} 0.7 0 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0 / alpha)`, `color(${colorSpace} 0.7 0.5 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 0 g b / alpha)`, `color(${colorSpace} 0 0.5 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 0 b / alpha)`, `color(${colorSpace} 0.7 0 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 0 / alpha)`, `color(${colorSpace} 0.7 0.5 0 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 0)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0.2 g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 20% g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0.2 b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 20% b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0.2 / alpha)`, `color(${colorSpace} 0.7 0.5 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 20% / alpha)`, `color(${colorSpace} 0.7 0.5 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0.2)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 20%)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 0.2 g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} 20% g b / alpha)`, `color(${colorSpace} 0.2 0.5 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 0.2 b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r 20% b / alpha)`, `color(${colorSpace} 0.7 0.2 0.3 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 0.2 / alpha)`, `color(${colorSpace} 0.7 0.5 0.2 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g 20% / alpha)`, `color(${colorSpace} 0.7 0.5 0.2 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 0.2)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / 20%)`, `color(${colorSpace} 0.7 0.5 0.3 / 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 2 3 4)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 2 3 4 / 5)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -2 -3 -4)`, `color(${colorSpace} -2 -3 -4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -2 -3 -4 / -5)`, `color(${colorSpace} -2 -3 -4 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 200% 300% 400%)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 200% 300% 400% / 500%)`, `color(${colorSpace} 2 3 4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -200% -300% -400%)`, `color(${colorSpace} -2 -3 -4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} -200% -300% -400% / -500%)`, `color(${colorSpace} -2 -3 -4 / 0)`); + + // Testing valid permutation (types match). + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} g b r)`, `color(${colorSpace} 0.5 0.3 0.7)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} b alpha r / g)`, `color(${colorSpace} 0.3 1 0.7 / 0.5)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r r r / r)`, `color(${colorSpace} 0.7 0.7 0.7 / 0.7)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} alpha alpha alpha / alpha)`, `color(${colorSpace} 1 1 1)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} g b r)`, `color(${colorSpace} 0.5 0.3 0.7 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} b alpha r / g)`, `color(${colorSpace} 0.3 0.4 0.7 / 0.5)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r r r / r)`, `color(${colorSpace} 0.7 0.7 0.7 / 0.7)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} alpha alpha alpha / alpha)`, `color(${colorSpace} 0.4 0.4 0.4 / 0.4)`); + + // Testing out of gamut components. + fuzzy_test_valid_color(`color(from color(${colorSpace} 1.7 1.5 1.3) ${colorSpace} r g b)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 1.7 1.5 1.3) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 1.7 1.5 1.3 / 140%) ${colorSpace} r g b)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 1.7 1.5 1.3 / 140%) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 1.7 1.5 1.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3) ${colorSpace} r g b)`, `color(${colorSpace} -0.7 -0.5 -0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3) ${colorSpace} r g b / alpha)`, `color(${colorSpace} -0.7 -0.5 -0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3 / -40%) ${colorSpace} r g b)`, `color(${colorSpace} -0.7 -0.5 -0.3 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} -0.7 -0.5 -0.3 / -40%) ${colorSpace} r g b / alpha)`, `color(${colorSpace} -0.7 -0.5 -0.3 / 0)`); + + // Testing with calc(). + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} calc(r) calc(g) calc(b))`, `color(${colorSpace} 0.7 0.5 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} calc(r) calc(g) calc(b) / calc(alpha))`, `color(${colorSpace} 0.7 0.5 0.3 / 0.4)`); + + // Testing with 'none'. + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none)`, `color(${colorSpace} none none none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} none none none / none)`, `color(${colorSpace} none none none / none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g none)`, `color(${colorSpace} 0.7 0.5 none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g none / alpha)`, `color(${colorSpace} 0.7 0.5 none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / none)`, `color(${colorSpace} 0.7 0.5 0.3 / none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g none / alpha)`, `color(${colorSpace} 0.7 0.5 none / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b / none)`, `color(${colorSpace} 0.7 0.5 0.3 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`color(from color(${colorSpace} none none none) ${colorSpace} r g b)`, `color(${colorSpace} 0 0 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} none none none / none) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0 0 0 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 none 0.3) ${colorSpace} r g b)`, `color(${colorSpace} 0.7 0 0.3)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 0.7 0.5 0.3 / none) ${colorSpace} r g b / alpha)`, `color(${colorSpace} 0.7 0.5 0.3 / 0)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`color(from currentColor ${colorSpace} r g b)`, `color(from currentColor ${colorSpace} r g b)`); + + } + + for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) { + const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; + + // Testing no modifications. + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 -20.5 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); + + // Test nesting relative colors. + fuzzy_test_valid_color(`color(from color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 -20.5 100)`); + + // Testing replacement with 0. + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0)`, `color(${resultColorSpace} 0 0 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0 / 0)`, `color(${resultColorSpace} 0 0 0 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 y z / alpha)`, `color(${resultColorSpace} 0 -20.5 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0 z / alpha)`, `color(${resultColorSpace} 7 0 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0 / alpha)`, `color(${resultColorSpace} 7 -20.5 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0 y z / alpha)`, `color(${resultColorSpace} 0 -20.5 100 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0 z / alpha)`, `color(${resultColorSpace} 7 0 100 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0 / alpha)`, `color(${resultColorSpace} 7 -20.5 0 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / 0)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + + // Testing replacement with a constant. + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0.2 y z / alpha)`, `color(${resultColorSpace} 0.2 -20.5 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0.2 z / alpha)`, `color(${resultColorSpace} 7 0.2 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0.2 / alpha)`, `color(${resultColorSpace} 7 -20.5 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0.2)`, `color(${resultColorSpace} 7 -20.5 100 / 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 20%)`, `color(${resultColorSpace} 7 -20.5 100 / 0.2)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0.2 y z / alpha)`, `color(${resultColorSpace} 0.2 -20.5 100 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0.2 z / alpha)`, `color(${resultColorSpace} 7 0.2 100 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0.2 / alpha)`, `color(${resultColorSpace} 7 -20.5 0.2 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / 0.2)`, `color(${resultColorSpace} 7 -20.5 100 / 0.2)`); + + // Testing valid permutation (types match). + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} y z x)`, `color(${resultColorSpace} -20.5 100 7)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x x x / x)`, `color(${resultColorSpace} 7 7 7)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} y z x)`, `color(${resultColorSpace} -20.5 100 7 / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x x x / x)`, `color(${resultColorSpace} 7 7 7)`); + + // Testing with calc(). + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x) calc(y) calc(z))`, `color(${resultColorSpace} 7 -20.5 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} calc(x) calc(y) calc(z) / calc(alpha))`, `color(${resultColorSpace} 7 -20.5 100 / 0.4)`); + + // Testing with 'none'. + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none)`, `color(${resultColorSpace} none none none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} none none none / none)`, `color(${resultColorSpace} none none none / none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y none)`, `color(${resultColorSpace} 7 -20.5 none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y none / alpha)`, `color(${resultColorSpace} 7 -20.5 none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / none)`, `color(${resultColorSpace} 7 -20.5 100 / none)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y none / alpha)`, `color(${resultColorSpace} 7 -20.5 none / 0.4)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z / none)`, `color(${resultColorSpace} 7 -20.5 100 / none)`); + // FIXME: Clarify with spec editors if 'none' should pass through to the constants. + fuzzy_test_valid_color(`color(from color(${colorSpace} none none none) ${colorSpace} x y z)`, `color(${resultColorSpace} 0 0 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} none none none / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 0 0 0 / 0)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 none 100) ${colorSpace} x y z)`, `color(${resultColorSpace} 7 0 100)`); + fuzzy_test_valid_color(`color(from color(${colorSpace} 7 -20.5 100 / none) ${colorSpace} x y z / alpha)`, `color(${resultColorSpace} 7 -20.5 100 / 0)`); + + // Testing with 'currentColor' + fuzzy_test_valid_color(`color(from currentColor ${colorSpace} x y z)`, `color(from currentColor ${colorSpace} x y z)`); + } + + // Spec Examples: https://www.w3.org/TR/css-color-5/#relative-colors + fuzzy_test_valid_color(`rgb(from var(--bg-color) r g b / 80%)`); + fuzzy_test_valid_color(`lch(from var(--color) calc(l / 2) c h)`); + fuzzy_test_valid_color(`rgb(from var(--color) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11) calc(r * .3 + g * .59 + b * .11))`); + fuzzy_test_valid_color(`lch(from var(--color) l 0 h)`); + // This particular test does a lot of math so a wider epsilon is needed. + fuzzy_test_valid_color(`rgb(from indianred 255 g b)`, `color(srgb 1 0.36 0.36)`, 0.02 /* epsilon */); + fuzzy_test_valid_color(`hsl(from var(--accent) calc(h + 180) s l)`); + fuzzy_test_valid_color(`lab(from var(--mycolor) l a b / 100%)`); + fuzzy_test_valid_color(`lab(from var(--mycolor) l a b / calc(alpha * 0.8))`); + fuzzy_test_valid_color(`lab(from var(--mycolor) l 0 0)`); + // This particular test does a lot of math so a wider epsilon is needed. + fuzzy_test_valid_color(`lch(from peru calc(l * 0.8) c h)`, `lch(49.80 54 63.68)`, 0.02 /* epsilon */); + fuzzy_test_valid_color(`LCH(from var(--accent) l c calc(h + 180))`); + fuzzy_test_valid_color(`lch(from var(--mycolor) l 0 h)`); + fuzzy_test_valid_color(`var(--mygray)`); + fuzzy_test_valid_color(`lch(from var(--mygray) l 30 h)`); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-rgb.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-rgb.html new file mode 100644 index 0000000000..a4995ac7ff --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-rgb.html @@ -0,0 +1,73 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using valid RGB notation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-sRGB-values"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("color", "rgb(none none none)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(none none none / none)", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "rgb(128 none none)", "rgb(128, 0, 0)"); +test_valid_value("color", "rgb(128 none none / none)", "rgba(128, 0, 0, 0)"); +test_valid_value("color", "rgb(none none none / .5)", "rgba(0, 0, 0, 0.5)"); +test_valid_value("color", "rgb(20% none none)", "rgb(51, 0, 0)"); +test_valid_value("color", "rgb(20% none none / none)", "rgba(51, 0, 0, 0)"); +test_valid_value("color", "rgb(none none none / 50%)", "rgba(0, 0, 0, 0.5)"); +test_valid_value("color", "rgba(none none none)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgba(none none none / none)", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "rgba(128 none none)", "rgb(128, 0, 0)"); +test_valid_value("color", "rgba(128 none none / none)", "rgba(128, 0, 0, 0)"); +test_valid_value("color", "rgba(none none none / .5)", "rgba(0, 0, 0, 0.5)"); +test_valid_value("color", "rgba(20% none none)", "rgb(51, 0, 0)"); +test_valid_value("color", "rgba(20% none none / none)", "rgba(51, 0, 0, 0)"); +test_valid_value("color", "rgba(none none none / 50%)", "rgba(0, 0, 0, 0.5)"); +test_valid_value("color", "rgb(-2 3 4)", "rgb(0, 3, 4)"); +test_valid_value("color", "rgb(-20% 20% 40%)", "rgb(0, 51, 102)"); +test_valid_value("color", "rgb(257 30 40)", "rgb(255, 30, 40)"); +test_valid_value("color", "rgb(250% 20% 40%)", "rgb(255, 51, 102)"); +test_valid_value("color", "rgba(-2 3 4)", "rgb(0, 3, 4)"); +test_valid_value("color", "rgba(-20% 20% 40%)", "rgb(0, 51, 102)"); +test_valid_value("color", "rgba(257 30 40)", "rgb(255, 30, 40)"); +test_valid_value("color", "rgba(250% 20% 40%)", "rgb(255, 51, 102)"); +test_valid_value("color", "rgba(-2 3 4 / .5)", "rgba(0, 3, 4, 0.5)"); +test_valid_value("color", "rgba(-20% 20% 40% / 50%)", "rgba(0, 51, 102, 0.5)"); +test_valid_value("color", "rgba(257 30 40 / 50%)", "rgba(255, 30, 40, 0.5)"); +test_valid_value("color", "rgba(250% 20% 40% / .5)", "rgba(255, 51, 102, 0.5)"); + +// Test with mixed components. +test_valid_value("color", "rgb(250% 51 40%)", "rgb(255, 51, 102)"); +test_valid_value("color", "rgb(255 20% 102)", "rgb(255, 51, 102)"); + +// rgb are in the range [0, 255], alpha is in the range [0, 1]. +// Values above or below these numbers should get resolved to the upper/lower bound. +test_valid_value("color", "rgb(500, 0, 0)", "rgb(255, 0, 0)"); +test_valid_value("color", "rgb(-500, 64, 128)", "rgb(0, 64, 128)"); + +// calc(infinity) resolves to the upper bound while calc(-infinity) and calc(NaN) resolves the lower bound. +// See: https://github.com/w3c/csswg-drafts/issues/8629 +test_valid_value("color", "rgb(calc(infinity), 0, 0)", "rgb(255, 0, 0)"); +test_valid_value("color", "rgb(0, calc(infinity), 0)", "rgb(0, 255, 0)"); +test_valid_value("color", "rgb(0, 0, calc(infinity))", "rgb(0, 0, 255)"); +test_valid_value("color", "rgba(0, 0, 0, calc(infinity))", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(calc(-infinity), 0, 0)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(0, calc(-infinity), 0)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(0, 0, calc(-infinity))", "rgb(0, 0, 0)"); +test_valid_value("color", "rgba(0, 0, 0, calc(-infinity))", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "rgb(calc(NaN), 0, 0)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(0, calc(NaN), 0)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(0, 0, calc(NaN))", "rgb(0, 0, 0)"); +test_valid_value("color", "rgba(0, 0, 0, calc(NaN))", "rgba(0, 0, 0, 0)"); +test_valid_value("color", "rgb(calc(0 / 0), 0, 0)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(0, calc(0 / 0), 0)", "rgb(0, 0, 0)"); +test_valid_value("color", "rgb(0, 0, calc(0 / 0))", "rgb(0, 0, 0)"); +test_valid_value("color", "rgba(0, 0, 0, calc(0 / 0))", "rgba(0, 0, 0, 0)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid-system-color.html b/testing/web-platform/tests/css/css-color/parsing/color-valid-system-color.html new file mode 100644 index 0000000000..af644aaa45 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid-system-color.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 4: Parsing and serialization of colors using valid system color values</title> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#css-system-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-other-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#serializing-sRGB-values"> +<meta name="assert" content="system color keyword support"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("color", "ActiveText", "activetext"); +test_valid_value("color", "ButtonBorder", "buttonborder"); +test_valid_value("color", "ButtonFace", "buttonface"); +test_valid_value("color", "ButtonText", "buttontext"); +test_valid_value("color", "Canvas", "canvas"); +test_valid_value("color", "CanvasText", "canvastext"); +test_valid_value("color", "Field", "field"); +test_valid_value("color", "FieldText", "fieldtext"); +test_valid_value("color", "GrayText", "graytext"); +test_valid_value("color", "Highlight", "highlight"); +test_valid_value("color", "HighlightText", "highlighttext"); +test_valid_value("color", "LinkText", "linktext"); +test_valid_value("color", "Mark", "mark"); +test_valid_value("color", "MarkText", "marktext"); +test_valid_value("color", "VisitedText", "visitedtext"); +test_valid_value("color", "SelectedItem", "selecteditem"); +test_valid_value("color", "SelectedItemText", "selecteditemtext"); +test_valid_value("color", "AccentColor", "accentcolor"); +test_valid_value("color", "AccentColorText", "accentcolortext"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/color-valid.html b/testing/web-platform/tests/css/css-color/parsing/color-valid.html new file mode 100644 index 0000000000..5c18d62d75 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/color-valid.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 3: parsing color with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#foreground"> +<meta name="assert" content="color supports the '<color>' grammar defined in CSS Color Level 3."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("color", "currentcolor"); +test_valid_value("color", "transparent"); +test_valid_value("color", "red"); +test_valid_value("color", "magenta"); +test_valid_value("color", "#234", "rgb(34, 51, 68)"); +test_valid_value("color", "#FEDCBA", "rgb(254, 220, 186)"); +test_valid_value("color", "rgb(2, 3, 4)"); +test_valid_value("color", "rgb(100%, 0%, 0%)", "rgb(255, 0, 0)"); +test_valid_value("color", "rgba(2, 3, 4, 0.5)"); +test_valid_value("color", "rgba(2, 3, 4, 50%)", "rgba(2, 3, 4, 0.5)"); +test_valid_value("color", "hsl(120, 100%, 50%)", "rgb(0, 255, 0)"); +test_valid_value("color", "hsla(120, 100%, 50%, 0.25)", "rgba(0, 255, 0, 0.25)"); +test_valid_value("color", "rgb(-2, 3, 4)", "rgb(0, 3, 4)"); +test_valid_value("color", "rgb(100, 200, 300)", "rgb(100, 200, 255)"); +test_valid_value("color", "rgb(20, 10, 0, -10)", "rgba(20, 10, 0, 0)"); +test_valid_value("color", "rgb(100%, 200%, 300%)", "rgb(255, 255, 255)"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/opacity-computed.html b/testing/web-platform/tests/css/css-color/parsing/opacity-computed.html new file mode 100644 index 0000000000..27d9316415 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/opacity-computed.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 3: getComputedStyle().opacity</title> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +</head> +<body> +<div id="target"></div> +<script> +test_computed_value("opacity", "1"); +test_computed_value("opacity", "0.5"); +test_computed_value("opacity", "0"); +test_computed_value("opacity", "-2", "0"); +test_computed_value("opacity", "3", "1"); +test_computed_value("opacity", "-100%", "0"); +test_computed_value("opacity", "50%", "0.5"); +test_computed_value("opacity", "300%", "1"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/opacity-invalid.html b/testing/web-platform/tests/css/css-color/parsing/opacity-invalid.html new file mode 100644 index 0000000000..d85f604801 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/opacity-invalid.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 3: parsing opacity with invalid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity"> +<meta name="assert" content="opacity supports only the grammar '<alphavalue>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_invalid_value("opacity", "auto"); +test_invalid_value("opacity", "10px"); +test_invalid_value("opacity", "0 1"); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/opacity-valid.html b/testing/web-platform/tests/css/css-color/parsing/opacity-valid.html new file mode 100644 index 0000000000..ad65ad6df2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/opacity-valid.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 3: parsing opacity with valid values</title> +<link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-color-3/#opacity"> +<meta name="assert" content="opacity supports the full grammar '<alphavalue>'."> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +</head> +<body> +<script> +test_valid_value("opacity", "1"); +test_valid_value("opacity", "0.5"); +test_valid_value("opacity", "0"); +test_valid_value("opacity", "-2"); +test_valid_value("opacity", "3"); +test_valid_value("opacity", "-100%", "-1"); +test_valid_value("opacity", "50%", "0.5"); +test_valid_value("opacity", "300%", "3"); +test_valid_value("opacity", "clamp(50%, 0%, 70%)", "calc(0.5)"); +test_valid_value("opacity", "clamp(50%, 80%, 70%)", "calc(0.7)"); +test_valid_value("opacity", "clamp(50%, 60%, 70%)", "calc(0.6)"); +test_valid_value("opacity", "min(50%, 0%)", "calc(0)"); +test_valid_value("opacity", "min(0%, 50%)", "calc(0)"); +test_valid_value("opacity", "max(50%, 0%)", "calc(0.5)"); +test_valid_value("opacity", "max(0%, 50%)", "calc(0.5)"); +test_valid_value("opacity", "min(-40%, 50%)", "calc(-0.4)"); + +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/parsing/relative-color-out-of-gamut.html b/testing/web-platform/tests/css/css-color/parsing/relative-color-out-of-gamut.html new file mode 100644 index 0000000000..745b21a040 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/parsing/relative-color-out-of-gamut.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Color Level 5: Parsing and serialization of colors using relative color syntax that result in out-of-gamut sRGB colors</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="author" title="Aaron Krajeski" href="mailto:aaronhk@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#relative-colors"> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#serial-relative-color"> +<meta name="assert" content="gamut mapping works for computed value of relative color syntax"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script src="/css/support/color-testcommon.js"></script> +</head> +<body> + <div id="target"></div> +</body> +<script> + // The following tests produce colors that are outside of the srgb gamut. + // No gamut mapping should occur and the resulting colors should be of the + // format color(srgb ... ) + // See: https://github.com/mozilla/wg-decisions/issues/1125 + fuzzy_test_computed_color(`rgb(from color(display-p3 0 1 0) r g b / alpha)`, `color(srgb -0.511814 1.01832 -0.310726)`); + fuzzy_test_computed_color(`rgb(from lab(100 104.3 -50.9) r g b)`, `color(srgb 1.59343 0.58802 1.40564)`); + fuzzy_test_computed_color(`rgb(from lab(0 104.3 -50.9) r g b)`, `color(srgb 0.351376 -0.213938 0.299501)`); + fuzzy_test_computed_color(`rgb(from lch(100 116 334) r g b)`, `color(srgb 1.59328 0.58828 1.40527)`); + fuzzy_test_computed_color(`rgb(from lch(0 116 334) r g b)`, `color(srgb 0.351307 -0.213865 0.299236)`); + fuzzy_test_computed_color(`rgb(from oklab(1 0.365 -0.16) r g b)`, `color(srgb 1.59295 0.360371 1.38571)`); + fuzzy_test_computed_color(`rgb(from oklab(0 0.365 -0.16) r g b)`, `color(srgb 0.0763893 -0.0456266 0.0932598)`); + fuzzy_test_computed_color(`rgb(from oklch(1 0.399 336.3) r g b)`, `color(srgb 1.59328 0.358736 1.38663)`); + fuzzy_test_computed_color(`rgb(from oklch(0 0.399 336.3) r g b)`, `color(srgb 0.0765362 -0.045825 0.0937443)`); + + fuzzy_test_computed_color(`hsl(from color(display-p3 0 1 0) h s l / alpha)`, `color(srgb -0.511814 1.01832 -0.310726)`); + fuzzy_test_computed_color(`hsl(from lab(100 104.3 -50.9) h s l)`, `color(srgb 1.59343 0.58802 1.40564)`); + fuzzy_test_computed_color(`hsl(from lab(0 104.3 -50.9) h s l)`, `color(srgb 0.351376 -0.213938 0.299502)`); + fuzzy_test_computed_color(`hsl(from lch(100 116 334) h s l)`, `color(srgb 1.59328 0.58828 1.40527)`); + fuzzy_test_computed_color(`hsl(from lch(0 116 334) h s l)`, `color(srgb 0.351307 -0.213865 0.299236)`); + fuzzy_test_computed_color(`hsl(from oklab(1 0.365 -0.16) h s l)`, `color(srgb 1.59295 0.360371 1.38571)`); + fuzzy_test_computed_color(`hsl(from oklab(0 0.365 -0.16) h s l)`, `color(srgb 0.0763893 -0.0456266 0.0932598)`); + fuzzy_test_computed_color(`hsl(from oklch(1 0.399 336.3) h s l)`, `color(srgb 1.59328 0.358736 1.38663)`); + fuzzy_test_computed_color(`hsl(from oklch(0 0.399 336.3) h s l)`, `color(srgb 0.0765362 -0.045825 0.0937443)`); + + fuzzy_test_computed_color(`hwb(from color(display-p3 0 1 0) h w b / alpha)`, `color(srgb -0.511814 1.01832 -0.310726)`); + fuzzy_test_computed_color(`hwb(from lab(100 104.3 -50.9) h w b)`, `color(srgb 1.59343 0.58802 1.40564)`); + fuzzy_test_computed_color(`hwb(from lab(0 104.3 -50.9) h w b)`, `color(srgb 0.351376 -0.213938 0.299502)`); + fuzzy_test_computed_color(`hwb(from lch(100 116 334) h w b)`, `color(srgb 1.59328 0.58828 1.40527)`); + fuzzy_test_computed_color(`hwb(from lch(0 116 334) h w b)`, `color(srgb 0.351307 -0.213865 0.299236)`); + fuzzy_test_computed_color(`hwb(from oklab(1 0.365 -0.16) h w b)`, `color(srgb 1.59295 0.360371 1.38571)`); + fuzzy_test_computed_color(`hwb(from oklab(0 0.365 -0.16) h w b)`, `color(srgb 0.0763894 -0.0456266 0.0932598)`); + fuzzy_test_computed_color(`hwb(from oklch(1 0.399 336.3) h w b)`, `color(srgb 1.59328 0.358736 1.38664)`); + fuzzy_test_computed_color(`hwb(from oklch(0 0.399 336.3) h w b)`, `color(srgb 0.0765362 -0.045825 0.0937443)`); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-color/predefined-001.html b/testing/web-platform/tests/css/css-color/predefined-001.html new file mode 100644 index 0000000000..dff6bd9a11 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, srgb, decimal values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit srgb value as decimal matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(srgb 0 0.6 0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-002.html b/testing/web-platform/tests/css/css-color/predefined-002.html new file mode 100644 index 0000000000..9ed4b392d1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, srgb, percent values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit srgb value as percent matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(srgb 0% 60% 0%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-005.html b/testing/web-platform/tests/css/css-color/predefined-005.html new file mode 100644 index 0000000000..02eb39ffff --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, display-p3, decimal values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit display-p3 value as decimal matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(display-p3 0.26374 0.59085 0.16434)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-006.html b/testing/web-platform/tests/css/css-color/predefined-006.html new file mode 100644 index 0000000000..bfbccbcb14 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, display-p3, percent values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-display-p3"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit display-p3 value as percent matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(display-p3 26.374% 59.085% 16.434%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-007.html b/testing/web-platform/tests/css/css-color/predefined-007.html new file mode 100644 index 0000000000..c008fef5ca --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-007.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, a98-rgb, decimal values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit a98-rgb value as decimal matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(a98-rgb 0.33582 0.59441 0.13934)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-008.html b/testing/web-platform/tests/css/css-color/predefined-008.html new file mode 100644 index 0000000000..00bbc6249d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-008.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, a98-rgb, percent values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit a98-rgb value as percent matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(a98-rgb 33.582% 59.441% 13.934%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-009.html b/testing/web-platform/tests/css/css-color/predefined-009.html new file mode 100644 index 0000000000..27d818e817 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-009.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, prophoto-rgb, decimal values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit prophoto-rgb value as decimal matches sRGB #009900. Note that prophoto-rgb uses a D50 white so the chromatic adaptation step from Lab must be skipped."> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(prophoto-rgb 0.2861 0.49131 0.16133)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-010.html b/testing/web-platform/tests/css/css-color/predefined-010.html new file mode 100644 index 0000000000..391c001273 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-010.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, prophoto-rgb, percent values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit prophoto-rgb value as percent matches sRGB #009900. Note that prophoto-rgb uses a D50 white so the chromatic adaptation step from Lab must be skipped."> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(prophoto-rgb 28.610% 49.131% 16.133%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-011.html b/testing/web-platform/tests/css/css-color/predefined-011.html new file mode 100644 index 0000000000..78065d990f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-011.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, rec2020, decimal values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit rec2020 value as decimal matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(rec2020 0.299218 0.533327 0.120785)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-012.html b/testing/web-platform/tests/css/css-color/predefined-012.html new file mode 100644 index 0000000000..70b92df6bc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-012.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, rec2020, percent values</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit rec2020 value as percent matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(rec2020 29.9218% 53.3327% 12.0785%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/predefined-016.html b/testing/web-platform/tests/css/css-color/predefined-016.html new file mode 100644 index 0000000000..f80e605370 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/predefined-016.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: predefined colorspaces, lab</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#predefined"> +<link rel="match" href="greensquare-090-ref.html"> +<meta name="assert" content="Color function with explicit xyz-d50 value matches sRGB #009900"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #009900; width: 12em; height: 6em; margin-bottom: 0} + .test {background-color: color(xyz-d50 0.12266 0.22836 0.03093)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-001.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-001.html new file mode 100644 index 0000000000..ca4c866c98 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: prophoto-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="prophoto-rgb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(prophoto-rgb 0.230479 0.395789 0.129968); } /* green (sRGB #008000) converted to prophoto-rgb */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-002.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-002.html new file mode 100644 index 0000000000..46e5445d04 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: prophoto-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="prophoto-rgb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(prophoto-rgb 0 0 0); } /* black (sRGB #000000) converted to prophoto-rgb */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-003-ref.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-003-ref.html new file mode 100644 index 0000000000..e938de6034 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: prophoto-rgb</title> +<style> + body { background-color: grey; } + .test { background-color: lab(100% 0.0131 0.0085); width: 12em; height: 12em; } /* color(prophoto-rgb 1 1 1) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-003.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-003.html new file mode 100644 index 0000000000..3a9ede1458 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: prophoto-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb"> +<link rel="match" href="prophoto-rgb-003-ref.html"> +<meta name="assert" content="prophoto-rgb with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(100% 0.0131 0.0085); width: 12em; height: 6em; margin-bottom: 0; } /* color(prophoto-rgb 1 1 1) converted to Lab */ + .test { background-color: color(prophoto-rgb 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-004-ref.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-004-ref.html new file mode 100644 index 0000000000..8c5f24bcf7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: prophoto-rgb</title> +<style> + .test { background-color: lab(87.5745% -186.6921 150.9905); width: 12em; height: 12em; } /* color(prophoto-rgb 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-004.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-004.html new file mode 100644 index 0000000000..7912ff6dfb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: prophoto-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb"> +<link rel="match" href="prophoto-rgb-004-ref.html"> +<meta name="assert" content="prophoto-rgb with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(87.5745% -186.6921 150.9905); width: 12em; height: 6em; margin-bottom: 0; } /* color(prophoto-rgb 0 1 0) converted to Lab */ + .test { background-color: color(prophoto-rgb 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/prophoto-rgb-005.html b/testing/web-platform/tests/css/css-color/prophoto-rgb-005.html new file mode 100644 index 0000000000..73e5cc8086 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/prophoto-rgb-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: prophoto-rgb</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-prophoto-rgb"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="prophoto-rgb outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(prophoto-rgb 0.42444 0.934918 0.190922); } /* green color(display-p3 0 1 0) converted to prophoto-rgb */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rebeccapurple-ref.html b/testing/web-platform/tests/css/css-color/rebeccapurple-ref.html new file mode 100644 index 0000000000..8c15364f38 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rebeccapurple-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Named colors</title> +<style> + .ref {background: #663399; width: 10em; height: 10em;} +</style> +<body> + <p>Test passes if you see a purple square and no red.</p> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-001.html b/testing/web-platform/tests/css/css-color/rec2020-001.html new file mode 100644 index 0000000000..b51a458c11 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: rec2020</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-rec2020"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rec2020 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(rec2020 0.235202 0.431704 0.085432); } /* green (sRGB #008000) converted to rec2020 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-002.html b/testing/web-platform/tests/css/css-color/rec2020-002.html new file mode 100644 index 0000000000..bca9f50436 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: rec2020</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-rec2020"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="rec2020 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(rec2020 0 0 0); } /* black (sRGB #000000) converted to rec2020 */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-003-ref.html b/testing/web-platform/tests/css/css-color/rec2020-003-ref.html new file mode 100644 index 0000000000..da95008fcf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: rec2020</title> +<style> + body { background-color: grey; } + .test { background-color: rgb(99.993% 100% 100%); width: 12em; height: 12em; } /* color(rec2020 1 1 1) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-003.html b/testing/web-platform/tests/css/css-color/rec2020-003.html new file mode 100644 index 0000000000..6c6fc9d738 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: rec2020</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-rec2020"> +<link rel="match" href="rec2020-003-ref.html"> +<meta name="assert" content="rec2020 with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: rgb(99.993% 100% 100%); width: 12em; height: 6em; margin-bottom: 0; } /* color(rec2020 1 1 1) converted to sRGB */ + .test { background-color: color(rec2020 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-004-ref.html b/testing/web-platform/tests/css/css-color/rec2020-004-ref.html new file mode 100644 index 0000000000..68068041f9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: rec2020</title> +<style> + .test { background-color: lab(85.7729% -160.7259 109.2319); width: 12em; height: 12em; } /* color(rec2020 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-004.html b/testing/web-platform/tests/css/css-color/rec2020-004.html new file mode 100644 index 0000000000..4719ba764c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: rec2020</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-rec2020"> +<link rel="match" href="rec2020-004-ref.html"> +<meta name="assert" content="rec2020 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(85.7729% -160.7259 109.2319); width: 12em; height: 6em; margin-bottom: 0; } /* color(rec2020 0 1 0) converted to Lab */ + .test { background-color: color(rec2020 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/rec2020-005.html b/testing/web-platform/tests/css/css-color/rec2020-005.html new file mode 100644 index 0000000000..74e2305e33 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rec2020-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: rec2020</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-rec2020"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="rec2020 outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(rec2020 0.431836 0.970723 0.079208); } /* green color(display-p3 0 1 0) converted to rec2020 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/reference/system-color-hightlights-vs-getSelection-001-ref.html b/testing/web-platform/tests/css/css-color/reference/system-color-hightlights-vs-getSelection-001-ref.html new file mode 100644 index 0000000000..c5d48b4c9f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/reference/system-color-hightlights-vs-getSelection-001-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 40px; + line-height: 1; + } + + /* + https://www.w3.org/TR/css-pseudo-4/#highlight-bounds + For text, the corresponding overlay must cover at least + the entire em box and may extend further above/below the + em box to the line box edges. + */ + + span + { + background-color: Highlight; + color: HighlightText; + } + + </style> + + <div><span>With system-color-highlight</span></div> + + <div><span>With getSelection()</span><br></div> diff --git a/testing/web-platform/tests/css/css-color/reference/system-color-hightlights-vs-getSelection-002-ref.html b/testing/web-platform/tests/css/css-color/reference/system-color-hightlights-vs-getSelection-002-ref.html new file mode 100644 index 0000000000..67bec9a57e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/reference/system-color-hightlights-vs-getSelection-002-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + <title>CSS Reference Test</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 40px; + line-height: 1; + } + + /* + https://www.w3.org/TR/css-pseudo-4/#highlight-bounds + For text, the corresponding overlay must cover at least + the entire em box and may extend further above/below the + em box to the line box edges. + */ + + span + { + background-color: Highlight; + color: HighlightText; + } + + .yellow { + background-color: yellow; + } + + + </style> + + <div class="yellow"> + <span>With getSelection()</span> + </div> + + <div class="yellow"> + <span>With system-color-highlight</span> + </div> diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-a98rgb-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-a98rgb-01.html new file mode 100644 index 0000000000..b264aff7a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-a98rgb-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in a98-rgb RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor a98-rgb r g b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-displayp3-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-displayp3-01.html new file mode 100644 index 0000000000..d366da215f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-displayp3-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in display-p3 RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor display-p3 r g b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-hsl-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-hsl-01.html new file mode 100644 index 0000000000..2b5e06322a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-hsl-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in hsl RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: hsl(from currentColor h s l); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-hsl-02.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-hsl-02.html new file mode 100644 index 0000000000..dba5d49350 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-hsl-02.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in hsl RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: hsl(from currentColor 120 s l); +} +div div { + color: hsl(none 100% 25%); /* hsl(120 100% 25%) is green */ + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-hwb-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-hwb-01.html new file mode 100644 index 0000000000..7c757e1d0f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-hwb-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in hwb RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: hwb(from currentColor h w b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-lab-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-lab-01.html new file mode 100644 index 0000000000..da59cccec1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-lab-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in lab RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: lab(from currentColor l a b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-lch-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-lch-01.html new file mode 100644 index 0000000000..be734812f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-lch-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in lch RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: lch(from currentColor l c h); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-oklab-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-oklab-01.html new file mode 100644 index 0000000000..94d88d384c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-oklab-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in oklab RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: oklab(from currentColor l a b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-oklch-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-oklch-01.html new file mode 100644 index 0000000000..0582817c60 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-oklch-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in oklch RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: oklch(from currentColor l c h); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-prophoto-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-prophoto-01.html new file mode 100644 index 0000000000..973cd9c756 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-prophoto-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in prophoto-rgb RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor prophoto-rgb r g b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-rec2020-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-rec2020-01.html new file mode 100644 index 0000000000..820d9faf45 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-rec2020-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in rec2020 RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor rec2020 r g b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-rec2020-02.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-rec2020-02.html new file mode 100644 index 0000000000..a323370012 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-rec2020-02.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-rec2020-ref.html"> +<title>currentColor is inherited correctly in rec2020 RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor rec2020 r g b); +} +div div { + color: color(prophoto-rgb 0.23 0.43 0.13); /* a little outside sRGB */ + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-rgb-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-rgb-01.html new file mode 100644 index 0000000000..5ad90529c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-rgb-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in rgb RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: rgb(from currentColor r g b); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-rgb-02.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-rgb-02.html new file mode 100644 index 0000000000..603938d0db --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-rgb-02.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in rgb RCS, permutation</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: yellow; + background-color: rgb(from currentColor g r b); +} +div div { + color: #7F0000; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-xyzd50-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-xyzd50-01.html new file mode 100644 index 0000000000..3caa71c84b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-xyzd50-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in xyz-d65 RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor xyz-d50 x y z); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-currentcolor-xyzd65-01.html b/testing/web-platform/tests/css/css-color/relative-currentcolor-xyzd65-01.html new file mode 100644 index 0000000000..7a857ce0cd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-currentcolor-xyzd65-01.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="match" href="relative-green-ref.html"> +<title>currentColor is inherited correctly in xyz-d65 RCS</title> +<link rel="help" href="https://drafts.csswg.org/css-color-5/#resolving-rcs"> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; + background-color: red; + color: red; + background-color: color(from currentColor xyz-d65 x y z); +} +div div { + color: green; + background-color: inherit; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-green-ref.html b/testing/web-platform/tests/css/css-color/relative-green-ref.html new file mode 100644 index 0000000000..09428a288b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-green-ref.html @@ -0,0 +1,15 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; +} +div div { + background-color: green; +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/relative-rec2020-ref.html b/testing/web-platform/tests/css/css-color/relative-rec2020-ref.html new file mode 100644 index 0000000000..c2dbdccd85 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/relative-rec2020-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset=utf-8> +<link rel="author" href="mailto:chris@w3.org" title="Chris Lilley"> +<style> +div { + width: 100px; + height: 100px; +} +div div { + background-color: color(rec2020 0.23072 0.46956 0.08); /* rgb(-16.284% 54.0356% -5.7344%) */ + /* https://colorjs.io/apps/convert/?color=color(prophoto-rgb%200.23%200.43%200.13)&precision=6 */ +} +</style> +<div> + <div></div> +</div>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/rgb-001.html b/testing/web-platform/tests/css/css-color/rgb-001.html new file mode 100644 index 0000000000..3e59001677 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rgb() with percent and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0% 50% 0%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-002.html b/testing/web-platform/tests/css/css-color/rgb-002.html new file mode 100644 index 0000000000..c87f7878d9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rgb() with 8-bit numbers and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0 128.0 0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-003.html b/testing/web-platform/tests/css/css-color/rgb-003.html new file mode 100644 index 0000000000..5fc0fbfe28 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rgb() with percent and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0% 50% 0% / 1.0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-004.html b/testing/web-platform/tests/css/css-color/rgb-004.html new file mode 100644 index 0000000000..d4078f30e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rgb() with 8-bit numbers and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color:rgb(0 128.0 0 / 1)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-005.html b/testing/web-platform/tests/css/css-color/rgb-005.html new file mode 100644 index 0000000000..ec5e2f5b94 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rgb() with percent and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0% 50% 0% / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-006.html b/testing/web-platform/tests/css/css-color/rgb-006.html new file mode 100644 index 0000000000..45b11138e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="rgb() with 8-bit numbers and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0 128.0 0 / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-007.html b/testing/web-platform/tests/css/css-color/rgb-007.html new file mode 100644 index 0000000000..fd881c3184 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-007.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgb() with percent and percent alpha, and commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0%, 50%, 0%, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgb-008.html b/testing/web-platform/tests/css/css-color/rgb-008.html new file mode 100644 index 0000000000..8684275356 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgb-008.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgb() with 8-bit numbers and percent alpha, with commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgb(0, 128.0, 0, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-001.html b/testing/web-platform/tests/css/css-color/rgba-001.html new file mode 100644 index 0000000000..3f9989a413 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with percent and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0% 50% 0%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-002.html b/testing/web-platform/tests/css/css-color/rgba-002.html new file mode 100644 index 0000000000..3a734bdc30 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-002.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with 8-bit numbers and no alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0 128.0 0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-003.html b/testing/web-platform/tests/css/css-color/rgba-003.html new file mode 100644 index 0000000000..5204931df5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-003.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with percent and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0% 50% 0% / 1.0)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-004.html b/testing/web-platform/tests/css/css-color/rgba-004.html new file mode 100644 index 0000000000..ce9cf48ba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with 8-bit numbers and numeric alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0 128.0 0 / 1)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-005.html b/testing/web-platform/tests/css/css-color/rgba-005.html new file mode 100644 index 0000000000..579b57a068 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-005.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with percent and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0% 50% 0% / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-006.html b/testing/web-platform/tests/css/css-color/rgba-006.html new file mode 100644 index 0000000000..b7b371952a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-006.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with 8-bit numbers and percent alpha, also no comma"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0 128.0 0 / 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-007.html b/testing/web-platform/tests/css/css-color/rgba-007.html new file mode 100644 index 0000000000..cca349781b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-007.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with percent and percent alpha, and commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color:rgba(0%, 50%, 0%, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/rgba-008.html b/testing/web-platform/tests/css/css-color/rgba-008.html new file mode 100644 index 0000000000..8d6c851166 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/rgba-008.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: RGB functions rgb() and rgba()</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#rgb-functions"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="legacy rgba() with 8-bit numbers and percent alpha, with commas"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top:0} + .ref { background-color: #008000; width: 12em; height: 6em; margin-bottom: 0} + .test { background-color: rgba(0, 128.0, 0, 100%)} +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <p class="ref"> </p> + <p class="test"> </p> +</body> diff --git a/testing/web-platform/tests/css/css-color/srgb-linear-001.html b/testing/web-platform/tests/css/css-color/srgb-linear-001.html new file mode 100644 index 0000000000..94f33af04d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/srgb-linear-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: srgb-linear</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="srgb-linear with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(srgb-linear 0 0.21586 0); } /* green (sRGB #008000) converted to srgb-linear */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/srgb-linear-002.html b/testing/web-platform/tests/css/css-color/srgb-linear-002.html new file mode 100644 index 0000000000..bd221a64cb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/srgb-linear-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: srgb-linear</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="srgb-linear with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(srgb-linear 0 0 0); } /* black (sRGB #000000) converted to srgb-linear */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/srgb-linear-003-ref.html b/testing/web-platform/tests/css/css-color/srgb-linear-003-ref.html new file mode 100644 index 0000000000..9de25f6ba0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/srgb-linear-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: srgb-linear</title> +<style> + body { background-color: grey; } + .test { background-color: color(srgb 1 1 1); width: 12em; height: 12em; } /* color(srgb-linear 1 1 1) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/srgb-linear-003.html b/testing/web-platform/tests/css/css-color/srgb-linear-003.html new file mode 100644 index 0000000000..654549a537 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/srgb-linear-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: srgb-linear</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear"> +<link rel="match" href="srgb-linear-003-ref.html"> +<meta name="assert" content="srgb-linear with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: color(srgb 1 1 1); width: 12em; height: 6em; margin-bottom: 0; } /* color(srgb-linear 1 1 1) converted to sRGB */ + .test { background-color: color(srgb-linear 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/srgb-linear-004-ref.html b/testing/web-platform/tests/css/css-color/srgb-linear-004-ref.html new file mode 100644 index 0000000000..a1574caa30 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/srgb-linear-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: srgb-linear</title> +<style> + .test { background-color: lab(87.8185% -79.271 80.9946); width: 12em; height: 12em; } /* color(srgb-linear 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/srgb-linear-004.html b/testing/web-platform/tests/css/css-color/srgb-linear-004.html new file mode 100644 index 0000000000..739e3877f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/srgb-linear-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: srgb-linear</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-srgb-linear"> +<link rel="match" href="srgb-linear-004-ref.html"> +<meta name="assert" content="srgb-linear with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(87.8185% -79.271 80.9946); width: 12em; height: 6em; margin-bottom: 0; } /* color(srgb-linear 0 1 0) converted to Lab */ + .test { background-color: color(srgb-linear 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/support/009900-sRGB.png b/testing/web-platform/tests/css/css-color/support/009900-sRGB.png Binary files differnew file mode 100644 index 0000000000..d6b0c96642 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/support/009900-sRGB.png diff --git a/testing/web-platform/tests/css/css-color/support/009900.png b/testing/web-platform/tests/css/css-color/support/009900.png Binary files differnew file mode 100644 index 0000000000..7ddaa10b44 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/support/009900.png diff --git a/testing/web-platform/tests/css/css-color/support/swap-990000-iCCP.png b/testing/web-platform/tests/css/css-color/support/swap-990000-iCCP.png Binary files differnew file mode 100644 index 0000000000..766d0f7679 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/support/swap-990000-iCCP.png diff --git a/testing/web-platform/tests/css/css-color/support/swapped.icc b/testing/web-platform/tests/css/css-color/support/swapped.icc Binary files differnew file mode 100644 index 0000000000..ccd41cf751 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/support/swapped.icc diff --git a/testing/web-platform/tests/css/css-color/system-color-compute.html b/testing/web-platform/tests/css/css-color/system-color-compute.html new file mode 100644 index 0000000000..ed4f3b947e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/system-color-compute.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<title>CSS Color 4: System colors compute to absolute colors</title> +<link rel="help" href="https://www.w3.org/TR/css-color-4/#resolving-color-values"> +<meta name="assert" content="Tests that system color keywords resolve to absolute colors at computed value time"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +.parent { + border: 1px solid black; + width: 100px; + height: 170px; + margin: 5px; + padding: 5px; + color-scheme: light; +} + +.child { + position: relative; + border: 1px solid black; + width: 80px; + height: 50px; + margin: 4px; + padding: 4px; + color-scheme: dark; +} + +.specified { + color: Menu; + background-color: Menu; + box-shadow: 2px 2px Menu; + text-shadow: 2px 2px Menu; + border-color: Menu; + column-rule-color: Menu; + outline-color: Menu; + caret-color: Menu; + fill: Menu; + stroke: Menu; +} + +.inherit { + color: inherit; + background-color: inherit; + box-shadow: inherit; + text-shadow: inherit; + border-color: inherit; + column-rule-color: inherit; + outline-color: inherit; + caret-color: inherit; + fill: inherit; + stroke: inherit; +} +</style> + +<div id="parent" class="specified parent">Parent + <div id="specified" class="specified child">Specified Child</div> + <div id="inherited" class="inherit child">Inherit Child</div> +</div> + +<script> + // The premise behind this test is that if a system color keyword were to + // compute to itself, then child elements inheriting a system color value + // will incorrectly inherit the keyword, not the color it resolves to. We can + // detect whether this is happening by applying different color schemes to + // parent and child, then comparing the results we get between a child that + // inherited a system color versus a child that received the system color + // directly. + + // As a precondition check, validate that the color-scheme property results + // in a different resolved color. + test(function() { + let light_value = + getComputedStyle(document.getElementById("parent")).backgroundColor; + let dark_value = + getComputedStyle(document.getElementById("specified")).backgroundColor; + assert_not_equals(light_value, dark_value); + }, "color-scheme property affects Menu system color keyword"); + + // Test several color properties. + const properties_to_test = [ + "color", + "background-color", + "box-shadow", + "text-shadow", + "border-left-color", + "border-top-color", + "border-right-color", + "border-bottom-color", + "column-rule-color", + "outline-color", + "caret-color", + "fill", + "stroke", + ]; + + for (let property of properties_to_test) { + test(function() { + let specified_value = + getComputedStyle(document.getElementById("specified")) + .getPropertyValue(property); + let inherited_value = + getComputedStyle(document.getElementById("inherited")) + .getPropertyValue(property); + assert_not_equals(inherited_value, specified_value); + }, "System color doesn't compute to itself on " + property); + test(function() { + let inherited_value = + document.getElementById("inherited").computedStyleMap() + .get(property); + assert_false(/menu/i.test(inherited_value)); + }, "Inherited system color keyword is observable on " + property); + } +</script> diff --git a/testing/web-platform/tests/css/css-color/system-color-consistency.html b/testing/web-platform/tests/css/css-color/system-color-consistency.html new file mode 100644 index 0000000000..4eb9d81100 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/system-color-consistency.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>CSS Color 4: Computed value of color-contrast()</title> + <link rel="author" title="Jan Keitel" href="mailto:jkeitel@google.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> + <meta name="assert" content="computed style of form elements is consistent with definition of system colors"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <script src="/css/support/computed-testcommon.js"></script> +</head> + +<body> + <div style="display: none"> + <div id="target"></div> + <!-- Reference elements --> + <!-- Buttons --> + <div id="buttons"> + <button name="button"></button><input type="submit" name="submit button"> + <input type="reset" name="reset button"><input type="color" name="color picker"> + </div> + <!-- Input elements --> + <div id="fields"> + <input type="text" name="text field"><input type="password" name="password field"> + <input type="email" name="email field"><input type="number" name="number field"> + <input type="date" name="date field"> + <textarea name="text area"></textarea> + </div> + <mark id="mark">Marked text</mark> + </div> + <script> + // Buttons + for (let element of document.getElementById("buttons").children) { + style = document.defaultView.getComputedStyle(element); + test_computed_value('color', 'ButtonBorder', style.getPropertyValue('border-color'), 'resolves to the same color as the border-color of a ' + element.name); + test_computed_value('color', 'ButtonFace', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name); + test_computed_value('color', 'ButtonText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name); + } + + // CanvasText + style = document.defaultView.getComputedStyle(document.getElementsByTagName('html')[0]); + test_computed_value('color', 'CanvasText', style.getPropertyValue('color'), 'has the same color as the color of the html element'); + + // Field and FieldText + for (let element of document.getElementById("fields").children) { + style = document.defaultView.getComputedStyle(element); + test_computed_value('color', 'Field', style.getPropertyValue('background-color'), 'resolves to the same color as the background-color of a ' + element.name); + test_computed_value('color', 'FieldText', style.getPropertyValue('color'), 'resolves to the same color as text on a ' + element.name); + } + + // Mark and MarkText + style = document.defaultView.getComputedStyle(document.getElementById('mark')); + test_computed_value('color', 'Mark', style.getPropertyValue('background-color'), 'has the same color as the background-color of a mark element'); + test_computed_value('color', 'MarkText', style.getPropertyValue('color'), 'has the same color as the color of a mark element'); + </script> +</body> + +</html> diff --git a/testing/web-platform/tests/css/css-color/system-color-hightlights-vs-getSelection-001.html b/testing/web-platform/tests/css/css-color/system-color-hightlights-vs-getSelection-001.html new file mode 100644 index 0000000000..12495cd7ad --- /dev/null +++ b/testing/web-platform/tests/css/css-color/system-color-hightlights-vs-getSelection-001.html @@ -0,0 +1,90 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Color Test: system color highlights values versus getSelection().addRange(targetRange)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="reference/system-color-hightlights-vs-getSelection-001-ref.html"> + + <!-- + + Created: March 29th 2023 + + Last modified: July 12th 2023 + + Chromium bug report 932343 comment #c20: Issue 932343: Support text decoration properties in ::selection + https://bugs.chromium.org/p/chromium/issues/detail?id=932343#c20 + + Chromium bug report 1429019: Issue 1429019: [CSS4 Color] [CSS4 Pseudo] getSelection() color and background color should match system color highlights + https://bugs.chromium.org/p/chromium/issues/detail?id=1429019 + + WebKit Bug report 254691: [CSS4 Color] [CSS4 Pseudo] getSelection() color and background color should match system color highlights + https://bugs.webkit.org/show_bug.cgi?id=254691 + + --> + + <meta content="" name="flags"> + <meta content="This test checks that color and background color generated by window.getSelection().addRange(targetRange) correspond to system color highlights values." name="assert"> + + <style> + div + { + font-size: 40px; + line-height: 1; + } + + /* + https://www.w3.org/TR/css-pseudo-4/#highlight-bounds + For text, the corresponding overlay must cover at least + the entire em box and may extend further above/below the + em box to the line box edges. + */ + + span.system-color-highlight + { + background-color: Highlight; + color: HighlightText; + } + + /* + + Highlight + Background of item(s) selected in a control. + https://www.w3.org/TR/css-color-4/#valdef-system-color-highlight + + HighlightText + Text of item(s) selected in a control. + https://www.w3.org/TR/css-color-4/#valdef-system-color-highlighttext + + CSS4 Color Module + 5.2 System Colors + https://www.w3.org/TR/css-color-4/#css-system-colors + + */ + </style> + + <script type="text/javascript"> + function startTest() + { + /* We first create an empty range */ + var targetRange = document.createRange(); + + /* Then we select the node */ + targetRange.selectNode(document.getElementById("getSelection")); + + /* Finally, we now select such range of content */ + window.getSelection().addRange(targetRange); + } + + </script> + + <body onload="startTest();"> + + <div><span class="system-color-highlight">With system-color-highlight</span></div> + + <div> + <span id="getSelection">With getSelection()</span> + </div> diff --git a/testing/web-platform/tests/css/css-color/system-color-hightlights-vs-getSelection-002.html b/testing/web-platform/tests/css/css-color/system-color-hightlights-vs-getSelection-002.html new file mode 100644 index 0000000000..f4025cd3f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/system-color-hightlights-vs-getSelection-002.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Color Test: system color highlights values versus getSelection().addRange(targetRange)</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="reference/system-color-hightlights-vs-getSelection-002-ref.html"> + + <!-- + + Created: March 29th 2023 + + Last modified: July 12th 2023 + + Chromium bug report 932343 comment #c20: Issue 932343: Support text decoration properties in ::selection + https://bugs.chromium.org/p/chromium/issues/detail?id=932343#c20 + + Chromium bug report 1429019: Issue 1429019: [CSS4 Color] [CSS4 Pseudo] getSelection() color and background color should match system color highlights + https://bugs.chromium.org/p/chromium/issues/detail?id=1429019 + + WebKit Bug report 254691: [CSS4 Color] [CSS4 Pseudo] getSelection() color and background color should match system color highlights + https://bugs.webkit.org/show_bug.cgi?id=254691 + + --> + + <meta content="" name="flags"> + <meta content="This test checks that color and background color generated by window.getSelection().addRange(targetRange) correspond to system color highlights values when there is a non-transparent background color behind the tested range of text." name="assert"> + + <style> + div + { + font-size: 40px; + line-height: 1; + } + + /* + https://www.w3.org/TR/css-pseudo-4/#highlight-bounds + For text, the corresponding overlay must cover at least + the entire em box and may extend further above/below the + em box to the line box edges. + */ + + span.system-color-highlight + { + background-color: Highlight; + color: HighlightText; + } + + /* + + Highlight + Background of item(s) selected in a control. + https://www.w3.org/TR/css-color-4/#valdef-system-color-highlight + + HighlightText + Text of item(s) selected in a control. + https://www.w3.org/TR/css-color-4/#valdef-system-color-highlighttext + + CSS4 Color Module + 5.2 System Colors + https://www.w3.org/TR/css-color-4/#css-system-colors + + */ + </style> + + <script type="text/javascript"> + function startTest() + { + /* We first create an empty range */ + var targetRange = document.createRange(); + + /* Then we select the node */ + targetRange.selectNode(document.getElementById("getSelection")); + + /* Finally, we now select such range of content */ + window.getSelection().addRange(targetRange); + } + + </script> + + <body onload="startTest();"> + <div style="background-color: yellow;"> + <span id="getSelection">With getSelection()</span> + </div> + + <div style="background-color: yellow;"> + <span class="system-color-highlight">With system-color-highlight</span> + </div> diff --git a/testing/web-platform/tests/css/css-color/system-color-support.html b/testing/web-platform/tests/css/css-color/system-color-support.html new file mode 100644 index 0000000000..2392739a00 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/system-color-support.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="utf-8"> + <title>CSS Color 4: System color support</title> + <link rel="author" title="Luuk Lamers" href="mailto:xaddict@protonmail.com"> + <link rel="help" href="https://www.w3.org/TR/css-color-4/#css-system-colors"> + <meta name="assert" content="system colors as defined are supported by the browser"> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <style> + .group { + display: flex; + margin-bottom: 2px; + gap: 1em; + } + .group > div { + height: 1em; + width: 50%; + } + </style> +</head> +<body> + <div style="display: none"> + <div id="test"></div> + </div> + <script> + const testRoot = document.getElementById('test') + const SYSTEM_COLORS = [ + 'Canvas', + 'CanvasText', + 'LinkText', + 'VisitedText', + 'ActiveText', + 'ButtonFace', + 'ButtonText', + 'ButtonBorder', + 'Field', + 'FieldText', + 'Highlight', + 'HighlightText', + 'SelectedItem', + 'SelectedItemText', + 'Mark', + 'MarkText', + 'GrayText', + 'AccentColor', + 'AccentColorText', + 'AppWorkspace', + 'Scrollbar', + ]; + + // These colors ought to be color-scheme aware. + const COLOR_SCHEME_AWARE = [ + 'Canvas', + 'CanvasText', + 'AppWorkspace', + 'Scrollbar', + ]; + + for (let systemColor of SYSTEM_COLORS) { + const group = document.createElement('div') + group.id = systemColor + group.className = 'group' + group.innerHTML = ` + <div style="background-color: black; background-color: ${systemColor}"></div> + <div style="background-color: white; background-color: ${systemColor}"></div> + ` + testRoot.appendChild(group) + let blackElement = group.firstElementChild + let whiteElement = group.lastElementChild + test(function() { + assert_equals( + getComputedStyle(blackElement).backgroundColor, + getComputedStyle(whiteElement).backgroundColor, + `${systemColor} should be parsed` + ); + if (COLOR_SCHEME_AWARE.includes(systemColor)) { + blackElement.style.colorScheme = "light"; + whiteElement.style.colorScheme = "dark"; + assert_not_equals( + getComputedStyle(blackElement).backgroundColor, + getComputedStyle(whiteElement).backgroundColor, + `${systemColor} should react to color-scheme` + ); + } + }, `System color ${systemColor} works`); + } + </script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t31-color-currentColor-b-ref.html b/testing/web-platform/tests/css/css-color/t31-color-currentColor-b-ref.html new file mode 100644 index 0000000000..3013c7050c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t31-color-currentColor-b-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + p { color: green; } +</style> +<body> + <p>This text should be green.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t31-color-currentColor-b.xht b/testing/web-platform/tests/css/css-color/t31-color-currentColor-b.xht new file mode 100644 index 0000000000..b4ff486168 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t31-color-currentColor-b.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: color</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#foreground" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor" /> + <link rel="match" href="t31-color-currentColor-b-ref.html" /> + <meta name="assert" content="That currentColor on the color property acts like inherit." /> + <style type="text/css"><![CDATA[ + #one { color: green; } + #two { color: red; } + #two { color: currentColor; } + ]]></style> + </head> + <body> + <div id="one"><p id="two">This text should be green.</p></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t31-color-text-a-ref.xht b/testing/web-platform/tests/css/css-color/t31-color-text-a-ref.xht new file mode 100644 index 0000000000..95a0e03ac8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t31-color-text-a-ref.xht @@ -0,0 +1,12 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Notref Black "should be green"</title> + <style type="text/css"><![CDATA[ + #one { color: #000; color: rgb(0,0,0); color: black; } + ]]></style> + </head> + <body> + <p id="one">This text should be green.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t31-color-text-a.xht b/testing/web-platform/tests/css/css-color/t31-color-text-a.xht new file mode 100644 index 0000000000..ecc6410c8d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t31-color-text-a.xht @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: color</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#foreground" /> + <link rel="mismatch" href="t31-color-text-a-ref.xht" /> + <meta name="assert" content="That color sets the color of the text." /> + <style type="text/css"><![CDATA[ + #one { color: green; } + ]]></style> + </head> + <body> + <p id="one">This text should be green.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.0-a-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.0-a-ref.html new file mode 100644 index 0000000000..298c4890df --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.0-a-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<body> + <p id="one">This should be the only text visible on this page.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.0-a.xht b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.0-a.xht new file mode 100644 index 0000000000..1f08e1729c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.0-a.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-basic-0.0-a-ref.html" /> + <meta name="assert" content="Opacity of 0.0 makes box transparent." /> + <style type="text/css"><![CDATA[ + #two { opacity: 0.0; } + ]]></style> + </head> + <body> + <p id="one">This should be the only text visible on this page.</p> + <p id="two">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.6-a-ref.xht b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.6-a-ref.xht new file mode 100644 index 0000000000..ae46348506 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.6-a-ref.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Chris Lilley" href="https://svgees.us" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <style type="text/css"><![CDATA[ + html, body { background: white; color: black; } + #one, #two { width: 12em; height: 12em; } + #one { background-color: rgb(102, 102, 102); margin-bottom: 0 } + ]]></style> + </head> + <body> + <p>The test passes if you see a gray square:</p> + <p id="one"></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.6-a.xht b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.6-a.xht new file mode 100644 index 0000000000..541964f8d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-basic-0.6-a.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t32-opacity-basic-0.6-a-ref.xht" /> + <meta name="assert" content="Opacity of 0.6 makes box partially opaque. Colors are in sRGB color space (may test)." /> + <style type="text/css"><![CDATA[ + html, body { background: white; color: black; } + #one, #two { width: 12em; height: 12em; } + #one { background-color: rgb(102, 102, 102); } + #two { opacity: 0.6; } + ]]></style> + </head> + <body> + <p>The test passes if you see a gray square:</p> + <p id="one"></p> + <p id="two"></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-basic-1.0-a-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-basic-1.0-a-ref.html new file mode 100644 index 0000000000..b59c82f46d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-basic-1.0-a-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<body> + <p id="one">This text should be the same color as the line below.</p> + <p id="two">This text should be the same color as the line above.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-basic-1.0-a.xht b/testing/web-platform/tests/css/css-color/t32-opacity-basic-1.0-a.xht new file mode 100644 index 0000000000..4df4574eca --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-basic-1.0-a.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-basic-1.0-a-ref.html" /> + <meta name="assert" content="Opacity of 1.0 makes box fully opaque." /> + <style type="text/css"><![CDATA[ + #two { opacity: 1.0; } + ]]></style> + </head> + <body> + <p id="one">This text should be the same color as the line below.</p> + <p id="two">This text should be the same color as the line above.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-clamping-0.0-b.xht b/testing/web-platform/tests/css/css-color/t32-opacity-clamping-0.0-b.xht new file mode 100644 index 0000000000..79a7637e23 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-clamping-0.0-b.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-basic-0.0-a-ref.html" /> + <meta name="assert" content="Opacity values less than 0.0 are clamped to 0.0" /> + <style type="text/css"><![CDATA[ + #two { opacity: -0.0; } + #three { opacity: -0.1; } + #four { opacity: -0.9; } + #five { opacity: -30; } + #six { opacity: -7439.79; } + ]]></style> + </head> + <body> + <p id="one">This should be the only text visible on this page.</p> + <p id="two">This text should NOT be visible.</p> + <p id="three">This text should NOT be visible.</p> + <p id="four">This text should NOT be visible.</p> + <p id="five">This text should NOT be visible.</p> + <p id="six">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-clamping-1.0-b-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-clamping-1.0-b-ref.html new file mode 100644 index 0000000000..08854a18ae --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-clamping-1.0-b-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<body> + <p id="one">There should be six lines of text on this page, all the same color. [1 of 6]</p> + <p id="two">There should be six lines of text on this page, all the same color. [2 of 6]</p> + <p id="three">There should be six lines of text on this page, all the same color. [3 of 6]</p> + <p id="four">There should be six lines of text on this page, all the same color. [4 of 6]</p> + <p id="five">There should be six lines of text on this page, all the same color. [5 of 6]</p> + <p id="six">There should be six lines of text on this page, all the same color. [6 of 6]</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-clamping-1.0-b.xht b/testing/web-platform/tests/css/css-color/t32-opacity-clamping-1.0-b.xht new file mode 100644 index 0000000000..60504ec62a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-clamping-1.0-b.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-clamping-1.0-b-ref.html" /> + <meta name="assert" content="Opacity values greater than 1.0 are clamped to 1.0" /> + <style type="text/css"><![CDATA[ + /* make sure clamped rather than a parser error */ + #two, #three, #four, #five, #six { opacity: 0.0; } + + #two { opacity: 1.0; } + #three { opacity: 1.1; } + #four { opacity: 1.9; } + #five { opacity: 30; } + #six { opacity: 7439.79; } + ]]></style> + </head> + <body> + <p id="one">There should be six lines of text on this page, all the same color. [1 of 6]</p> + <p id="two">There should be six lines of text on this page, all the same color. [2 of 6]</p> + <p id="three">There should be six lines of text on this page, all the same color. [3 of 6]</p> + <p id="four">There should be six lines of text on this page, all the same color. [4 of 6]</p> + <p id="five">There should be six lines of text on this page, all the same color. [5 of 6]</p> + <p id="six">There should be six lines of text on this page, all the same color. [6 of 6]</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-b-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-b-ref.html new file mode 100644 index 0000000000..2a3ae628b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-b-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + div { width: 5em; height: 1em; margin: 2px 0; } + .test { background: rgb(153, 153, 255); } +</style> +<body> + <p>The following five boxes should be the same color:</p> + + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-b.xht b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-b.xht new file mode 100644 index 0000000000..e9ba0c7d94 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-b.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-offscreen-b-ref.html" /> + <meta name="assert" content="That opacity specifies compositing the contents as a single offscreen buffer." /> + <style type="text/css"><![CDATA[ + + body { background: white; } + + div { width: 5em; height: 1em; } + div.color { background: blue; } + div.top { margin: 2px 0; opacity: 0.4; } + + div.ref { opacity: 1.0; background: rgb(153, 153, 255); } + + ]]></style> + </head> + <body> + <p>The following five boxes should be the same color:</p> + + <div class="top color"></div> + <div class="top color"><div class="color"></div></div> + <div class="top"><div class="color"></div></div> + <div class="top"><div class="color"><div class="color"></div></div></div> + <div class="top ref"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c-ref.html new file mode 100644 index 0000000000..fcbfdb7c16 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + div.test { margin: 1em; line-height: 0.5em; font-family: monospace; } + div.test span { background: rgb(153, 153, 255);} + div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); } +</style> +<body> + <p>The following two boxes should be the same color:</p> + <div class="test"><span> <br> </span></div> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht new file mode 100644 index 0000000000..5920d305e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-1-c.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-offscreen-multiple-boxes-1-c-ref.html" /> + <meta name="assert" content="Opacity is group opacity over elements (not boxes)." /> + <style type="text/css"><![CDATA[ + + body { background: white; } + + div.test { margin: 1em; line-height: 0.5em; font-family: monospace; } + div.test span { opacity: 0.4; background: blue; color: blue; } + + div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); } + + ]]></style> + </head> + <body> + + <p>The following two boxes should be the same color:</p> + + <div class="test"><span>XXXXX<br/>XXXXX</span></div> + + <div class="ref"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c-ref.html new file mode 100644 index 0000000000..b367d5a58e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + body { background: white; } + div.test { margin: 1em; line-height: 0; font-family: monospace; } + div.test span a { background: rgb(153, 153, 255); color: blue; } + div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); } +</style> +<body> + <p>The following two boxes should be the same color:</p> + <div class="test"><span><a> <br> </a></span></div> + <div class="ref"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht new file mode 100644 index 0000000000..ce02031a55 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-multiple-boxes-2-c.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-offscreen-multiple-boxes-2-c-ref.html" /> + <meta name="assert" content="Opacity is group opacity over elements (not boxes)." /> + <style type="text/css"><![CDATA[ + + body { background: white; } + + div.test { margin: 1em; line-height: 0; font-family: monospace; } + div.test span { opacity: 0.4; } + div.test span a { background: blue; color: blue; } + + div.ref { height: 1em; width: 5em; background: rgb(153, 153, 255); } + + ]]></style> + </head> + <body> + + <p>The following two boxes should be the same color:</p> + + <div class="test"><span><a>XXXXX<br/>XXXXX</a></span></div> + + <div class="ref"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-with-alpha-c-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-with-alpha-c-ref.html new file mode 100644 index 0000000000..923e4495d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-with-alpha-c-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + div { width: 5em; height: 1em; margin: 2px 0; } + .test { background: rgb(204, 204, 255); } +</style> +<body> + <p>The following four boxes should be the same color:</p> + + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-with-alpha-c.xht b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-with-alpha-c.xht new file mode 100644 index 0000000000..035609e8a4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-offscreen-with-alpha-c.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-offscreen-with-alpha-c-ref.html" /> + <meta name="assert" content="That alpha within the offscreen buffer is composited correctly." /> + <meta name="fuzzy" content="0-1;0-5120" /> + <style type="text/css"><![CDATA[ + + body { background: white; } + + div { width: 5em; height: 1em; } + div.top { margin: 2px 0; } + + ]]></style> + </head> + <body> + <p>The following four boxes should be the same color:</p> + + <div class="top" style="background: rgb(204, 204, 255)"></div> + <div class="top" style="opacity: 0.2; background: rgb(0, 0, 255)"></div> + <div class="top" style="opacity: 0.5"><div style="opacity: 0.4; background: rgb(0, 0, 255)"></div></div> + <div class="top" style="opacity: 0.4"><div style="background: rgba(0, 0, 255, 0.5)"></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-zorder-c-ref.html b/testing/web-platform/tests/css/css-color/t32-opacity-zorder-c-ref.html new file mode 100644 index 0000000000..deaf50957b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-zorder-c-ref.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 2px; } + td { border: 1px solid; } + td, div { width: 10px; height: 10px; } + div.opc { opacity: 0.99; } + div.green { background: green; } + div.up { margin-top: -10px; } + div.red { background: red; } +</style> +<body> + <p>Each of the following boxes should have a green or + very-nearly-green square inside of it:</p> + <table><tr> + <td> + <div class="green"></div> + </td> + <td> + <div class="red"></div> + <div class="up opc green"></div> + </td> + <td> + <div class="green"></div> + </td> + <td> + <div class="red"></div> + <div class="up opc green"></div> + </td> + <td> + <div class="green"></div> + </td> + <td> + <div class="red"></div> + <div class="up opc green"></div> + </td> + <td> + <div class="green"></div> + </td> + <td> + <div class="green"></div> + </td> + <td> + <div class="green"></div> + </td> + <td> + <div class="green"></div> + </td> + <td> + <div class="red"></div> + <div class="up opc green"></div> + </td> + <td> + <div class="red"></div> + <div class="up opc green"></div> + </td> + </tr></table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t32-opacity-zorder-c.xht b/testing/web-platform/tests/css/css-color/t32-opacity-zorder-c.xht new file mode 100644 index 0000000000..a6896d54fe --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t32-opacity-zorder-c.xht @@ -0,0 +1,108 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: opacity</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparency" /> + <link rel="match" href="t32-opacity-zorder-c-ref.html" /> + <meta name="assert" content="Opacity has z-ordering treatment of positioned elements and z-index applies." /> + <style type="text/css"><![CDATA[ + table { border-spacing: 2px; } + td { border: 1px solid; } + td, div { width: 10px; height: 10px; } + div.up { margin-top: -10px; } + div.pos { position: relative; } + div.opc { opacity: 0.99; } + div.red { background: red; } + div.green { background: green; } + .z0 { z-index: 0; } + .z1 { z-index: 1; } + .zm1 { z-index: -1; } + ]]></style> + </head> + <body> + <p>Each of the following boxes should have a green or + very-nearly-green square inside of it:</p> + <table><tr> + <!-- baseline --> + <td> + <div class="red"></div> + <div class="up green"></div> + </td> + <!-- z-index auto or 0 is in positioned elements layer --> + <td> + <div class="pos red"></div> + <div class="up opc green"></div> + <div class="up red"></div> + </td> + <td> + <div class="opc red"></div> + <div class="up pos green"></div> + <div class="up red"></div> + </td> + <td> + <div class="pos red"></div> + <div class="up opc green z0"></div> + <div class="up red"></div> + </td> + <td> + <div class="opc red"></div> + <div class="up pos green z0"></div> + <div class="up red"></div> + </td> + <td> + <div class="pos red z0"></div> + <div class="up opc green"></div> + <div class="up red"></div> + </td> + <td> + <div class="opc red z0"></div> + <div class="up pos green"></div> + <div class="up red"></div> + </td> + <!-- baseline: make sure z-index: auto works --> + <td> + <div class="pos"> + <div class="pos green z1"></div> + <div class="up pos red zm1"></div> + </div> + <div class="up pos red z0"></div> + <div class="up pos red"></div> + <div class="up red"></div> + </td> + <!-- baseline: make sure z-index: 0 works --> + <td> + <div class="pos z0"> + <div class="pos red z1"></div> + <div class="up pos red zm1"></div> + </div> + <div class="up pos green"></div> + <div class="up red"></div> + </td> + <!-- make sure opacity acts like z-index: 0, not auto --> + <td> + <div class="opc"> + <div class="pos red z1"></div> + <div class="up pos red zm1"></div> + </div> + <div class="up pos green"></div> + <div class="up red"></div> + </td> + <!-- make sure z-index does not apply to elements with opacity if they aren't positioned --> + <td> + <div class="opc z1 red"></div> + <div class="up opc red"></div> + <div class="up opc z0 red"></div> + <div class="up opc zm1 green"></div> + </td> + <!-- ... but that it does if they are positioned --> + <td> + <div class="pos opc z1 green"></div> + <div class="up pos opc red"></div> + <div class="up pos opc z0 red"></div> + <div class="up pos opc zm1 red"></div> + </td> + </tr></table> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t41-html4-keywords-a-ref.html b/testing/web-platform/tests/css/css-color/t41-html4-keywords-a-ref.html new file mode 100644 index 0000000000..4f95dff21c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t41-html4-keywords-a-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + html, body { background: #dddddd; color: #000000; } + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } +</style> +<body> + <p>Each row in the following table (except the first and last, to show where the columns are) should have two cells with the same background color. None of them should match the background of the page.</p> + + <table> + <tr><td style="background: black"> </td><td style="background: white"> </td></tr> + <tr><td style="background: #000000" colspan=2> </td></tr> + <tr><td style="background: #008000" colspan=2> </td></tr> + <tr><td style="background: #C0C0C0" colspan=2> </td></tr> + <tr><td style="background: #00FF00" colspan=2> </td></tr> + <tr><td style="background: #808080" colspan=2> </td></tr> + <tr><td style="background: #808000" colspan=2> </td></tr> + <tr><td style="background: #FFFFFF" colspan=2> </td></tr> + <tr><td style="background: #FFFF00" colspan=2> </td></tr> + <tr><td style="background: #800000" colspan=2> </td></tr> + <tr><td style="background: #000080" colspan=2> </td></tr> + <tr><td style="background: #FF0000" colspan=2> </td></tr> + <tr><td style="background: #0000FF" colspan=2> </td></tr> + <tr><td style="background: #800080" colspan=2> </td></tr> + <tr><td style="background: #008080" colspan=2> </td></tr> + <tr><td style="background: #FF00FF" colspan=2> </td></tr> + <tr><td style="background: #00FFFF" colspan=2> </td></tr> + <tr><td style="background: white"> </td><td style="background: black"> </td></tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t41-html4-keywords-a.xht b/testing/web-platform/tests/css/css-color/t41-html4-keywords-a.xht new file mode 100644 index 0000000000..b866dd55c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t41-html4-keywords-a.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: HTML4 color keywords</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#html4" /> + <link rel="match" href="t41-html4-keywords-a-ref.html" /> + <meta name="assert" content="Test that the HTML4 color keywords have the correct values." /> + <style type="text/css"><![CDATA[ + html, body { background: #dddddd; color: #000000; } + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + ]]></style> + </head> + <body> + + <p>Each row in the following table (except the first and last, to show where the columns are) should have two cells with the same background color. None of them should match the background of the page.</p> + + <table> + <tr><td style="background: black"> </td><td style="background: white"> </td></tr> + <tr><td style="background: black"> </td><td style="background: #000000"> </td></tr> + <tr><td style="background: green"> </td><td style="background: #008000"> </td></tr> + <tr><td style="background: silver"> </td><td style="background: #C0C0C0"> </td></tr> + <tr><td style="background: lime"> </td><td style="background: #00FF00"> </td></tr> + <tr><td style="background: gray"> </td><td style="background: #808080"> </td></tr> + <tr><td style="background: olive"> </td><td style="background: #808000"> </td></tr> + <tr><td style="background: white"> </td><td style="background: #FFFFFF"> </td></tr> + <tr><td style="background: yellow"> </td><td style="background: #FFFF00"> </td></tr> + <tr><td style="background: maroon"> </td><td style="background: #800000"> </td></tr> + <tr><td style="background: navy"> </td><td style="background: #000080"> </td></tr> + <tr><td style="background: red"> </td><td style="background: #FF0000"> </td></tr> + <tr><td style="background: blue"> </td><td style="background: #0000FF"> </td></tr> + <tr><td style="background: purple"> </td><td style="background: #800080"> </td></tr> + <tr><td style="background: teal"> </td><td style="background: #008080"> </td></tr> + <tr><td style="background: fuchsia"> </td><td style="background: #FF00FF"> </td></tr> + <tr><td style="background: aqua"> </td><td style="background: #00FFFF"> </td></tr> + <tr><td style="background: white"> </td><td style="background: black"> </td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-clip-outside-gamut-b-ref.html b/testing/web-platform/tests/css/css-color/t421-rgb-clip-outside-gamut-b-ref.html new file mode 100644 index 0000000000..81bbc51c30 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-clip-outside-gamut-b-ref.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } +</style> +<body> + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + <p>Every row in this table should have both columns the same color:</p> + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 0, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(50, 0, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 50, 255)"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-clip-outside-gamut-b.xht b/testing/web-platform/tests/css/css-color/t421-rgb-clip-outside-gamut-b.xht new file mode 100644 index 0000000000..410a6a9430 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-clip-outside-gamut-b.xht @@ -0,0 +1,64 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgb() clipping outside device gamut</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t421-rgb-clip-outside-gamut-b-ref.html" /> + <meta name="assert" content="Test clipping of rgb() values outside the device gamut." /> + <style type="text/css"><![CDATA[ + + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } + + ]]></style> + </head> + <body> + + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + + <p>Every row in this table should have both columns the same color:</p> + + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td style="background: rgb(-30, 500, -1)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td style="background: rgb(-260, -254, 300)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + </tr> + <tr> + <td style="background: rgb(-254, 256, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td style="background: rgb(-10%, 200%, -1%)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td style="background: rgb(-110%, 130%, -99%)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td style="background: rgb(-99%, 101%, 0%)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + </tr> + <tr> + <td style="background: rgb(50, -30, 255)"> </td> + <td style="background: rgb(50, 0, 255)"> </td> + </tr> + <tr> + <td style="background: rgb(0, 50, 350)"> </td> + <td style="background: rgb(0, 50, 255)"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-func-int-a.xht b/testing/web-platform/tests/css/css-color/t421-rgb-func-int-a.xht new file mode 100644 index 0000000000..c37dfd91af --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-func-int-a.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgb() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-int-a-ref.html" /> + <meta name="assert" content="Test that rgb() values produce correct colors." /> + <style type="text/css"><![CDATA[ + #one { color: rgb(0, 0, 0); background: rgb(255, 255, 255); } + #two { color: rgb(255, 255, 255); background: rgb(0, 0, 0); } + #three { color: rgb(255, 0, 0); } + #four { color: rgb(0, 255, 0); } + #five { color: rgb(0, 0, 255); } + ]]></style> + </head> + <body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-func-no-mixed-f.xht b/testing/web-platform/tests/css/css-color/t421-rgb-func-no-mixed-f.xht new file mode 100644 index 0000000000..59a375b75d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-func-no-mixed-f.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: no mixed rgb() values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-no-mixed-f-ref.html" /> + <meta name="flags" content="invalid" /> + <meta name="assert" content="Test that rgb() values are only accepted when all integers or all percentages." /> + <style type="text/css"><![CDATA[ + p { color: green; } + p { color: rgb(255, 0, 0%); } + p { color: rgb(100%, 0%, 0); } + p { color: rgb(100%, 1, 0); } + p { color: rgb(255, 1%, 0%); } + p { color: rgb(99%, 0%, 0); } + p { color: rgb(0%, 0, 0%); } + p { color: rgb(0, 0%, 0%); } + p { color: rgb(254, 255%, 0); } + ]]></style> + </head> + <body> + <p>This text should be green.</p> + + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-func-pct-a.xht b/testing/web-platform/tests/css/css-color/t421-rgb-func-pct-a.xht new file mode 100644 index 0000000000..51a4c9112d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-func-pct-a.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgb() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-int-a-ref.html" /> + <meta name="assert" content="Test that rgb() values produce correct colors." /> + <style type="text/css"><![CDATA[ + #one { color: rgb(0%, 0%, 0%); background: rgb(100%, 100%, 100%); } + #two { color: rgb(100%, 100%, 100%); background: rgb(0%, 0%, 0%); } + #three { color: rgb(100%, 0%, 0%); } + #four { color: rgb(0%, 100%, 0%); } + #five { color: rgb(0%, 0%, 100%); } + ]]></style> + </head> + <body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-func-whitespace-b.xht b/testing/web-platform/tests/css/css-color/t421-rgb-func-whitespace-b.xht new file mode 100644 index 0000000000..29c513a132 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-func-whitespace-b.xht @@ -0,0 +1,35 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: whitespace in rgb() values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-whitespace-b-ref.html" /> + <meta name="assert" content="Test that whitespace is allowed within rgb() functions." /> + <style type="text/css"><![CDATA[ + html, body { background: black; } + #one { color: rgb( 0, +255 ,0); } + #two { color: rgb(0 +,255 +,0); } + #three { color: rgb( 0 , 255 , 0 ); } + + #four { color: rgb( 0%, +100% ,0%); } + #five { color: rgb(0% +,100% +,0%); } + #six { color: rgb( 0% , 100% , 0% ); } + ]]></style> + </head> + <body> + <p id="one">This text should be green.</p> + <p id="two">This text should be green.</p> + <p id="three">This text should be green.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be green.</p> + <p id="six">This text should be green.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-hex-parsing-f.xht b/testing/web-platform/tests/css/css-color/t421-rgb-hex-parsing-f.xht new file mode 100644 index 0000000000..f3f3aad63c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-hex-parsing-f.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: parsing of hexidecimal color values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-no-mixed-f-ref.html" /> + <meta name="flags" content="invalid" /> + <meta name="assert" content="Test that hexidecimal values are only accepted if they have 3 or six digits." /> + <style type="text/css"><![CDATA[ + p { color: green; } + p { color: #f; } + p { color: #ff; } + p { color: #ff000; } + p { color: #ff00000; } + p { color: #ff0000000; } + p { color: #ff00000000; } + ]]></style> + </head> + <body> + <p>This text should be green.</p> + + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-hex3-a.xht b/testing/web-platform/tests/css/css-color/t421-rgb-hex3-a.xht new file mode 100644 index 0000000000..b21e4887a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-hex3-a.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: #rgb colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-int-a-ref.html" /> + <meta name="assert" content="Test that #rgb values produce correct colors." /> + <style type="text/css"><![CDATA[ + #one { color: #000; background: #fff; } + #two { color: #fff; background: #000; } + #three { color: #f00; } + #four { color: #0f0; } + #five { color: #00f; } + ]]></style> + </head> + <body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-hex3-expand-b-ref.html b/testing/web-platform/tests/css/css-color/t421-rgb-hex3-expand-b-ref.html new file mode 100644 index 0000000000..43ac1d39a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-hex3-expand-b-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The left and right cells in each row of the following table should be the <em>same</em> color.</p> + + <table> + <tr><td style="background: #ee9922"> </td><td style="background: #ee9922"> </td></tr> + <tr><td style="background: #ffbb00"> </td><td style="background: #ffbb00"> </td></tr> + <tr><td style="background: #338811"> </td><td style="background: #338811"> </td></tr> + </table> + + <p>The left and right cells in each row of the following table should be slightly <em>different</em> colors. The right side should be slightly darker than the left.</p> + + <table> + <tr><td style="background: #ee9922"> </td><td style="background: #e09020"> </td></tr> + <tr><td style="background: #ffbb00"> </td><td style="background: #f0b000"> </td></tr> + <tr><td style="background: #338811"> </td><td style="background: #308010"> </td></tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-hex3-expand-b.xht b/testing/web-platform/tests/css/css-color/t421-rgb-hex3-expand-b.xht new file mode 100644 index 0000000000..71dc06d30d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-hex3-expand-b.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: expansion of #rgb colors to #rrggbb</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t421-rgb-hex3-expand-b-ref.html" /> + <meta name="assert" content="Test that 3-digit #rgb values are expanded into #rrggbb and not #r0g0b0" /> + <style type="text/css"><![CDATA[ + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; width: 1.2em; height: 1.2em; } + ]]></style> + </head> + <body> + + <p>The left and right cells in each row of the following table should be the <em>same</em> color.</p> + + <table> + <tr><td style="background: #e92"> </td><td style="background: #ee9922"> </td></tr> + <tr><td style="background: #fb0"> </td><td style="background: #ffbb00"> </td></tr> + <tr><td style="background: #381"> </td><td style="background: #338811"> </td></tr> + </table> + + <p>The left and right cells in each row of the following table should be slightly <em>different</em> colors. The right side should be slightly darker than the left.</p> + + <table> + <tr><td style="background: #e92"> </td><td style="background: #e09020"> </td></tr> + <tr><td style="background: #fb0"> </td><td style="background: #f0b000"> </td></tr> + <tr><td style="background: #381"> </td><td style="background: #308010"> </td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-hex6-a.xht b/testing/web-platform/tests/css/css-color/t421-rgb-hex6-a.xht new file mode 100644 index 0000000000..a88e181b45 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-hex6-a.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: #rrggbb colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-func-int-a-ref.html" /> + <meta name="assert" content="Test that #rrggbb values produce correct colors." /> + <style type="text/css"><![CDATA[ + #one { color: #000000; background: #ffffff; } + #two { color: #ffffff; background: #000000; } + #three { color: #ff0000; } + #four { color: #00ff00; } + #five { color: #0000ff; } + ]]></style> + </head> + <body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-values-meaning-b-ref.html b/testing/web-platform/tests/css/css-color/t421-rgb-values-meaning-b-ref.html new file mode 100644 index 0000000000..b824200a06 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-values-meaning-b-ref.html @@ -0,0 +1,1539 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following table should have four matching rows gradually changing from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee0000"> </td> + <td style="background: #dd0000"> </td> + <td style="background: #cc0000"> </td> + <td style="background: #bb0000"> </td> + <td style="background: #aa0000"> </td> + <td style="background: #990000"> </td> + <td style="background: #880000"> </td> + <td style="background: #770000"> </td> + <td style="background: #660000"> </td> + <td style="background: #550000"> </td> + <td style="background: #440000"> </td> + <td style="background: #330000"> </td> + <td style="background: #220000"> </td> + <td style="background: #110000"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee0000"> </td> + <td style="background: #dd0000"> </td> + <td style="background: #cc0000"> </td> + <td style="background: #bb0000"> </td> + <td style="background: #aa0000"> </td> + <td style="background: #990000"> </td> + <td style="background: #880000"> </td> + <td style="background: #770000"> </td> + <td style="background: #660000"> </td> + <td style="background: #550000"> </td> + <td style="background: #440000"> </td> + <td style="background: #330000"> </td> + <td style="background: #220000"> </td> + <td style="background: #110000"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee0000"> </td> + <td style="background: #dd0000"> </td> + <td style="background: #cc0000"> </td> + <td style="background: #bb0000"> </td> + <td style="background: #aa0000"> </td> + <td style="background: #990000"> </td> + <td style="background: #880000"> </td> + <td style="background: #770000"> </td> + <td style="background: #660000"> </td> + <td style="background: #550000"> </td> + <td style="background: #440000"> </td> + <td style="background: #330000"> </td> + <td style="background: #220000"> </td> + <td style="background: #110000"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee0000"> </td> + <td style="background: #dd0000"> </td> + <td style="background: #cc0000"> </td> + <td style="background: #bb0000"> </td> + <td style="background: #aa0000"> </td> + <td style="background: #990000"> </td> + <td style="background: #880000"> </td> + <td style="background: #770000"> </td> + <td style="background: #660000"> </td> + <td style="background: #550000"> </td> + <td style="background: #440000"> </td> + <td style="background: #330000"> </td> + <td style="background: #220000"> </td> + <td style="background: #110000"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeee"> </td> + <td style="background: #ffdddd"> </td> + <td style="background: #ffcccc"> </td> + <td style="background: #ffbbbb"> </td> + <td style="background: #ffaaaa"> </td> + <td style="background: #ff9999"> </td> + <td style="background: #ff8888"> </td> + <td style="background: #ff7777"> </td> + <td style="background: #ff6666"> </td> + <td style="background: #ff5555"> </td> + <td style="background: #ff4444"> </td> + <td style="background: #ff3333"> </td> + <td style="background: #ff2222"> </td> + <td style="background: #ff1111"> </td> + <td style="background: #ff0000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeee"> </td> + <td style="background: #ffdddd"> </td> + <td style="background: #ffcccc"> </td> + <td style="background: #ffbbbb"> </td> + <td style="background: #ffaaaa"> </td> + <td style="background: #ff9999"> </td> + <td style="background: #ff8888"> </td> + <td style="background: #ff7777"> </td> + <td style="background: #ff6666"> </td> + <td style="background: #ff5555"> </td> + <td style="background: #ff4444"> </td> + <td style="background: #ff3333"> </td> + <td style="background: #ff2222"> </td> + <td style="background: #ff1111"> </td> + <td style="background: #ff0000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeee"> </td> + <td style="background: #ffdddd"> </td> + <td style="background: #ffcccc"> </td> + <td style="background: #ffbbbb"> </td> + <td style="background: #ffaaaa"> </td> + <td style="background: #ff9999"> </td> + <td style="background: #ff8888"> </td> + <td style="background: #ff7777"> </td> + <td style="background: #ff6666"> </td> + <td style="background: #ff5555"> </td> + <td style="background: #ff4444"> </td> + <td style="background: #ff3333"> </td> + <td style="background: #ff2222"> </td> + <td style="background: #ff1111"> </td> + <td style="background: #ff0000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeee"> </td> + <td style="background: #ffdddd"> </td> + <td style="background: #ffcccc"> </td> + <td style="background: #ffbbbb"> </td> + <td style="background: #ffaaaa"> </td> + <td style="background: #ff9999"> </td> + <td style="background: #ff8888"> </td> + <td style="background: #ff7777"> </td> + <td style="background: #ff6666"> </td> + <td style="background: #ff5555"> </td> + <td style="background: #ff4444"> </td> + <td style="background: #ff3333"> </td> + <td style="background: #ff2222"> </td> + <td style="background: #ff1111"> </td> + <td style="background: #ff0000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee00"> </td> + <td style="background: #00dd00"> </td> + <td style="background: #00cc00"> </td> + <td style="background: #00bb00"> </td> + <td style="background: #00aa00"> </td> + <td style="background: #009900"> </td> + <td style="background: #008800"> </td> + <td style="background: #007700"> </td> + <td style="background: #006600"> </td> + <td style="background: #005500"> </td> + <td style="background: #004400"> </td> + <td style="background: #003300"> </td> + <td style="background: #002200"> </td> + <td style="background: #001100"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee00"> </td> + <td style="background: #00dd00"> </td> + <td style="background: #00cc00"> </td> + <td style="background: #00bb00"> </td> + <td style="background: #00aa00"> </td> + <td style="background: #009900"> </td> + <td style="background: #008800"> </td> + <td style="background: #007700"> </td> + <td style="background: #006600"> </td> + <td style="background: #005500"> </td> + <td style="background: #004400"> </td> + <td style="background: #003300"> </td> + <td style="background: #002200"> </td> + <td style="background: #001100"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee00"> </td> + <td style="background: #00dd00"> </td> + <td style="background: #00cc00"> </td> + <td style="background: #00bb00"> </td> + <td style="background: #00aa00"> </td> + <td style="background: #009900"> </td> + <td style="background: #008800"> </td> + <td style="background: #007700"> </td> + <td style="background: #006600"> </td> + <td style="background: #005500"> </td> + <td style="background: #004400"> </td> + <td style="background: #003300"> </td> + <td style="background: #002200"> </td> + <td style="background: #001100"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee00"> </td> + <td style="background: #00dd00"> </td> + <td style="background: #00cc00"> </td> + <td style="background: #00bb00"> </td> + <td style="background: #00aa00"> </td> + <td style="background: #009900"> </td> + <td style="background: #008800"> </td> + <td style="background: #007700"> </td> + <td style="background: #006600"> </td> + <td style="background: #005500"> </td> + <td style="background: #004400"> </td> + <td style="background: #003300"> </td> + <td style="background: #002200"> </td> + <td style="background: #001100"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffee"> </td> + <td style="background: #ddffdd"> </td> + <td style="background: #ccffcc"> </td> + <td style="background: #bbffbb"> </td> + <td style="background: #aaffaa"> </td> + <td style="background: #99ff99"> </td> + <td style="background: #88ff88"> </td> + <td style="background: #77ff77"> </td> + <td style="background: #66ff66"> </td> + <td style="background: #55ff55"> </td> + <td style="background: #44ff44"> </td> + <td style="background: #33ff33"> </td> + <td style="background: #22ff22"> </td> + <td style="background: #11ff11"> </td> + <td style="background: #00ff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffee"> </td> + <td style="background: #ddffdd"> </td> + <td style="background: #ccffcc"> </td> + <td style="background: #bbffbb"> </td> + <td style="background: #aaffaa"> </td> + <td style="background: #99ff99"> </td> + <td style="background: #88ff88"> </td> + <td style="background: #77ff77"> </td> + <td style="background: #66ff66"> </td> + <td style="background: #55ff55"> </td> + <td style="background: #44ff44"> </td> + <td style="background: #33ff33"> </td> + <td style="background: #22ff22"> </td> + <td style="background: #11ff11"> </td> + <td style="background: #00ff00"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffee"> </td> + <td style="background: #ddffdd"> </td> + <td style="background: #ccffcc"> </td> + <td style="background: #bbffbb"> </td> + <td style="background: #aaffaa"> </td> + <td style="background: #99ff99"> </td> + <td style="background: #88ff88"> </td> + <td style="background: #77ff77"> </td> + <td style="background: #66ff66"> </td> + <td style="background: #55ff55"> </td> + <td style="background: #44ff44"> </td> + <td style="background: #33ff33"> </td> + <td style="background: #22ff22"> </td> + <td style="background: #11ff11"> </td> + <td style="background: #00ff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffee"> </td> + <td style="background: #ddffdd"> </td> + <td style="background: #ccffcc"> </td> + <td style="background: #bbffbb"> </td> + <td style="background: #aaffaa"> </td> + <td style="background: #99ff99"> </td> + <td style="background: #88ff88"> </td> + <td style="background: #77ff77"> </td> + <td style="background: #66ff66"> </td> + <td style="background: #55ff55"> </td> + <td style="background: #44ff44"> </td> + <td style="background: #33ff33"> </td> + <td style="background: #22ff22"> </td> + <td style="background: #11ff11"> </td> + <td style="background: #00ff00"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #0000ee"> </td> + <td style="background: #0000dd"> </td> + <td style="background: #0000cc"> </td> + <td style="background: #0000bb"> </td> + <td style="background: #0000aa"> </td> + <td style="background: #000099"> </td> + <td style="background: #000088"> </td> + <td style="background: #000077"> </td> + <td style="background: #000066"> </td> + <td style="background: #000055"> </td> + <td style="background: #000044"> </td> + <td style="background: #000033"> </td> + <td style="background: #000022"> </td> + <td style="background: #000011"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #0000ee"> </td> + <td style="background: #0000dd"> </td> + <td style="background: #0000cc"> </td> + <td style="background: #0000bb"> </td> + <td style="background: #0000aa"> </td> + <td style="background: #000099"> </td> + <td style="background: #000088"> </td> + <td style="background: #000077"> </td> + <td style="background: #000066"> </td> + <td style="background: #000055"> </td> + <td style="background: #000044"> </td> + <td style="background: #000033"> </td> + <td style="background: #000022"> </td> + <td style="background: #000011"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #0000ee"> </td> + <td style="background: #0000dd"> </td> + <td style="background: #0000cc"> </td> + <td style="background: #0000bb"> </td> + <td style="background: #0000aa"> </td> + <td style="background: #000099"> </td> + <td style="background: #000088"> </td> + <td style="background: #000077"> </td> + <td style="background: #000066"> </td> + <td style="background: #000055"> </td> + <td style="background: #000044"> </td> + <td style="background: #000033"> </td> + <td style="background: #000022"> </td> + <td style="background: #000011"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #0000ee"> </td> + <td style="background: #0000dd"> </td> + <td style="background: #0000cc"> </td> + <td style="background: #0000bb"> </td> + <td style="background: #0000aa"> </td> + <td style="background: #000099"> </td> + <td style="background: #000088"> </td> + <td style="background: #000077"> </td> + <td style="background: #000066"> </td> + <td style="background: #000055"> </td> + <td style="background: #000044"> </td> + <td style="background: #000033"> </td> + <td style="background: #000022"> </td> + <td style="background: #000011"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeeeff"> </td> + <td style="background: #ddddff"> </td> + <td style="background: #ccccff"> </td> + <td style="background: #bbbbff"> </td> + <td style="background: #aaaaff"> </td> + <td style="background: #9999ff"> </td> + <td style="background: #8888ff"> </td> + <td style="background: #7777ff"> </td> + <td style="background: #6666ff"> </td> + <td style="background: #5555ff"> </td> + <td style="background: #4444ff"> </td> + <td style="background: #3333ff"> </td> + <td style="background: #2222ff"> </td> + <td style="background: #1111ff"> </td> + <td style="background: #0000ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeeeff"> </td> + <td style="background: #ddddff"> </td> + <td style="background: #ccccff"> </td> + <td style="background: #bbbbff"> </td> + <td style="background: #aaaaff"> </td> + <td style="background: #9999ff"> </td> + <td style="background: #8888ff"> </td> + <td style="background: #7777ff"> </td> + <td style="background: #6666ff"> </td> + <td style="background: #5555ff"> </td> + <td style="background: #4444ff"> </td> + <td style="background: #3333ff"> </td> + <td style="background: #2222ff"> </td> + <td style="background: #1111ff"> </td> + <td style="background: #0000ff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeeeff"> </td> + <td style="background: #ddddff"> </td> + <td style="background: #ccccff"> </td> + <td style="background: #bbbbff"> </td> + <td style="background: #aaaaff"> </td> + <td style="background: #9999ff"> </td> + <td style="background: #8888ff"> </td> + <td style="background: #7777ff"> </td> + <td style="background: #6666ff"> </td> + <td style="background: #5555ff"> </td> + <td style="background: #4444ff"> </td> + <td style="background: #3333ff"> </td> + <td style="background: #2222ff"> </td> + <td style="background: #1111ff"> </td> + <td style="background: #0000ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeeeff"> </td> + <td style="background: #ddddff"> </td> + <td style="background: #ccccff"> </td> + <td style="background: #bbbbff"> </td> + <td style="background: #aaaaff"> </td> + <td style="background: #9999ff"> </td> + <td style="background: #8888ff"> </td> + <td style="background: #7777ff"> </td> + <td style="background: #6666ff"> </td> + <td style="background: #5555ff"> </td> + <td style="background: #4444ff"> </td> + <td style="background: #3333ff"> </td> + <td style="background: #2222ff"> </td> + <td style="background: #1111ff"> </td> + <td style="background: #0000ff"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #eeee00"> </td> + <td style="background: #dddd00"> </td> + <td style="background: #cccc00"> </td> + <td style="background: #bbbb00"> </td> + <td style="background: #aaaa00"> </td> + <td style="background: #999900"> </td> + <td style="background: #888800"> </td> + <td style="background: #777700"> </td> + <td style="background: #666600"> </td> + <td style="background: #555500"> </td> + <td style="background: #444400"> </td> + <td style="background: #333300"> </td> + <td style="background: #222200"> </td> + <td style="background: #111100"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #eeee00"> </td> + <td style="background: #dddd00"> </td> + <td style="background: #cccc00"> </td> + <td style="background: #bbbb00"> </td> + <td style="background: #aaaa00"> </td> + <td style="background: #999900"> </td> + <td style="background: #888800"> </td> + <td style="background: #777700"> </td> + <td style="background: #666600"> </td> + <td style="background: #555500"> </td> + <td style="background: #444400"> </td> + <td style="background: #333300"> </td> + <td style="background: #222200"> </td> + <td style="background: #111100"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #eeee00"> </td> + <td style="background: #dddd00"> </td> + <td style="background: #cccc00"> </td> + <td style="background: #bbbb00"> </td> + <td style="background: #aaaa00"> </td> + <td style="background: #999900"> </td> + <td style="background: #888800"> </td> + <td style="background: #777700"> </td> + <td style="background: #666600"> </td> + <td style="background: #555500"> </td> + <td style="background: #444400"> </td> + <td style="background: #333300"> </td> + <td style="background: #222200"> </td> + <td style="background: #111100"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #eeee00"> </td> + <td style="background: #dddd00"> </td> + <td style="background: #cccc00"> </td> + <td style="background: #bbbb00"> </td> + <td style="background: #aaaa00"> </td> + <td style="background: #999900"> </td> + <td style="background: #888800"> </td> + <td style="background: #777700"> </td> + <td style="background: #666600"> </td> + <td style="background: #555500"> </td> + <td style="background: #444400"> </td> + <td style="background: #333300"> </td> + <td style="background: #222200"> </td> + <td style="background: #111100"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to yellow at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffffee"> </td> + <td style="background: #ffffdd"> </td> + <td style="background: #ffffcc"> </td> + <td style="background: #ffffbb"> </td> + <td style="background: #ffffaa"> </td> + <td style="background: #ffff99"> </td> + <td style="background: #ffff88"> </td> + <td style="background: #ffff77"> </td> + <td style="background: #ffff66"> </td> + <td style="background: #ffff55"> </td> + <td style="background: #ffff44"> </td> + <td style="background: #ffff33"> </td> + <td style="background: #ffff22"> </td> + <td style="background: #ffff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffffee"> </td> + <td style="background: #ffffdd"> </td> + <td style="background: #ffffcc"> </td> + <td style="background: #ffffbb"> </td> + <td style="background: #ffffaa"> </td> + <td style="background: #ffff99"> </td> + <td style="background: #ffff88"> </td> + <td style="background: #ffff77"> </td> + <td style="background: #ffff66"> </td> + <td style="background: #ffff55"> </td> + <td style="background: #ffff44"> </td> + <td style="background: #ffff33"> </td> + <td style="background: #ffff22"> </td> + <td style="background: #ffff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffffee"> </td> + <td style="background: #ffffdd"> </td> + <td style="background: #ffffcc"> </td> + <td style="background: #ffffbb"> </td> + <td style="background: #ffffaa"> </td> + <td style="background: #ffff99"> </td> + <td style="background: #ffff88"> </td> + <td style="background: #ffff77"> </td> + <td style="background: #ffff66"> </td> + <td style="background: #ffff55"> </td> + <td style="background: #ffff44"> </td> + <td style="background: #ffff33"> </td> + <td style="background: #ffff22"> </td> + <td style="background: #ffff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffffee"> </td> + <td style="background: #ffffdd"> </td> + <td style="background: #ffffcc"> </td> + <td style="background: #ffffbb"> </td> + <td style="background: #ffffaa"> </td> + <td style="background: #ffff99"> </td> + <td style="background: #ffff88"> </td> + <td style="background: #ffff77"> </td> + <td style="background: #ffff66"> </td> + <td style="background: #ffff55"> </td> + <td style="background: #ffff44"> </td> + <td style="background: #ffff33"> </td> + <td style="background: #ffff22"> </td> + <td style="background: #ffff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee00ee"> </td> + <td style="background: #dd00dd"> </td> + <td style="background: #cc00cc"> </td> + <td style="background: #bb00bb"> </td> + <td style="background: #aa00aa"> </td> + <td style="background: #990099"> </td> + <td style="background: #880088"> </td> + <td style="background: #770077"> </td> + <td style="background: #660066"> </td> + <td style="background: #550055"> </td> + <td style="background: #440044"> </td> + <td style="background: #330033"> </td> + <td style="background: #220022"> </td> + <td style="background: #110011"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee00ee"> </td> + <td style="background: #dd00dd"> </td> + <td style="background: #cc00cc"> </td> + <td style="background: #bb00bb"> </td> + <td style="background: #aa00aa"> </td> + <td style="background: #990099"> </td> + <td style="background: #880088"> </td> + <td style="background: #770077"> </td> + <td style="background: #660066"> </td> + <td style="background: #550055"> </td> + <td style="background: #440044"> </td> + <td style="background: #330033"> </td> + <td style="background: #220022"> </td> + <td style="background: #110011"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee00ee"> </td> + <td style="background: #dd00dd"> </td> + <td style="background: #cc00cc"> </td> + <td style="background: #bb00bb"> </td> + <td style="background: #aa00aa"> </td> + <td style="background: #990099"> </td> + <td style="background: #880088"> </td> + <td style="background: #770077"> </td> + <td style="background: #660066"> </td> + <td style="background: #550055"> </td> + <td style="background: #440044"> </td> + <td style="background: #330033"> </td> + <td style="background: #220022"> </td> + <td style="background: #110011"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee00ee"> </td> + <td style="background: #dd00dd"> </td> + <td style="background: #cc00cc"> </td> + <td style="background: #bb00bb"> </td> + <td style="background: #aa00aa"> </td> + <td style="background: #990099"> </td> + <td style="background: #880088"> </td> + <td style="background: #770077"> </td> + <td style="background: #660066"> </td> + <td style="background: #550055"> </td> + <td style="background: #440044"> </td> + <td style="background: #330033"> </td> + <td style="background: #220022"> </td> + <td style="background: #110011"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to fuchsia at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeff"> </td> + <td style="background: #ffddff"> </td> + <td style="background: #ffccff"> </td> + <td style="background: #ffbbff"> </td> + <td style="background: #ffaaff"> </td> + <td style="background: #ff99ff"> </td> + <td style="background: #ff88ff"> </td> + <td style="background: #ff77ff"> </td> + <td style="background: #ff66ff"> </td> + <td style="background: #ff55ff"> </td> + <td style="background: #ff44ff"> </td> + <td style="background: #ff33ff"> </td> + <td style="background: #ff22ff"> </td> + <td style="background: #ff11ff"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeff"> </td> + <td style="background: #ffddff"> </td> + <td style="background: #ffccff"> </td> + <td style="background: #ffbbff"> </td> + <td style="background: #ffaaff"> </td> + <td style="background: #ff99ff"> </td> + <td style="background: #ff88ff"> </td> + <td style="background: #ff77ff"> </td> + <td style="background: #ff66ff"> </td> + <td style="background: #ff55ff"> </td> + <td style="background: #ff44ff"> </td> + <td style="background: #ff33ff"> </td> + <td style="background: #ff22ff"> </td> + <td style="background: #ff11ff"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeff"> </td> + <td style="background: #ffddff"> </td> + <td style="background: #ffccff"> </td> + <td style="background: #ffbbff"> </td> + <td style="background: #ffaaff"> </td> + <td style="background: #ff99ff"> </td> + <td style="background: #ff88ff"> </td> + <td style="background: #ff77ff"> </td> + <td style="background: #ff66ff"> </td> + <td style="background: #ff55ff"> </td> + <td style="background: #ff44ff"> </td> + <td style="background: #ff33ff"> </td> + <td style="background: #ff22ff"> </td> + <td style="background: #ff11ff"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeff"> </td> + <td style="background: #ffddff"> </td> + <td style="background: #ffccff"> </td> + <td style="background: #ffbbff"> </td> + <td style="background: #ffaaff"> </td> + <td style="background: #ff99ff"> </td> + <td style="background: #ff88ff"> </td> + <td style="background: #ff77ff"> </td> + <td style="background: #ff66ff"> </td> + <td style="background: #ff55ff"> </td> + <td style="background: #ff44ff"> </td> + <td style="background: #ff33ff"> </td> + <td style="background: #ff22ff"> </td> + <td style="background: #ff11ff"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #00eeee"> </td> + <td style="background: #00dddd"> </td> + <td style="background: #00cccc"> </td> + <td style="background: #00bbbb"> </td> + <td style="background: #00aaaa"> </td> + <td style="background: #009999"> </td> + <td style="background: #008888"> </td> + <td style="background: #007777"> </td> + <td style="background: #006666"> </td> + <td style="background: #005555"> </td> + <td style="background: #004444"> </td> + <td style="background: #003333"> </td> + <td style="background: #002222"> </td> + <td style="background: #001111"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #00eeee"> </td> + <td style="background: #00dddd"> </td> + <td style="background: #00cccc"> </td> + <td style="background: #00bbbb"> </td> + <td style="background: #00aaaa"> </td> + <td style="background: #009999"> </td> + <td style="background: #008888"> </td> + <td style="background: #007777"> </td> + <td style="background: #006666"> </td> + <td style="background: #005555"> </td> + <td style="background: #004444"> </td> + <td style="background: #003333"> </td> + <td style="background: #002222"> </td> + <td style="background: #001111"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #00eeee"> </td> + <td style="background: #00dddd"> </td> + <td style="background: #00cccc"> </td> + <td style="background: #00bbbb"> </td> + <td style="background: #00aaaa"> </td> + <td style="background: #009999"> </td> + <td style="background: #008888"> </td> + <td style="background: #007777"> </td> + <td style="background: #006666"> </td> + <td style="background: #005555"> </td> + <td style="background: #004444"> </td> + <td style="background: #003333"> </td> + <td style="background: #002222"> </td> + <td style="background: #001111"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #00eeee"> </td> + <td style="background: #00dddd"> </td> + <td style="background: #00cccc"> </td> + <td style="background: #00bbbb"> </td> + <td style="background: #00aaaa"> </td> + <td style="background: #009999"> </td> + <td style="background: #008888"> </td> + <td style="background: #007777"> </td> + <td style="background: #006666"> </td> + <td style="background: #005555"> </td> + <td style="background: #004444"> </td> + <td style="background: #003333"> </td> + <td style="background: #002222"> </td> + <td style="background: #001111"> </td> + <td style="background: #000000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to aqua at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffff"> </td> + <td style="background: #ddffff"> </td> + <td style="background: #ccffff"> </td> + <td style="background: #bbffff"> </td> + <td style="background: #aaffff"> </td> + <td style="background: #99ffff"> </td> + <td style="background: #88ffff"> </td> + <td style="background: #77ffff"> </td> + <td style="background: #66ffff"> </td> + <td style="background: #55ffff"> </td> + <td style="background: #44ffff"> </td> + <td style="background: #33ffff"> </td> + <td style="background: #22ffff"> </td> + <td style="background: #11ffff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffff"> </td> + <td style="background: #ddffff"> </td> + <td style="background: #ccffff"> </td> + <td style="background: #bbffff"> </td> + <td style="background: #aaffff"> </td> + <td style="background: #99ffff"> </td> + <td style="background: #88ffff"> </td> + <td style="background: #77ffff"> </td> + <td style="background: #66ffff"> </td> + <td style="background: #55ffff"> </td> + <td style="background: #44ffff"> </td> + <td style="background: #33ffff"> </td> + <td style="background: #22ffff"> </td> + <td style="background: #11ffff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffff"> </td> + <td style="background: #ddffff"> </td> + <td style="background: #ccffff"> </td> + <td style="background: #bbffff"> </td> + <td style="background: #aaffff"> </td> + <td style="background: #99ffff"> </td> + <td style="background: #88ffff"> </td> + <td style="background: #77ffff"> </td> + <td style="background: #66ffff"> </td> + <td style="background: #55ffff"> </td> + <td style="background: #44ffff"> </td> + <td style="background: #33ffff"> </td> + <td style="background: #22ffff"> </td> + <td style="background: #11ffff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffff"> </td> + <td style="background: #ddffff"> </td> + <td style="background: #ccffff"> </td> + <td style="background: #bbffff"> </td> + <td style="background: #aaffff"> </td> + <td style="background: #99ffff"> </td> + <td style="background: #88ffff"> </td> + <td style="background: #77ffff"> </td> + <td style="background: #66ffff"> </td> + <td style="background: #55ffff"> </td> + <td style="background: #44ffff"> </td> + <td style="background: #33ffff"> </td> + <td style="background: #22ffff"> </td> + <td style="background: #11ffff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee1100"> </td> + <td style="background: #dd2200"> </td> + <td style="background: #cc3300"> </td> + <td style="background: #bb4400"> </td> + <td style="background: #aa5500"> </td> + <td style="background: #996600"> </td> + <td style="background: #887700"> </td> + <td style="background: #778800"> </td> + <td style="background: #669900"> </td> + <td style="background: #55aa00"> </td> + <td style="background: #44bb00"> </td> + <td style="background: #33cc00"> </td> + <td style="background: #22dd00"> </td> + <td style="background: #11ee00"> </td> + <td style="background: #00ff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee1100"> </td> + <td style="background: #dd2200"> </td> + <td style="background: #cc3300"> </td> + <td style="background: #bb4400"> </td> + <td style="background: #aa5500"> </td> + <td style="background: #996600"> </td> + <td style="background: #887700"> </td> + <td style="background: #778800"> </td> + <td style="background: #669900"> </td> + <td style="background: #55aa00"> </td> + <td style="background: #44bb00"> </td> + <td style="background: #33cc00"> </td> + <td style="background: #22dd00"> </td> + <td style="background: #11ee00"> </td> + <td style="background: #00ff00"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee1100"> </td> + <td style="background: #dd2200"> </td> + <td style="background: #cc3300"> </td> + <td style="background: #bb4400"> </td> + <td style="background: #aa5500"> </td> + <td style="background: #996600"> </td> + <td style="background: #887700"> </td> + <td style="background: #778800"> </td> + <td style="background: #669900"> </td> + <td style="background: #55aa00"> </td> + <td style="background: #44bb00"> </td> + <td style="background: #33cc00"> </td> + <td style="background: #22dd00"> </td> + <td style="background: #11ee00"> </td> + <td style="background: #00ff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee1100"> </td> + <td style="background: #dd2200"> </td> + <td style="background: #cc3300"> </td> + <td style="background: #bb4400"> </td> + <td style="background: #aa5500"> </td> + <td style="background: #996600"> </td> + <td style="background: #887700"> </td> + <td style="background: #778800"> </td> + <td style="background: #669900"> </td> + <td style="background: #55aa00"> </td> + <td style="background: #44bb00"> </td> + <td style="background: #33cc00"> </td> + <td style="background: #22dd00"> </td> + <td style="background: #11ee00"> </td> + <td style="background: #00ff00"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee11"> </td> + <td style="background: #00dd22"> </td> + <td style="background: #00cc33"> </td> + <td style="background: #00bb44"> </td> + <td style="background: #00aa55"> </td> + <td style="background: #009966"> </td> + <td style="background: #008877"> </td> + <td style="background: #007788"> </td> + <td style="background: #006699"> </td> + <td style="background: #0055aa"> </td> + <td style="background: #0044bb"> </td> + <td style="background: #0033cc"> </td> + <td style="background: #0022dd"> </td> + <td style="background: #0011ee"> </td> + <td style="background: #0000ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee11"> </td> + <td style="background: #00dd22"> </td> + <td style="background: #00cc33"> </td> + <td style="background: #00bb44"> </td> + <td style="background: #00aa55"> </td> + <td style="background: #009966"> </td> + <td style="background: #008877"> </td> + <td style="background: #007788"> </td> + <td style="background: #006699"> </td> + <td style="background: #0055aa"> </td> + <td style="background: #0044bb"> </td> + <td style="background: #0033cc"> </td> + <td style="background: #0022dd"> </td> + <td style="background: #0011ee"> </td> + <td style="background: #0000ff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee11"> </td> + <td style="background: #00dd22"> </td> + <td style="background: #00cc33"> </td> + <td style="background: #00bb44"> </td> + <td style="background: #00aa55"> </td> + <td style="background: #009966"> </td> + <td style="background: #008877"> </td> + <td style="background: #007788"> </td> + <td style="background: #006699"> </td> + <td style="background: #0055aa"> </td> + <td style="background: #0044bb"> </td> + <td style="background: #0033cc"> </td> + <td style="background: #0022dd"> </td> + <td style="background: #0011ee"> </td> + <td style="background: #0000ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee11"> </td> + <td style="background: #00dd22"> </td> + <td style="background: #00cc33"> </td> + <td style="background: #00bb44"> </td> + <td style="background: #00aa55"> </td> + <td style="background: #009966"> </td> + <td style="background: #008877"> </td> + <td style="background: #007788"> </td> + <td style="background: #006699"> </td> + <td style="background: #0055aa"> </td> + <td style="background: #0044bb"> </td> + <td style="background: #0033cc"> </td> + <td style="background: #0022dd"> </td> + <td style="background: #0011ee"> </td> + <td style="background: #0000ff"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #1100ee"> </td> + <td style="background: #2200dd"> </td> + <td style="background: #3300cc"> </td> + <td style="background: #4400bb"> </td> + <td style="background: #5500aa"> </td> + <td style="background: #660099"> </td> + <td style="background: #770088"> </td> + <td style="background: #880077"> </td> + <td style="background: #990066"> </td> + <td style="background: #aa0055"> </td> + <td style="background: #bb0044"> </td> + <td style="background: #cc0033"> </td> + <td style="background: #dd0022"> </td> + <td style="background: #ee0011"> </td> + <td style="background: #ff0000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #1100ee"> </td> + <td style="background: #2200dd"> </td> + <td style="background: #3300cc"> </td> + <td style="background: #4400bb"> </td> + <td style="background: #5500aa"> </td> + <td style="background: #660099"> </td> + <td style="background: #770088"> </td> + <td style="background: #880077"> </td> + <td style="background: #990066"> </td> + <td style="background: #aa0055"> </td> + <td style="background: #bb0044"> </td> + <td style="background: #cc0033"> </td> + <td style="background: #dd0022"> </td> + <td style="background: #ee0011"> </td> + <td style="background: #ff0000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #1100ee"> </td> + <td style="background: #2200dd"> </td> + <td style="background: #3300cc"> </td> + <td style="background: #4400bb"> </td> + <td style="background: #5500aa"> </td> + <td style="background: #660099"> </td> + <td style="background: #770088"> </td> + <td style="background: #880077"> </td> + <td style="background: #990066"> </td> + <td style="background: #aa0055"> </td> + <td style="background: #bb0044"> </td> + <td style="background: #cc0033"> </td> + <td style="background: #dd0022"> </td> + <td style="background: #ee0011"> </td> + <td style="background: #ff0000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #1100ee"> </td> + <td style="background: #2200dd"> </td> + <td style="background: #3300cc"> </td> + <td style="background: #4400bb"> </td> + <td style="background: #5500aa"> </td> + <td style="background: #660099"> </td> + <td style="background: #770088"> </td> + <td style="background: #880077"> </td> + <td style="background: #990066"> </td> + <td style="background: #aa0055"> </td> + <td style="background: #bb0044"> </td> + <td style="background: #cc0033"> </td> + <td style="background: #dd0022"> </td> + <td style="background: #ee0011"> </td> + <td style="background: #ff0000"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from fuchsia at the left to aqua at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee11ff"> </td> + <td style="background: #dd22ff"> </td> + <td style="background: #cc33ff"> </td> + <td style="background: #bb44ff"> </td> + <td style="background: #aa55ff"> </td> + <td style="background: #9966ff"> </td> + <td style="background: #8877ff"> </td> + <td style="background: #7788ff"> </td> + <td style="background: #6699ff"> </td> + <td style="background: #55aaff"> </td> + <td style="background: #44bbff"> </td> + <td style="background: #33ccff"> </td> + <td style="background: #22ddff"> </td> + <td style="background: #11eeff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee11ff"> </td> + <td style="background: #dd22ff"> </td> + <td style="background: #cc33ff"> </td> + <td style="background: #bb44ff"> </td> + <td style="background: #aa55ff"> </td> + <td style="background: #9966ff"> </td> + <td style="background: #8877ff"> </td> + <td style="background: #7788ff"> </td> + <td style="background: #6699ff"> </td> + <td style="background: #55aaff"> </td> + <td style="background: #44bbff"> </td> + <td style="background: #33ccff"> </td> + <td style="background: #22ddff"> </td> + <td style="background: #11eeff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee11ff"> </td> + <td style="background: #dd22ff"> </td> + <td style="background: #cc33ff"> </td> + <td style="background: #bb44ff"> </td> + <td style="background: #aa55ff"> </td> + <td style="background: #9966ff"> </td> + <td style="background: #8877ff"> </td> + <td style="background: #7788ff"> </td> + <td style="background: #6699ff"> </td> + <td style="background: #55aaff"> </td> + <td style="background: #44bbff"> </td> + <td style="background: #33ccff"> </td> + <td style="background: #22ddff"> </td> + <td style="background: #11eeff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee11ff"> </td> + <td style="background: #dd22ff"> </td> + <td style="background: #cc33ff"> </td> + <td style="background: #bb44ff"> </td> + <td style="background: #aa55ff"> </td> + <td style="background: #9966ff"> </td> + <td style="background: #8877ff"> </td> + <td style="background: #7788ff"> </td> + <td style="background: #6699ff"> </td> + <td style="background: #55aaff"> </td> + <td style="background: #44bbff"> </td> + <td style="background: #33ccff"> </td> + <td style="background: #22ddff"> </td> + <td style="background: #11eeff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from yellow at the left to fuchsia at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #ffee11"> </td> + <td style="background: #ffdd22"> </td> + <td style="background: #ffcc33"> </td> + <td style="background: #ffbb44"> </td> + <td style="background: #ffaa55"> </td> + <td style="background: #ff9966"> </td> + <td style="background: #ff8877"> </td> + <td style="background: #ff7788"> </td> + <td style="background: #ff6699"> </td> + <td style="background: #ff55aa"> </td> + <td style="background: #ff44bb"> </td> + <td style="background: #ff33cc"> </td> + <td style="background: #ff22dd"> </td> + <td style="background: #ff11ee"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #ffee11"> </td> + <td style="background: #ffdd22"> </td> + <td style="background: #ffcc33"> </td> + <td style="background: #ffbb44"> </td> + <td style="background: #ffaa55"> </td> + <td style="background: #ff9966"> </td> + <td style="background: #ff8877"> </td> + <td style="background: #ff7788"> </td> + <td style="background: #ff6699"> </td> + <td style="background: #ff55aa"> </td> + <td style="background: #ff44bb"> </td> + <td style="background: #ff33cc"> </td> + <td style="background: #ff22dd"> </td> + <td style="background: #ff11ee"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #ffee11"> </td> + <td style="background: #ffdd22"> </td> + <td style="background: #ffcc33"> </td> + <td style="background: #ffbb44"> </td> + <td style="background: #ffaa55"> </td> + <td style="background: #ff9966"> </td> + <td style="background: #ff8877"> </td> + <td style="background: #ff7788"> </td> + <td style="background: #ff6699"> </td> + <td style="background: #ff55aa"> </td> + <td style="background: #ff44bb"> </td> + <td style="background: #ff33cc"> </td> + <td style="background: #ff22dd"> </td> + <td style="background: #ff11ee"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #ffee11"> </td> + <td style="background: #ffdd22"> </td> + <td style="background: #ffcc33"> </td> + <td style="background: #ffbb44"> </td> + <td style="background: #ffaa55"> </td> + <td style="background: #ff9966"> </td> + <td style="background: #ff8877"> </td> + <td style="background: #ff7788"> </td> + <td style="background: #ff6699"> </td> + <td style="background: #ff55aa"> </td> + <td style="background: #ff44bb"> </td> + <td style="background: #ff33cc"> </td> + <td style="background: #ff22dd"> </td> + <td style="background: #ff11ee"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from aqua at the left to yellow at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #11ffee"> </td> + <td style="background: #22ffdd"> </td> + <td style="background: #33ffcc"> </td> + <td style="background: #44ffbb"> </td> + <td style="background: #55ffaa"> </td> + <td style="background: #66ff99"> </td> + <td style="background: #77ff88"> </td> + <td style="background: #88ff77"> </td> + <td style="background: #99ff66"> </td> + <td style="background: #aaff55"> </td> + <td style="background: #bbff44"> </td> + <td style="background: #ccff33"> </td> + <td style="background: #ddff22"> </td> + <td style="background: #eeff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #11ffee"> </td> + <td style="background: #22ffdd"> </td> + <td style="background: #33ffcc"> </td> + <td style="background: #44ffbb"> </td> + <td style="background: #55ffaa"> </td> + <td style="background: #66ff99"> </td> + <td style="background: #77ff88"> </td> + <td style="background: #88ff77"> </td> + <td style="background: #99ff66"> </td> + <td style="background: #aaff55"> </td> + <td style="background: #bbff44"> </td> + <td style="background: #ccff33"> </td> + <td style="background: #ddff22"> </td> + <td style="background: #eeff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #11ffee"> </td> + <td style="background: #22ffdd"> </td> + <td style="background: #33ffcc"> </td> + <td style="background: #44ffbb"> </td> + <td style="background: #55ffaa"> </td> + <td style="background: #66ff99"> </td> + <td style="background: #77ff88"> </td> + <td style="background: #88ff77"> </td> + <td style="background: #99ff66"> </td> + <td style="background: #aaff55"> </td> + <td style="background: #bbff44"> </td> + <td style="background: #ccff33"> </td> + <td style="background: #ddff22"> </td> + <td style="background: #eeff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #11ffee"> </td> + <td style="background: #22ffdd"> </td> + <td style="background: #33ffcc"> </td> + <td style="background: #44ffbb"> </td> + <td style="background: #55ffaa"> </td> + <td style="background: #66ff99"> </td> + <td style="background: #77ff88"> </td> + <td style="background: #88ff77"> </td> + <td style="background: #99ff66"> </td> + <td style="background: #aaff55"> </td> + <td style="background: #bbff44"> </td> + <td style="background: #ccff33"> </td> + <td style="background: #ddff22"> </td> + <td style="background: #eeff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t421-rgb-values-meaning-b.xht b/testing/web-platform/tests/css/css-color/t421-rgb-values-meaning-b.xht new file mode 100644 index 0000000000..9d12b1b2e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t421-rgb-values-meaning-b.xht @@ -0,0 +1,1549 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgb values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t421-rgb-values-meaning-b-ref.html" /> + <meta name="assert" content="Test that the color components in rgb colors are interpreted correctly." /> + <style type="text/css"><![CDATA[ + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + ]]></style> + </head> + <body> + + <p>The following table should have four matching rows gradually changing from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee0000"> </td> + <td style="background: #dd0000"> </td> + <td style="background: #cc0000"> </td> + <td style="background: #bb0000"> </td> + <td style="background: #aa0000"> </td> + <td style="background: #990000"> </td> + <td style="background: #880000"> </td> + <td style="background: #770000"> </td> + <td style="background: #660000"> </td> + <td style="background: #550000"> </td> + <td style="background: #440000"> </td> + <td style="background: #330000"> </td> + <td style="background: #220000"> </td> + <td style="background: #110000"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #f00"> </td> + <td style="background: #e00"> </td> + <td style="background: #d00"> </td> + <td style="background: #c00"> </td> + <td style="background: #b00"> </td> + <td style="background: #a00"> </td> + <td style="background: #900"> </td> + <td style="background: #800"> </td> + <td style="background: #700"> </td> + <td style="background: #600"> </td> + <td style="background: #500"> </td> + <td style="background: #400"> </td> + <td style="background: #300"> </td> + <td style="background: #200"> </td> + <td style="background: #100"> </td> + <td style="background: #000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(238, 0, 0)"> </td> + <td style="background: rgb(221, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(187, 0, 0)"> </td> + <td style="background: rgb(170, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(136, 0, 0)"> </td> + <td style="background: rgb(119, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(85, 0, 0)"> </td> + <td style="background: rgb(68, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(34, 0, 0)"> </td> + <td style="background: rgb(17, 0, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(93.3%, 0%, 0%)"> </td> + <td style="background: rgb(86.7%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 0%, 0%)"> </td> + <td style="background: rgb(73.3%, 0%, 0%)"> </td> + <td style="background: rgb(66.7%, 0%, 0%)"> </td> + <td style="background: rgb(60%, 0%, 0%)"> </td> + <td style="background: rgb(53.3%, 0%, 0%)"> </td> + <td style="background: rgb(46.7%, 0%, 0%)"> </td> + <td style="background: rgb(40%, 0%, 0%)"> </td> + <td style="background: rgb(33.3%, 0%, 0%)"> </td> + <td style="background: rgb(26.7%, 0%, 0%)"> </td> + <td style="background: rgb(20%, 0%, 0%)"> </td> + <td style="background: rgb(13.3%, 0%, 0%)"> </td> + <td style="background: rgb(6.7%, 0%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeee"> </td> + <td style="background: #ffdddd"> </td> + <td style="background: #ffcccc"> </td> + <td style="background: #ffbbbb"> </td> + <td style="background: #ffaaaa"> </td> + <td style="background: #ff9999"> </td> + <td style="background: #ff8888"> </td> + <td style="background: #ff7777"> </td> + <td style="background: #ff6666"> </td> + <td style="background: #ff5555"> </td> + <td style="background: #ff4444"> </td> + <td style="background: #ff3333"> </td> + <td style="background: #ff2222"> </td> + <td style="background: #ff1111"> </td> + <td style="background: #ff0000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #fff"> </td> + <td style="background: #fee"> </td> + <td style="background: #fdd"> </td> + <td style="background: #fcc"> </td> + <td style="background: #fbb"> </td> + <td style="background: #faa"> </td> + <td style="background: #f99"> </td> + <td style="background: #f88"> </td> + <td style="background: #f77"> </td> + <td style="background: #f66"> </td> + <td style="background: #f55"> </td> + <td style="background: #f44"> </td> + <td style="background: #f33"> </td> + <td style="background: #f22"> </td> + <td style="background: #f11"> </td> + <td style="background: #f00"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: rgb(255, 238, 238)"> </td> + <td style="background: rgb(255, 221, 221)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 187, 187)"> </td> + <td style="background: rgb(255, 170, 170)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 136, 136)"> </td> + <td style="background: rgb(255, 119, 119)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 85, 85)"> </td> + <td style="background: rgb(255, 68, 68)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 34, 34)"> </td> + <td style="background: rgb(255, 17, 17)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 93.3%, 93.3%)"> </td> + <td style="background: rgb(100%, 86.7%, 86.7%)"> </td> + <td style="background: rgb(100%, 80%, 80%)"> </td> + <td style="background: rgb(100%, 73.3%, 73.3%)"> </td> + <td style="background: rgb(100%, 66.7%, 66.7%)"> </td> + <td style="background: rgb(100%, 60%, 60%)"> </td> + <td style="background: rgb(100%, 53.3%, 53.3%)"> </td> + <td style="background: rgb(100%, 46.7%, 46.7%)"> </td> + <td style="background: rgb(100%, 40%, 40%)"> </td> + <td style="background: rgb(100%, 33.3%, 33.3%)"> </td> + <td style="background: rgb(100%, 26.7%, 26.7%)"> </td> + <td style="background: rgb(100%, 20%, 20%)"> </td> + <td style="background: rgb(100%, 13.3%, 13.3%)"> </td> + <td style="background: rgb(100%, 6.7%, 6.7%)"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee00"> </td> + <td style="background: #00dd00"> </td> + <td style="background: #00cc00"> </td> + <td style="background: #00bb00"> </td> + <td style="background: #00aa00"> </td> + <td style="background: #009900"> </td> + <td style="background: #008800"> </td> + <td style="background: #007700"> </td> + <td style="background: #006600"> </td> + <td style="background: #005500"> </td> + <td style="background: #004400"> </td> + <td style="background: #003300"> </td> + <td style="background: #002200"> </td> + <td style="background: #001100"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0f0"> </td> + <td style="background: #0e0"> </td> + <td style="background: #0d0"> </td> + <td style="background: #0c0"> </td> + <td style="background: #0b0"> </td> + <td style="background: #0a0"> </td> + <td style="background: #090"> </td> + <td style="background: #080"> </td> + <td style="background: #070"> </td> + <td style="background: #060"> </td> + <td style="background: #050"> </td> + <td style="background: #040"> </td> + <td style="background: #030"> </td> + <td style="background: #020"> </td> + <td style="background: #010"> </td> + <td style="background: #000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 238, 0)"> </td> + <td style="background: rgb(0, 221, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 187, 0)"> </td> + <td style="background: rgb(0, 170, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 136, 0)"> </td> + <td style="background: rgb(0, 119, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 85, 0)"> </td> + <td style="background: rgb(0, 68, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 34, 0)"> </td> + <td style="background: rgb(0, 17, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 93.3%, 0%)"> </td> + <td style="background: rgb(0%, 86.7%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 73.3%, 0%)"> </td> + <td style="background: rgb(0%, 66.7%, 0%)"> </td> + <td style="background: rgb(0%, 60%, 0%)"> </td> + <td style="background: rgb(0%, 53.3%, 0%)"> </td> + <td style="background: rgb(0%, 46.7%, 0%)"> </td> + <td style="background: rgb(0%, 40%, 0%)"> </td> + <td style="background: rgb(0%, 33.3%, 0%)"> </td> + <td style="background: rgb(0%, 26.7%, 0%)"> </td> + <td style="background: rgb(0%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 13.3%, 0%)"> </td> + <td style="background: rgb(0%, 6.7%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffee"> </td> + <td style="background: #ddffdd"> </td> + <td style="background: #ccffcc"> </td> + <td style="background: #bbffbb"> </td> + <td style="background: #aaffaa"> </td> + <td style="background: #99ff99"> </td> + <td style="background: #88ff88"> </td> + <td style="background: #77ff77"> </td> + <td style="background: #66ff66"> </td> + <td style="background: #55ff55"> </td> + <td style="background: #44ff44"> </td> + <td style="background: #33ff33"> </td> + <td style="background: #22ff22"> </td> + <td style="background: #11ff11"> </td> + <td style="background: #00ff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #fff"> </td> + <td style="background: #efe"> </td> + <td style="background: #dfd"> </td> + <td style="background: #cfc"> </td> + <td style="background: #bfb"> </td> + <td style="background: #afa"> </td> + <td style="background: #9f9"> </td> + <td style="background: #8f8"> </td> + <td style="background: #7f7"> </td> + <td style="background: #6f6"> </td> + <td style="background: #5f5"> </td> + <td style="background: #4f4"> </td> + <td style="background: #3f3"> </td> + <td style="background: #2f2"> </td> + <td style="background: #1f1"> </td> + <td style="background: #0f0"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: rgb(238, 255, 238)"> </td> + <td style="background: rgb(221, 255, 221)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(187, 255, 187)"> </td> + <td style="background: rgb(170, 255, 170)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(136, 255, 136)"> </td> + <td style="background: rgb(119, 255, 119)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(85, 255, 85)"> </td> + <td style="background: rgb(68, 255, 68)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(34, 255, 34)"> </td> + <td style="background: rgb(17, 255, 17)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: rgb(93.3%, 100%, 93.3%)"> </td> + <td style="background: rgb(86.7%, 100%, 86.7%)"> </td> + <td style="background: rgb(80%, 100%, 80%)"> </td> + <td style="background: rgb(73.3%, 100%, 73.3%)"> </td> + <td style="background: rgb(66.7%, 100%, 66.7%)"> </td> + <td style="background: rgb(60%, 100%, 60%)"> </td> + <td style="background: rgb(53.3%, 100%, 53.3%)"> </td> + <td style="background: rgb(46.7%, 100%, 46.7%)"> </td> + <td style="background: rgb(40%, 100%, 40%)"> </td> + <td style="background: rgb(33.3%, 100%, 33.3%)"> </td> + <td style="background: rgb(26.7%, 100%, 26.7%)"> </td> + <td style="background: rgb(20%, 100%, 20%)"> </td> + <td style="background: rgb(13.3%, 100%, 13.3%)"> </td> + <td style="background: rgb(6.7%, 100%, 6.7%)"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #0000ee"> </td> + <td style="background: #0000dd"> </td> + <td style="background: #0000cc"> </td> + <td style="background: #0000bb"> </td> + <td style="background: #0000aa"> </td> + <td style="background: #000099"> </td> + <td style="background: #000088"> </td> + <td style="background: #000077"> </td> + <td style="background: #000066"> </td> + <td style="background: #000055"> </td> + <td style="background: #000044"> </td> + <td style="background: #000033"> </td> + <td style="background: #000022"> </td> + <td style="background: #000011"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00f"> </td> + <td style="background: #00e"> </td> + <td style="background: #00d"> </td> + <td style="background: #00c"> </td> + <td style="background: #00b"> </td> + <td style="background: #00a"> </td> + <td style="background: #009"> </td> + <td style="background: #008"> </td> + <td style="background: #007"> </td> + <td style="background: #006"> </td> + <td style="background: #005"> </td> + <td style="background: #004"> </td> + <td style="background: #003"> </td> + <td style="background: #002"> </td> + <td style="background: #001"> </td> + <td style="background: #000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(0, 0, 238)"> </td> + <td style="background: rgb(0, 0, 221)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 187)"> </td> + <td style="background: rgb(0, 0, 170)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 136)"> </td> + <td style="background: rgb(0, 0, 119)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 85)"> </td> + <td style="background: rgb(0, 0, 68)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 34)"> </td> + <td style="background: rgb(0, 0, 17)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(0%, 0%, 93.3%)"> </td> + <td style="background: rgb(0%, 0%, 86.7%)"> </td> + <td style="background: rgb(0%, 0%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 73.3%)"> </td> + <td style="background: rgb(0%, 0%, 66.7%)"> </td> + <td style="background: rgb(0%, 0%, 60%)"> </td> + <td style="background: rgb(0%, 0%, 53.3%)"> </td> + <td style="background: rgb(0%, 0%, 46.7%)"> </td> + <td style="background: rgb(0%, 0%, 40%)"> </td> + <td style="background: rgb(0%, 0%, 33.3%)"> </td> + <td style="background: rgb(0%, 0%, 26.7%)"> </td> + <td style="background: rgb(0%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 13.3%)"> </td> + <td style="background: rgb(0%, 0%, 6.7%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeeeff"> </td> + <td style="background: #ddddff"> </td> + <td style="background: #ccccff"> </td> + <td style="background: #bbbbff"> </td> + <td style="background: #aaaaff"> </td> + <td style="background: #9999ff"> </td> + <td style="background: #8888ff"> </td> + <td style="background: #7777ff"> </td> + <td style="background: #6666ff"> </td> + <td style="background: #5555ff"> </td> + <td style="background: #4444ff"> </td> + <td style="background: #3333ff"> </td> + <td style="background: #2222ff"> </td> + <td style="background: #1111ff"> </td> + <td style="background: #0000ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #fff"> </td> + <td style="background: #eef"> </td> + <td style="background: #ddf"> </td> + <td style="background: #ccf"> </td> + <td style="background: #bbf"> </td> + <td style="background: #aaf"> </td> + <td style="background: #99f"> </td> + <td style="background: #88f"> </td> + <td style="background: #77f"> </td> + <td style="background: #66f"> </td> + <td style="background: #55f"> </td> + <td style="background: #44f"> </td> + <td style="background: #33f"> </td> + <td style="background: #22f"> </td> + <td style="background: #11f"> </td> + <td style="background: #00f"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: rgb(238, 238, 255)"> </td> + <td style="background: rgb(221, 221, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(187, 187, 255)"> </td> + <td style="background: rgb(170, 170, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(136, 136, 255)"> </td> + <td style="background: rgb(119, 119, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(85, 85, 255)"> </td> + <td style="background: rgb(68, 68, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(34, 34, 255)"> </td> + <td style="background: rgb(17, 17, 255)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: rgb(93.3%, 93.3%, 100%)"> </td> + <td style="background: rgb(86.7%, 86.7%, 100%)"> </td> + <td style="background: rgb(80%, 80%, 100%)"> </td> + <td style="background: rgb(73.3%, 73.3%, 100%)"> </td> + <td style="background: rgb(66.7%, 66.7%, 100%)"> </td> + <td style="background: rgb(60%, 60%, 100%)"> </td> + <td style="background: rgb(53.3%, 53.3%, 100%)"> </td> + <td style="background: rgb(46.7%, 46.7%, 100%)"> </td> + <td style="background: rgb(40%, 40%, 100%)"> </td> + <td style="background: rgb(33.3%, 33.3%, 100%)"> </td> + <td style="background: rgb(26.7%, 26.7%, 100%)"> </td> + <td style="background: rgb(20%, 20%, 100%)"> </td> + <td style="background: rgb(13.3%, 13.3%, 100%)"> </td> + <td style="background: rgb(6.7%, 6.7%, 100%)"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #eeee00"> </td> + <td style="background: #dddd00"> </td> + <td style="background: #cccc00"> </td> + <td style="background: #bbbb00"> </td> + <td style="background: #aaaa00"> </td> + <td style="background: #999900"> </td> + <td style="background: #888800"> </td> + <td style="background: #777700"> </td> + <td style="background: #666600"> </td> + <td style="background: #555500"> </td> + <td style="background: #444400"> </td> + <td style="background: #333300"> </td> + <td style="background: #222200"> </td> + <td style="background: #111100"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff0"> </td> + <td style="background: #ee0"> </td> + <td style="background: #dd0"> </td> + <td style="background: #cc0"> </td> + <td style="background: #bb0"> </td> + <td style="background: #aa0"> </td> + <td style="background: #990"> </td> + <td style="background: #880"> </td> + <td style="background: #770"> </td> + <td style="background: #660"> </td> + <td style="background: #550"> </td> + <td style="background: #440"> </td> + <td style="background: #330"> </td> + <td style="background: #220"> </td> + <td style="background: #110"> </td> + <td style="background: #000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(238, 238, 0)"> </td> + <td style="background: rgb(221, 221, 0)"> </td> + <td style="background: rgb(204, 204, 0)"> </td> + <td style="background: rgb(187, 187, 0)"> </td> + <td style="background: rgb(170, 170, 0)"> </td> + <td style="background: rgb(153, 153, 0)"> </td> + <td style="background: rgb(136, 136, 0)"> </td> + <td style="background: rgb(119, 119, 0)"> </td> + <td style="background: rgb(102, 102, 0)"> </td> + <td style="background: rgb(85, 85, 0)"> </td> + <td style="background: rgb(68, 68, 0)"> </td> + <td style="background: rgb(51, 51, 0)"> </td> + <td style="background: rgb(34, 34, 0)"> </td> + <td style="background: rgb(17, 17, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(93.3%, 93.3%, 0%)"> </td> + <td style="background: rgb(86.7%, 86.7%, 0%)"> </td> + <td style="background: rgb(80%, 80%, 0%)"> </td> + <td style="background: rgb(73.3%, 73.3%, 0%)"> </td> + <td style="background: rgb(66.7%, 66.7%, 0%)"> </td> + <td style="background: rgb(60%, 60%, 0%)"> </td> + <td style="background: rgb(53.3%, 53.3%, 0%)"> </td> + <td style="background: rgb(46.7%, 46.7%, 0%)"> </td> + <td style="background: rgb(40%, 40%, 0%)"> </td> + <td style="background: rgb(33.3%, 33.3%, 0%)"> </td> + <td style="background: rgb(26.7%, 26.7%, 0%)"> </td> + <td style="background: rgb(20%, 20%, 0%)"> </td> + <td style="background: rgb(13.3%, 13.3%, 0%)"> </td> + <td style="background: rgb(6.7%, 6.7%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to yellow at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffffee"> </td> + <td style="background: #ffffdd"> </td> + <td style="background: #ffffcc"> </td> + <td style="background: #ffffbb"> </td> + <td style="background: #ffffaa"> </td> + <td style="background: #ffff99"> </td> + <td style="background: #ffff88"> </td> + <td style="background: #ffff77"> </td> + <td style="background: #ffff66"> </td> + <td style="background: #ffff55"> </td> + <td style="background: #ffff44"> </td> + <td style="background: #ffff33"> </td> + <td style="background: #ffff22"> </td> + <td style="background: #ffff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #fff"> </td> + <td style="background: #ffe"> </td> + <td style="background: #ffd"> </td> + <td style="background: #ffc"> </td> + <td style="background: #ffb"> </td> + <td style="background: #ffa"> </td> + <td style="background: #ff9"> </td> + <td style="background: #ff8"> </td> + <td style="background: #ff7"> </td> + <td style="background: #ff6"> </td> + <td style="background: #ff5"> </td> + <td style="background: #ff4"> </td> + <td style="background: #ff3"> </td> + <td style="background: #ff2"> </td> + <td style="background: #ff1"> </td> + <td style="background: #ff0"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: rgb(255, 255, 238)"> </td> + <td style="background: rgb(255, 255, 221)"> </td> + <td style="background: rgb(255, 255, 204)"> </td> + <td style="background: rgb(255, 255, 187)"> </td> + <td style="background: rgb(255, 255, 170)"> </td> + <td style="background: rgb(255, 255, 153)"> </td> + <td style="background: rgb(255, 255, 136)"> </td> + <td style="background: rgb(255, 255, 119)"> </td> + <td style="background: rgb(255, 255, 102)"> </td> + <td style="background: rgb(255, 255, 85)"> </td> + <td style="background: rgb(255, 255, 68)"> </td> + <td style="background: rgb(255, 255, 51)"> </td> + <td style="background: rgb(255, 255, 34)"> </td> + <td style="background: rgb(255, 255, 17)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 93.3%)"> </td> + <td style="background: rgb(100%, 100%, 86.7%)"> </td> + <td style="background: rgb(100%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 73.3%)"> </td> + <td style="background: rgb(100%, 100%, 66.7%)"> </td> + <td style="background: rgb(100%, 100%, 60%)"> </td> + <td style="background: rgb(100%, 100%, 53.3%)"> </td> + <td style="background: rgb(100%, 100%, 46.7%)"> </td> + <td style="background: rgb(100%, 100%, 40%)"> </td> + <td style="background: rgb(100%, 100%, 33.3%)"> </td> + <td style="background: rgb(100%, 100%, 26.7%)"> </td> + <td style="background: rgb(100%, 100%, 20%)"> </td> + <td style="background: rgb(100%, 100%, 13.3%)"> </td> + <td style="background: rgb(100%, 100%, 6.7%)"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee00ee"> </td> + <td style="background: #dd00dd"> </td> + <td style="background: #cc00cc"> </td> + <td style="background: #bb00bb"> </td> + <td style="background: #aa00aa"> </td> + <td style="background: #990099"> </td> + <td style="background: #880088"> </td> + <td style="background: #770077"> </td> + <td style="background: #660066"> </td> + <td style="background: #550055"> </td> + <td style="background: #440044"> </td> + <td style="background: #330033"> </td> + <td style="background: #220022"> </td> + <td style="background: #110011"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #f0f"> </td> + <td style="background: #e0e"> </td> + <td style="background: #d0d"> </td> + <td style="background: #c0c"> </td> + <td style="background: #b0b"> </td> + <td style="background: #a0a"> </td> + <td style="background: #909"> </td> + <td style="background: #808"> </td> + <td style="background: #707"> </td> + <td style="background: #606"> </td> + <td style="background: #505"> </td> + <td style="background: #404"> </td> + <td style="background: #303"> </td> + <td style="background: #202"> </td> + <td style="background: #101"> </td> + <td style="background: #000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(238, 0, 238)"> </td> + <td style="background: rgb(221, 0, 221)"> </td> + <td style="background: rgb(204, 0, 204)"> </td> + <td style="background: rgb(187, 0, 187)"> </td> + <td style="background: rgb(170, 0, 170)"> </td> + <td style="background: rgb(153, 0, 153)"> </td> + <td style="background: rgb(136, 0, 136)"> </td> + <td style="background: rgb(119, 0, 119)"> </td> + <td style="background: rgb(102, 0, 102)"> </td> + <td style="background: rgb(85, 0, 85)"> </td> + <td style="background: rgb(68, 0, 68)"> </td> + <td style="background: rgb(51, 0, 51)"> </td> + <td style="background: rgb(34, 0, 34)"> </td> + <td style="background: rgb(17, 0, 17)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(93.3%, 0%, 93.3%)"> </td> + <td style="background: rgb(86.7%, 0%, 86.7%)"> </td> + <td style="background: rgb(80%, 0%, 80%)"> </td> + <td style="background: rgb(73.3%, 0%, 73.3%)"> </td> + <td style="background: rgb(66.7%, 0%, 66.7%)"> </td> + <td style="background: rgb(60%, 0%, 60%)"> </td> + <td style="background: rgb(53.3%, 0%, 53.3%)"> </td> + <td style="background: rgb(46.7%, 0%, 46.7%)"> </td> + <td style="background: rgb(40%, 0%, 40%)"> </td> + <td style="background: rgb(33.3%, 0%, 33.3%)"> </td> + <td style="background: rgb(26.7%, 0%, 26.7%)"> </td> + <td style="background: rgb(20%, 0%, 20%)"> </td> + <td style="background: rgb(13.3%, 0%, 13.3%)"> </td> + <td style="background: rgb(6.7%, 0%, 6.7%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to fuchsia at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #ffeeff"> </td> + <td style="background: #ffddff"> </td> + <td style="background: #ffccff"> </td> + <td style="background: #ffbbff"> </td> + <td style="background: #ffaaff"> </td> + <td style="background: #ff99ff"> </td> + <td style="background: #ff88ff"> </td> + <td style="background: #ff77ff"> </td> + <td style="background: #ff66ff"> </td> + <td style="background: #ff55ff"> </td> + <td style="background: #ff44ff"> </td> + <td style="background: #ff33ff"> </td> + <td style="background: #ff22ff"> </td> + <td style="background: #ff11ff"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #fff"> </td> + <td style="background: #fef"> </td> + <td style="background: #fdf"> </td> + <td style="background: #fcf"> </td> + <td style="background: #fbf"> </td> + <td style="background: #faf"> </td> + <td style="background: #f9f"> </td> + <td style="background: #f8f"> </td> + <td style="background: #f7f"> </td> + <td style="background: #f6f"> </td> + <td style="background: #f5f"> </td> + <td style="background: #f4f"> </td> + <td style="background: #f3f"> </td> + <td style="background: #f2f"> </td> + <td style="background: #f1f"> </td> + <td style="background: #f0f"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: rgb(255, 238, 255)"> </td> + <td style="background: rgb(255, 221, 255)"> </td> + <td style="background: rgb(255, 204, 255)"> </td> + <td style="background: rgb(255, 187, 255)"> </td> + <td style="background: rgb(255, 170, 255)"> </td> + <td style="background: rgb(255, 153, 255)"> </td> + <td style="background: rgb(255, 136, 255)"> </td> + <td style="background: rgb(255, 119, 255)"> </td> + <td style="background: rgb(255, 102, 255)"> </td> + <td style="background: rgb(255, 85, 255)"> </td> + <td style="background: rgb(255, 68, 255)"> </td> + <td style="background: rgb(255, 51, 255)"> </td> + <td style="background: rgb(255, 34, 255)"> </td> + <td style="background: rgb(255, 17, 255)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 93.3%, 100%)"> </td> + <td style="background: rgb(100%, 86.7%, 100%)"> </td> + <td style="background: rgb(100%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 73.3%, 100%)"> </td> + <td style="background: rgb(100%, 66.7%, 100%)"> </td> + <td style="background: rgb(100%, 60%, 100%)"> </td> + <td style="background: rgb(100%, 53.3%, 100%)"> </td> + <td style="background: rgb(100%, 46.7%, 100%)"> </td> + <td style="background: rgb(100%, 40%, 100%)"> </td> + <td style="background: rgb(100%, 33.3%, 100%)"> </td> + <td style="background: rgb(100%, 26.7%, 100%)"> </td> + <td style="background: rgb(100%, 20%, 100%)"> </td> + <td style="background: rgb(100%, 13.3%, 100%)"> </td> + <td style="background: rgb(100%, 6.7%, 100%)"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #00eeee"> </td> + <td style="background: #00dddd"> </td> + <td style="background: #00cccc"> </td> + <td style="background: #00bbbb"> </td> + <td style="background: #00aaaa"> </td> + <td style="background: #009999"> </td> + <td style="background: #008888"> </td> + <td style="background: #007777"> </td> + <td style="background: #006666"> </td> + <td style="background: #005555"> </td> + <td style="background: #004444"> </td> + <td style="background: #003333"> </td> + <td style="background: #002222"> </td> + <td style="background: #001111"> </td> + <td style="background: #000000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0ff"> </td> + <td style="background: #0ee"> </td> + <td style="background: #0dd"> </td> + <td style="background: #0cc"> </td> + <td style="background: #0bb"> </td> + <td style="background: #0aa"> </td> + <td style="background: #099"> </td> + <td style="background: #088"> </td> + <td style="background: #077"> </td> + <td style="background: #066"> </td> + <td style="background: #055"> </td> + <td style="background: #044"> </td> + <td style="background: #033"> </td> + <td style="background: #022"> </td> + <td style="background: #011"> </td> + <td style="background: #000"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(0, 238, 238)"> </td> + <td style="background: rgb(0, 221, 221)"> </td> + <td style="background: rgb(0, 204, 204)"> </td> + <td style="background: rgb(0, 187, 187)"> </td> + <td style="background: rgb(0, 170, 170)"> </td> + <td style="background: rgb(0, 153, 153)"> </td> + <td style="background: rgb(0, 136, 136)"> </td> + <td style="background: rgb(0, 119, 119)"> </td> + <td style="background: rgb(0, 102, 102)"> </td> + <td style="background: rgb(0, 85, 85)"> </td> + <td style="background: rgb(0, 68, 68)"> </td> + <td style="background: rgb(0, 51, 51)"> </td> + <td style="background: rgb(0, 34, 34)"> </td> + <td style="background: rgb(0, 17, 17)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(0%, 93.3%, 93.3%)"> </td> + <td style="background: rgb(0%, 86.7%, 86.7%)"> </td> + <td style="background: rgb(0%, 80%, 80%)"> </td> + <td style="background: rgb(0%, 73.3%, 73.3%)"> </td> + <td style="background: rgb(0%, 66.7%, 66.7%)"> </td> + <td style="background: rgb(0%, 60%, 60%)"> </td> + <td style="background: rgb(0%, 53.3%, 53.3%)"> </td> + <td style="background: rgb(0%, 46.7%, 46.7%)"> </td> + <td style="background: rgb(0%, 40%, 40%)"> </td> + <td style="background: rgb(0%, 33.3%, 33.3%)"> </td> + <td style="background: rgb(0%, 26.7%, 26.7%)"> </td> + <td style="background: rgb(0%, 20%, 20%)"> </td> + <td style="background: rgb(0%, 13.3%, 13.3%)"> </td> + <td style="background: rgb(0%, 6.7%, 6.7%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from white at the left to aqua at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffffff"> </td> + <td style="background: #eeffff"> </td> + <td style="background: #ddffff"> </td> + <td style="background: #ccffff"> </td> + <td style="background: #bbffff"> </td> + <td style="background: #aaffff"> </td> + <td style="background: #99ffff"> </td> + <td style="background: #88ffff"> </td> + <td style="background: #77ffff"> </td> + <td style="background: #66ffff"> </td> + <td style="background: #55ffff"> </td> + <td style="background: #44ffff"> </td> + <td style="background: #33ffff"> </td> + <td style="background: #22ffff"> </td> + <td style="background: #11ffff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #fff"> </td> + <td style="background: #eff"> </td> + <td style="background: #dff"> </td> + <td style="background: #cff"> </td> + <td style="background: #bff"> </td> + <td style="background: #aff"> </td> + <td style="background: #9ff"> </td> + <td style="background: #8ff"> </td> + <td style="background: #7ff"> </td> + <td style="background: #6ff"> </td> + <td style="background: #5ff"> </td> + <td style="background: #4ff"> </td> + <td style="background: #3ff"> </td> + <td style="background: #2ff"> </td> + <td style="background: #1ff"> </td> + <td style="background: #0ff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: rgb(238, 255, 255)"> </td> + <td style="background: rgb(221, 255, 255)"> </td> + <td style="background: rgb(204, 255, 255)"> </td> + <td style="background: rgb(187, 255, 255)"> </td> + <td style="background: rgb(170, 255, 255)"> </td> + <td style="background: rgb(153, 255, 255)"> </td> + <td style="background: rgb(136, 255, 255)"> </td> + <td style="background: rgb(119, 255, 255)"> </td> + <td style="background: rgb(102, 255, 255)"> </td> + <td style="background: rgb(85, 255, 255)"> </td> + <td style="background: rgb(68, 255, 255)"> </td> + <td style="background: rgb(51, 255, 255)"> </td> + <td style="background: rgb(34, 255, 255)"> </td> + <td style="background: rgb(17, 255, 255)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: rgb(93.3%, 100%, 100%)"> </td> + <td style="background: rgb(86.7%, 100%, 100%)"> </td> + <td style="background: rgb(80%, 100%, 100%)"> </td> + <td style="background: rgb(73.3%, 100%, 100%)"> </td> + <td style="background: rgb(66.7%, 100%, 100%)"> </td> + <td style="background: rgb(60%, 100%, 100%)"> </td> + <td style="background: rgb(53.3%, 100%, 100%)"> </td> + <td style="background: rgb(46.7%, 100%, 100%)"> </td> + <td style="background: rgb(40%, 100%, 100%)"> </td> + <td style="background: rgb(33.3%, 100%, 100%)"> </td> + <td style="background: rgb(26.7%, 100%, 100%)"> </td> + <td style="background: rgb(20%, 100%, 100%)"> </td> + <td style="background: rgb(13.3%, 100%, 100%)"> </td> + <td style="background: rgb(6.7%, 100%, 100%)"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff0000"> </td> + <td style="background: #ee1100"> </td> + <td style="background: #dd2200"> </td> + <td style="background: #cc3300"> </td> + <td style="background: #bb4400"> </td> + <td style="background: #aa5500"> </td> + <td style="background: #996600"> </td> + <td style="background: #887700"> </td> + <td style="background: #778800"> </td> + <td style="background: #669900"> </td> + <td style="background: #55aa00"> </td> + <td style="background: #44bb00"> </td> + <td style="background: #33cc00"> </td> + <td style="background: #22dd00"> </td> + <td style="background: #11ee00"> </td> + <td style="background: #00ff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #f00"> </td> + <td style="background: #e10"> </td> + <td style="background: #d20"> </td> + <td style="background: #c30"> </td> + <td style="background: #b40"> </td> + <td style="background: #a50"> </td> + <td style="background: #960"> </td> + <td style="background: #870"> </td> + <td style="background: #780"> </td> + <td style="background: #690"> </td> + <td style="background: #5a0"> </td> + <td style="background: #4b0"> </td> + <td style="background: #3c0"> </td> + <td style="background: #2d0"> </td> + <td style="background: #1e0"> </td> + <td style="background: #0f0"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(238, 17, 0)"> </td> + <td style="background: rgb(221, 34, 0)"> </td> + <td style="background: rgb(204, 51, 0)"> </td> + <td style="background: rgb(187, 68, 0)"> </td> + <td style="background: rgb(170, 85, 0)"> </td> + <td style="background: rgb(153, 102, 0)"> </td> + <td style="background: rgb(136, 119, 0)"> </td> + <td style="background: rgb(119, 136, 0)"> </td> + <td style="background: rgb(102, 153, 0)"> </td> + <td style="background: rgb(85, 170, 0)"> </td> + <td style="background: rgb(68, 187, 0)"> </td> + <td style="background: rgb(51, 204, 0)"> </td> + <td style="background: rgb(34, 221, 0)"> </td> + <td style="background: rgb(17, 238, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(93.3%, 6.7%, 0%)"> </td> + <td style="background: rgb(86.7%, 13.3%, 0%)"> </td> + <td style="background: rgb(80%, 20%, 0%)"> </td> + <td style="background: rgb(73.3%, 26.7%, 0%)"> </td> + <td style="background: rgb(66.7%, 33.3%, 0%)"> </td> + <td style="background: rgb(60%, 40%, 0%)"> </td> + <td style="background: rgb(53.3%, 46.7%, 0%)"> </td> + <td style="background: rgb(46.7%, 53.3%, 0%)"> </td> + <td style="background: rgb(40%, 60%, 0%)"> </td> + <td style="background: rgb(33.3%, 66.7%, 0%)"> </td> + <td style="background: rgb(26.7%, 73.3%, 0%)"> </td> + <td style="background: rgb(20%, 80%, 0%)"> </td> + <td style="background: rgb(13.3%, 86.7%, 0%)"> </td> + <td style="background: rgb(6.7%, 93.3%, 0%)"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ff00"> </td> + <td style="background: #00ee11"> </td> + <td style="background: #00dd22"> </td> + <td style="background: #00cc33"> </td> + <td style="background: #00bb44"> </td> + <td style="background: #00aa55"> </td> + <td style="background: #009966"> </td> + <td style="background: #008877"> </td> + <td style="background: #007788"> </td> + <td style="background: #006699"> </td> + <td style="background: #0055aa"> </td> + <td style="background: #0044bb"> </td> + <td style="background: #0033cc"> </td> + <td style="background: #0022dd"> </td> + <td style="background: #0011ee"> </td> + <td style="background: #0000ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0f0"> </td> + <td style="background: #0e1"> </td> + <td style="background: #0d2"> </td> + <td style="background: #0c3"> </td> + <td style="background: #0b4"> </td> + <td style="background: #0a5"> </td> + <td style="background: #096"> </td> + <td style="background: #087"> </td> + <td style="background: #078"> </td> + <td style="background: #069"> </td> + <td style="background: #05a"> </td> + <td style="background: #04b"> </td> + <td style="background: #03c"> </td> + <td style="background: #02d"> </td> + <td style="background: #01e"> </td> + <td style="background: #00f"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 238, 17)"> </td> + <td style="background: rgb(0, 221, 34)"> </td> + <td style="background: rgb(0, 204, 51)"> </td> + <td style="background: rgb(0, 187, 68)"> </td> + <td style="background: rgb(0, 170, 85)"> </td> + <td style="background: rgb(0, 153, 102)"> </td> + <td style="background: rgb(0, 136, 119)"> </td> + <td style="background: rgb(0, 119, 136)"> </td> + <td style="background: rgb(0, 102, 153)"> </td> + <td style="background: rgb(0, 85, 170)"> </td> + <td style="background: rgb(0, 68, 187)"> </td> + <td style="background: rgb(0, 51, 204)"> </td> + <td style="background: rgb(0, 34, 221)"> </td> + <td style="background: rgb(0, 17, 238)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 93.3%, 6.7%)"> </td> + <td style="background: rgb(0%, 86.7%, 13.3%)"> </td> + <td style="background: rgb(0%, 80%, 20%)"> </td> + <td style="background: rgb(0%, 73.3%, 26.7%)"> </td> + <td style="background: rgb(0%, 66.7%, 33.3%)"> </td> + <td style="background: rgb(0%, 60%, 40%)"> </td> + <td style="background: rgb(0%, 53.3%, 46.7%)"> </td> + <td style="background: rgb(0%, 46.7%, 53.3%)"> </td> + <td style="background: rgb(0%, 40%, 60%)"> </td> + <td style="background: rgb(0%, 33.3%, 66.7%)"> </td> + <td style="background: rgb(0%, 26.7%, 73.3%)"> </td> + <td style="background: rgb(0%, 20%, 80%)"> </td> + <td style="background: rgb(0%, 13.3%, 86.7%)"> </td> + <td style="background: rgb(0%, 6.7%, 93.3%)"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #0000ff"> </td> + <td style="background: #1100ee"> </td> + <td style="background: #2200dd"> </td> + <td style="background: #3300cc"> </td> + <td style="background: #4400bb"> </td> + <td style="background: #5500aa"> </td> + <td style="background: #660099"> </td> + <td style="background: #770088"> </td> + <td style="background: #880077"> </td> + <td style="background: #990066"> </td> + <td style="background: #aa0055"> </td> + <td style="background: #bb0044"> </td> + <td style="background: #cc0033"> </td> + <td style="background: #dd0022"> </td> + <td style="background: #ee0011"> </td> + <td style="background: #ff0000"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #00f"> </td> + <td style="background: #10e"> </td> + <td style="background: #20d"> </td> + <td style="background: #30c"> </td> + <td style="background: #40b"> </td> + <td style="background: #50a"> </td> + <td style="background: #609"> </td> + <td style="background: #708"> </td> + <td style="background: #807"> </td> + <td style="background: #906"> </td> + <td style="background: #a05"> </td> + <td style="background: #b04"> </td> + <td style="background: #c03"> </td> + <td style="background: #d02"> </td> + <td style="background: #e01"> </td> + <td style="background: #f00"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(17, 0, 238)"> </td> + <td style="background: rgb(34, 0, 221)"> </td> + <td style="background: rgb(51, 0, 204)"> </td> + <td style="background: rgb(68, 0, 187)"> </td> + <td style="background: rgb(85, 0, 170)"> </td> + <td style="background: rgb(102, 0, 153)"> </td> + <td style="background: rgb(119, 0, 136)"> </td> + <td style="background: rgb(136, 0, 119)"> </td> + <td style="background: rgb(153, 0, 102)"> </td> + <td style="background: rgb(170, 0, 85)"> </td> + <td style="background: rgb(187, 0, 68)"> </td> + <td style="background: rgb(204, 0, 51)"> </td> + <td style="background: rgb(221, 0, 34)"> </td> + <td style="background: rgb(238, 0, 17)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(6.7%, 0%, 93.3%)"> </td> + <td style="background: rgb(13.3%, 0%, 86.7%)"> </td> + <td style="background: rgb(20%, 0%, 80%)"> </td> + <td style="background: rgb(26.7%, 0%, 73.3%)"> </td> + <td style="background: rgb(33.3%, 0%, 66.7%)"> </td> + <td style="background: rgb(40%, 0%, 60%)"> </td> + <td style="background: rgb(46.7%, 0%, 53.3%)"> </td> + <td style="background: rgb(53.3%, 0%, 46.7%)"> </td> + <td style="background: rgb(60%, 0%, 40%)"> </td> + <td style="background: rgb(66.7%, 0%, 33.3%)"> </td> + <td style="background: rgb(73.3%, 0%, 26.7%)"> </td> + <td style="background: rgb(80%, 0%, 20%)"> </td> + <td style="background: rgb(86.7%, 0%, 13.3%)"> </td> + <td style="background: rgb(93.3%, 0%, 6.7%)"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from fuchsia at the left to aqua at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: #ee11ff"> </td> + <td style="background: #dd22ff"> </td> + <td style="background: #cc33ff"> </td> + <td style="background: #bb44ff"> </td> + <td style="background: #aa55ff"> </td> + <td style="background: #9966ff"> </td> + <td style="background: #8877ff"> </td> + <td style="background: #7788ff"> </td> + <td style="background: #6699ff"> </td> + <td style="background: #55aaff"> </td> + <td style="background: #44bbff"> </td> + <td style="background: #33ccff"> </td> + <td style="background: #22ddff"> </td> + <td style="background: #11eeff"> </td> + <td style="background: #00ffff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #f0f"> </td> + <td style="background: #e1f"> </td> + <td style="background: #d2f"> </td> + <td style="background: #c3f"> </td> + <td style="background: #b4f"> </td> + <td style="background: #a5f"> </td> + <td style="background: #96f"> </td> + <td style="background: #87f"> </td> + <td style="background: #78f"> </td> + <td style="background: #69f"> </td> + <td style="background: #5af"> </td> + <td style="background: #4bf"> </td> + <td style="background: #3cf"> </td> + <td style="background: #2df"> </td> + <td style="background: #1ef"> </td> + <td style="background: #0ff"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(238, 17, 255)"> </td> + <td style="background: rgb(221, 34, 255)"> </td> + <td style="background: rgb(204, 51, 255)"> </td> + <td style="background: rgb(187, 68, 255)"> </td> + <td style="background: rgb(170, 85, 255)"> </td> + <td style="background: rgb(153, 102, 255)"> </td> + <td style="background: rgb(136, 119, 255)"> </td> + <td style="background: rgb(119, 136, 255)"> </td> + <td style="background: rgb(102, 153, 255)"> </td> + <td style="background: rgb(85, 170, 255)"> </td> + <td style="background: rgb(68, 187, 255)"> </td> + <td style="background: rgb(51, 204, 255)"> </td> + <td style="background: rgb(34, 221, 255)"> </td> + <td style="background: rgb(17, 238, 255)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(93.3%, 6.7%, 100%)"> </td> + <td style="background: rgb(86.7%, 13.3%, 100%)"> </td> + <td style="background: rgb(80%, 20%, 100%)"> </td> + <td style="background: rgb(73.3%, 26.7%, 100%)"> </td> + <td style="background: rgb(66.7%, 33.3%, 100%)"> </td> + <td style="background: rgb(60%, 40%, 100%)"> </td> + <td style="background: rgb(53.3%, 46.7%, 100%)"> </td> + <td style="background: rgb(46.7%, 53.3%, 100%)"> </td> + <td style="background: rgb(40%, 60%, 100%)"> </td> + <td style="background: rgb(33.3%, 66.7%, 100%)"> </td> + <td style="background: rgb(26.7%, 73.3%, 100%)"> </td> + <td style="background: rgb(20%, 80%, 100%)"> </td> + <td style="background: rgb(13.3%, 86.7%, 100%)"> </td> + <td style="background: rgb(6.7%, 93.3%, 100%)"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from yellow at the left to fuchsia at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #ffff00"> </td> + <td style="background: #ffee11"> </td> + <td style="background: #ffdd22"> </td> + <td style="background: #ffcc33"> </td> + <td style="background: #ffbb44"> </td> + <td style="background: #ffaa55"> </td> + <td style="background: #ff9966"> </td> + <td style="background: #ff8877"> </td> + <td style="background: #ff7788"> </td> + <td style="background: #ff6699"> </td> + <td style="background: #ff55aa"> </td> + <td style="background: #ff44bb"> </td> + <td style="background: #ff33cc"> </td> + <td style="background: #ff22dd"> </td> + <td style="background: #ff11ee"> </td> + <td style="background: #ff00ff"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #ff0"> </td> + <td style="background: #fe1"> </td> + <td style="background: #fd2"> </td> + <td style="background: #fc3"> </td> + <td style="background: #fb4"> </td> + <td style="background: #fa5"> </td> + <td style="background: #f96"> </td> + <td style="background: #f87"> </td> + <td style="background: #f78"> </td> + <td style="background: #f69"> </td> + <td style="background: #f5a"> </td> + <td style="background: #f4b"> </td> + <td style="background: #f3c"> </td> + <td style="background: #f2d"> </td> + <td style="background: #f1e"> </td> + <td style="background: #f0f"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(255, 238, 17)"> </td> + <td style="background: rgb(255, 221, 34)"> </td> + <td style="background: rgb(255, 204, 51)"> </td> + <td style="background: rgb(255, 187, 68)"> </td> + <td style="background: rgb(255, 170, 85)"> </td> + <td style="background: rgb(255, 153, 102)"> </td> + <td style="background: rgb(255, 136, 119)"> </td> + <td style="background: rgb(255, 119, 136)"> </td> + <td style="background: rgb(255, 102, 153)"> </td> + <td style="background: rgb(255, 85, 170)"> </td> + <td style="background: rgb(255, 68, 187)"> </td> + <td style="background: rgb(255, 51, 204)"> </td> + <td style="background: rgb(255, 34, 221)"> </td> + <td style="background: rgb(255, 17, 238)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(100%, 93.3%, 6.7%)"> </td> + <td style="background: rgb(100%, 86.7%, 13.3%)"> </td> + <td style="background: rgb(100%, 80%, 20%)"> </td> + <td style="background: rgb(100%, 73.3%, 26.7%)"> </td> + <td style="background: rgb(100%, 66.7%, 33.3%)"> </td> + <td style="background: rgb(100%, 60%, 40%)"> </td> + <td style="background: rgb(100%, 53.3%, 46.7%)"> </td> + <td style="background: rgb(100%, 46.7%, 53.3%)"> </td> + <td style="background: rgb(100%, 40%, 60%)"> </td> + <td style="background: rgb(100%, 33.3%, 66.7%)"> </td> + <td style="background: rgb(100%, 26.7%, 73.3%)"> </td> + <td style="background: rgb(100%, 20%, 80%)"> </td> + <td style="background: rgb(100%, 13.3%, 86.7%)"> </td> + <td style="background: rgb(100%, 6.7%, 93.3%)"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + <p>The following table should have four matching rows gradually changing from aqua at the left to yellow at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: #00ffff"> </td> + <td style="background: #11ffee"> </td> + <td style="background: #22ffdd"> </td> + <td style="background: #33ffcc"> </td> + <td style="background: #44ffbb"> </td> + <td style="background: #55ffaa"> </td> + <td style="background: #66ff99"> </td> + <td style="background: #77ff88"> </td> + <td style="background: #88ff77"> </td> + <td style="background: #99ff66"> </td> + <td style="background: #aaff55"> </td> + <td style="background: #bbff44"> </td> + <td style="background: #ccff33"> </td> + <td style="background: #ddff22"> </td> + <td style="background: #eeff11"> </td> + <td style="background: #ffff00"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: #0ff"> </td> + <td style="background: #1fe"> </td> + <td style="background: #2fd"> </td> + <td style="background: #3fc"> </td> + <td style="background: #4fb"> </td> + <td style="background: #5fa"> </td> + <td style="background: #6f9"> </td> + <td style="background: #7f8"> </td> + <td style="background: #8f7"> </td> + <td style="background: #9f6"> </td> + <td style="background: #af5"> </td> + <td style="background: #bf4"> </td> + <td style="background: #cf3"> </td> + <td style="background: #df2"> </td> + <td style="background: #ef1"> </td> + <td style="background: #ff0"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(17, 255, 238)"> </td> + <td style="background: rgb(34, 255, 221)"> </td> + <td style="background: rgb(51, 255, 204)"> </td> + <td style="background: rgb(68, 255, 187)"> </td> + <td style="background: rgb(85, 255, 170)"> </td> + <td style="background: rgb(102, 255, 153)"> </td> + <td style="background: rgb(119, 255, 136)"> </td> + <td style="background: rgb(136, 255, 119)"> </td> + <td style="background: rgb(153, 255, 102)"> </td> + <td style="background: rgb(170, 255, 85)"> </td> + <td style="background: rgb(187, 255, 68)"> </td> + <td style="background: rgb(204, 255, 51)"> </td> + <td style="background: rgb(221, 255, 34)"> </td> + <td style="background: rgb(238, 255, 17)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(6.7%, 100%, 93.3%)"> </td> + <td style="background: rgb(13.3%, 100%, 86.7%)"> </td> + <td style="background: rgb(20%, 100%, 80%)"> </td> + <td style="background: rgb(26.7%, 100%, 73.3%)"> </td> + <td style="background: rgb(33.3%, 100%, 66.7%)"> </td> + <td style="background: rgb(40%, 100%, 60%)"> </td> + <td style="background: rgb(46.7%, 100%, 53.3%)"> </td> + <td style="background: rgb(53.3%, 100%, 46.7%)"> </td> + <td style="background: rgb(60%, 100%, 40%)"> </td> + <td style="background: rgb(66.7%, 100%, 33.3%)"> </td> + <td style="background: rgb(73.3%, 100%, 26.7%)"> </td> + <td style="background: rgb(80%, 100%, 20%)"> </td> + <td style="background: rgb(86.7%, 100%, 13.3%)"> </td> + <td style="background: rgb(93.3%, 100%, 6.7%)"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-a0.0-a.xht b/testing/web-platform/tests/css/css-color/t422-rgba-a0.0-a.xht new file mode 100644 index 0000000000..3b7c934d15 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-a0.0-a.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t32-opacity-basic-0.0-a-ref.html" /> + <meta name="assert" content="Opacity of 0.0 makes text transparent." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + #one { color: rgb(0, 0, 0); } + #two { color: rgba(0, 0, 0, 0); } + ]]></style> + </head> + <body> + <p id="one">This should be the only text visible on this page.</p> + <p id="two">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-a0.6-a-ref.xht b/testing/web-platform/tests/css/css-color/t422-rgba-a0.6-a-ref.xht new file mode 100644 index 0000000000..ae46348506 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-a0.6-a-ref.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Chris Lilley" href="https://svgees.us" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <style type="text/css"><![CDATA[ + html, body { background: white; color: black; } + #one, #two { width: 12em; height: 12em; } + #one { background-color: rgb(102, 102, 102); margin-bottom: 0 } + ]]></style> + </head> + <body> + <p>The test passes if you see a gray square:</p> + <p id="one"></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-a0.6-a.xht b/testing/web-platform/tests/css/css-color/t422-rgba-a0.6-a.xht new file mode 100644 index 0000000000..a710a0b625 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-a0.6-a.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Chris Lilley" href="https://svgees.us" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgb-color" /> + <link rel="match" href="t422-rgba-a0.6-a-ref.xht" /> + <meta name="assert" content="Opacity of 0.6 makes background partially opaque. Colors are in sRGB color space (may test)." /> + <style type="text/css"><![CDATA[ + html, body { background: white; color: black; } + #one, #two { width: 12em; height: 6em; } + #one { background-color: rgb(102, 102, 102); margin-bottom: 0 } + #two { background-color: rgba(0, 0, 0, 0.6); margin-top:0 } + ]]></style> + </head> + <body> + <p>The test passes if you see a gray square:</p> + <p id="one"></p> + <p id="two"></p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-a1.0-a-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-a1.0-a-ref.html new file mode 100644 index 0000000000..6aa32ae7bb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-a1.0-a-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + html, body { background: white; } +</style> +<body> + <p>This text should be the same color (black) as the line below.</p> + <p>This text should be the same color (black) as the line above.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-a1.0-a.xht b/testing/web-platform/tests/css/css-color/t422-rgba-a1.0-a.xht new file mode 100644 index 0000000000..b974af96bf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-a1.0-a.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-a1.0-a-ref.html" /> + <meta name="assert" content="Opacity of 1.0 makes text fully opaque." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + p { color: white; } + #one { color: rgb(0, 0, 0); } + #two { color: rgba(0, 0, 0, 1.0); } + ]]></style> + </head> + <body> + <p id="one">This text should be the same color (black) as the line below.</p> + <p id="two">This text should be the same color (black) as the line above.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a0.0-b-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a0.0-b-ref.html new file mode 100644 index 0000000000..609cc75d55 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a0.0-b-ref.html @@ -0,0 +1,7 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<body> + <p>This should be the only text visible on this page.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a0.0-b.xht b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a0.0-b.xht new file mode 100644 index 0000000000..cd9810fe39 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a0.0-b.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-clamping-a0.0-b-ref.html" /> + <meta name="assert" content="Alpha components of rgba() colors less than 0 are clamped to 0." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + #one { color: rgb(0, 0, 0); } + #two { color: rgba(0, 0, 0, -0.0); } + #three { color: rgba(0, 0, 0, -0.1); } + #four { color: rgba(0, 0, 0, -0.9); } + #five { color: rgba(0, 0, 0, -30); } + #six { color: rgba(0, 0, 0, -7439.79); } + ]]></style> + </head> + <body> + <p id="one">This should be the only text visible on this page.</p> + <p id="two">This text should NOT be visible.</p> + <p id="three">This text should NOT be visible.</p> + <p id="four">This text should NOT be visible.</p> + <p id="five">This text should NOT be visible.</p> + <p id="six">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a1.0-b-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a1.0-b-ref.html new file mode 100644 index 0000000000..a8c4096fc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a1.0-b-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + html, body { background: white; } +</style> +<body> + <p>There should be six lines of text on this page, all the same color. [1 of 6]</p> + <p>There should be six lines of text on this page, all the same color. [2 of 6]</p> + <p>There should be six lines of text on this page, all the same color. [3 of 6]</p> + <p>There should be six lines of text on this page, all the same color. [4 of 6]</p> + <p>There should be six lines of text on this page, all the same color. [5 of 6]</p> + <p>There should be six lines of text on this page, all the same color. [6 of 6]</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a1.0-b.xht b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a1.0-b.xht new file mode 100644 index 0000000000..662bd3e6db --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-clamping-a1.0-b.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-clamping-a1.0-b-ref.html" /> + <meta name="assert" content="Alpha components of rgba() colors greater than 1 are clamped to 1." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + #two, #three, #four, #five, #six { color: rgba(0, 0, 0, 0); } + + #two { color: rgba(0, 0, 0, 1.0); } + #three { color: rgba(0, 0, 0, 1.1); } + #four { color: rgba(0, 0, 0, 1.9); } + #five { color: rgba(0, 0, 0, 30); } + #six { color: rgba(0, 0, 0, 7439.79); } + ]]></style> + </head> + <body> + <p id="one">There should be six lines of text on this page, all the same color. [1 of 6]</p> + <p id="two">There should be six lines of text on this page, all the same color. [2 of 6]</p> + <p id="three">There should be six lines of text on this page, all the same color. [3 of 6]</p> + <p id="four">There should be six lines of text on this page, all the same color. [4 of 6]</p> + <p id="five">There should be six lines of text on this page, all the same color. [5 of 6]</p> + <p id="six">There should be six lines of text on this page, all the same color. [6 of 6]</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-clip-outside-device-gamut-b-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-clip-outside-device-gamut-b-ref.html new file mode 100644 index 0000000000..09fc6c9ed7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-clip-outside-device-gamut-b-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + body { background: white; color: black; } + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } +</style> +<body> + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + <p>Every row in this table should have both columns the same color:</p> + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td colspan='2' style="background: rgb(102, 255, 102)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 153, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(102, 255, 102)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 255, 153)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(102, 255, 102)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 255, 153)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(132, 102, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 173, 255)"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-clip-outside-device-gamut-b.xht b/testing/web-platform/tests/css/css-color/t422-rgba-clip-outside-device-gamut-b.xht new file mode 100644 index 0000000000..81ac05b388 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-clip-outside-device-gamut-b.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() clipping outside device gamut</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-clip-outside-device-gamut-b-ref.html" /> + <meta name="assert" content="Test clipping of rgba() values outside the device gamut." /> + <style type="text/css"><![CDATA[ + + body { background: white; color: black; } + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } + + ]]></style> + </head> + <body> + + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + + <p>Every row in this table should have both columns the same color:</p> + + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td style="background: rgba(-30, 500, -1, 0.6)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + </tr> + <tr> + <td style="background: rgba(-260, -254, 300, 0.4)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + </tr> + <tr> + <td style="background: rgba(-254, 256, 0, 0.6)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + </tr> + <tr> + <td style="background: rgba(-10%, 200%, -1%, 0.4)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + </tr> + <tr> + <td style="background: rgba(-110%, 130%, -99%, 0.6)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + </tr> + <tr> + <td style="background: rgba(-99%, 101%, 0%, 0.4)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + </tr> + <tr> + <td style="background: rgba(50, -30, 255, 0.6)"> </td> + <td style="background: rgb(132, 102, 255)"> </td> + </tr> + <tr> + <td style="background: rgba(0, 50, 350, 0.4)"> </td> + <td style="background: rgb(153, 173, 255)"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-int-a-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-func-int-a-ref.html new file mode 100644 index 0000000000..cca64344bd --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-int-a-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + #one { color: black; background: white; } + #two { color: white; background: black; } + #three { color: red; } + #four { color: #00FF00; } + #five { color: blue; } +</style> +<body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-int-a.xht b/testing/web-platform/tests/css/css-color/t422-rgba-func-int-a.xht new file mode 100644 index 0000000000..c85bad25e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-int-a.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-func-int-a-ref.html" /> + <meta name="assert" content="Test that rgba() values produce correct colors." /> + <style type="text/css"><![CDATA[ + #one { color: rgba(0, 0, 0, 1.0); background: rgba(255, 255, 255, 1.0); } + #two { color: rgba(255, 255, 255, 1.0); background: rgba(0, 0, 0, 1.0); } + #three { color: rgba(255, 0, 0, 1.0); } + #four { color: rgba(0, 255, 0, 1.0); } + #five { color: rgba(0, 0, 255, 1.0); } + ]]></style> + </head> + <body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-no-mixed-f-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-func-no-mixed-f-ref.html new file mode 100644 index 0000000000..8ca324b8bc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-no-mixed-f-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + p { + color: green; + } +</style> +<body> + <p>This text should be green.</p> + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-no-mixed-f.xht b/testing/web-platform/tests/css/css-color/t422-rgba-func-no-mixed-f.xht new file mode 100644 index 0000000000..1bfd92bdbc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-no-mixed-f.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: no mixed rgba() values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-func-no-mixed-f-ref.html" /> + <meta name="flags" content="invalid" /> + <meta name="assert" content="Test that rgba() values are only accepted when all integers or all percentages." /> + <style type="text/css"><![CDATA[ + p { color: green; } + p { color: rgba(255, 0, 0%, 1.0); } + p { color: rgba(100%, 0%, 0, 1.0); } + p { color: rgba(100%, 1, 0, 1.0); } + p { color: rgba(255, 1%, 0%, 1.0); } + p { color: rgba(99%, 0%, 0, 1.0); } + p { color: rgba(0%, 0, 0%, 1.0); } + p { color: rgba(0, 0%, 0%, 1.0); } + p { color: rgba(254, 255%, 0, 1.0); } + ]]></style> + </head> + <body> + <p>This text should be green.</p> + + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-pct-a.xht b/testing/web-platform/tests/css/css-color/t422-rgba-func-pct-a.xht new file mode 100644 index 0000000000..9070bed11a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-pct-a.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-func-int-a-ref.html" /> + <meta name="assert" content="Test that rgba() values produce correct colors." /> + <style type="text/css"><![CDATA[ + #one { color: rgba(0%, 0%, 0%, 1.0); background: rgba(100%, 100%, 100%, 1.0); } + #two { color: rgba(100%, 100%, 100%, 1.0); background: rgba(0%, 0%, 0%, 1.0); } + #three { color: rgba(100%, 0%, 0%, 1.0); } + #four { color: rgba(0%, 100%, 0%, 1.0); } + #five { color: rgba(0%, 0%, 100%, 1.0); } + ]]></style> + </head> + <body> + <p id="one">This should be black text on a white background.</p> + <p id="two">This should be white text on a black background.</p> + <p id="three">This text should be red.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be blue.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-whitespace-b-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-func-whitespace-b-ref.html new file mode 100644 index 0000000000..cdf2cc4d1c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-whitespace-b-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + body { background: black; } + p { color: #00FF00; } +</style> +<body> + <p>This text should be green.</p> + <p>This text should be green.</p> + <p>This text should be green.</p> + <p>This text should be green.</p> + <p>This text should be green.</p> + <p>This text should be green.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-func-whitespace-b.xht b/testing/web-platform/tests/css/css-color/t422-rgba-func-whitespace-b.xht new file mode 100644 index 0000000000..ca80260b75 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-func-whitespace-b.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: whitespace in rgba() values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-func-whitespace-b-ref.html" /> + <meta name="assert" content="Test that whitespace is allowed within rgba() functions." /> + <style type="text/css"><![CDATA[ + html, body { background: black; } + #one { color: rgba( 0, +255 ,0 ,1.0 ); } + #two { color: rgba(0 +,255 +,0 +, 1.0); } + #three { color: rgba( 0 , 255 , 0 , 1.0); } + + #four { color: rgba( 0%, +100% ,0% ,1.0 ); } + #five { color: rgba(0% +,100% +,0% +, 1.0); } + #six { color: rgba( 0% , 100% , 0% , + 1.0); } + ]]></style> + </head> + <body> + <p id="one">This text should be green.</p> + <p id="two">This text should be green.</p> + <p id="three">This text should be green.</p> + <p id="four">This text should be green.</p> + <p id="five">This text should be green.</p> + <p id="six">This text should be green.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-values-meaning-b-ref.html b/testing/web-platform/tests/css/css-color/t422-rgba-values-meaning-b-ref.html new file mode 100644 index 0000000000..08631f2e4a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-values-meaning-b-ref.html @@ -0,0 +1,432 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following table should have four matching rows changing (in 5 steps) from red at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from red at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from green at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from green at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from red at the left to green at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: lime"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 51, 0)"> </td> + <td style="background: rgb(153, 102, 0)"> </td> + <td style="background: rgb(102, 153, 0)"> </td> + <td style="background: rgb(51, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 51, 0)"> </td> + <td style="background: rgb(153, 102, 0)"> </td> + <td style="background: rgb(102, 153, 0)"> </td> + <td style="background: rgb(51, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 51, 0)"> </td> + <td style="background: rgb(153, 102, 0)"> </td> + <td style="background: rgb(102, 153, 0)"> </td> + <td style="background: rgb(51, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(204, 51, 0)"> </td> + <td style="background: rgb(153, 102, 0)"> </td> + <td style="background: rgb(102, 153, 0)"> </td> + <td style="background: rgb(51, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from green at the left to blue at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: blue"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 51)"> </td> + <td style="background: rgb(0, 153, 102)"> </td> + <td style="background: rgb(0, 102, 153)"> </td> + <td style="background: rgb(0, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 51)"> </td> + <td style="background: rgb(0, 153, 102)"> </td> + <td style="background: rgb(0, 102, 153)"> </td> + <td style="background: rgb(0, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 51)"> </td> + <td style="background: rgb(0, 153, 102)"> </td> + <td style="background: rgb(0, 102, 153)"> </td> + <td style="background: rgb(0, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 204, 51)"> </td> + <td style="background: rgb(0, 153, 102)"> </td> + <td style="background: rgb(0, 102, 153)"> </td> + <td style="background: rgb(0, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: red"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 204)"> </td> + <td style="background: rgb(102, 0, 153)"> </td> + <td style="background: rgb(153, 0, 102)"> </td> + <td style="background: rgb(204, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 204)"> </td> + <td style="background: rgb(102, 0, 153)"> </td> + <td style="background: rgb(153, 0, 102)"> </td> + <td style="background: rgb(204, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 204)"> </td> + <td style="background: rgb(102, 0, 153)"> </td> + <td style="background: rgb(153, 0, 102)"> </td> + <td style="background: rgb(204, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 204)"> </td> + <td style="background: rgb(102, 0, 153)"> </td> + <td style="background: rgb(153, 0, 102)"> </td> + <td style="background: rgb(204, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t422-rgba-values-meaning-b.xht b/testing/web-platform/tests/css/css-color/t422-rgba-values-meaning-b.xht new file mode 100644 index 0000000000..2149ef398e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t422-rgba-values-meaning-b.xht @@ -0,0 +1,443 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: rgba values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#rgba-color" /> + <link rel="match" href="t422-rgba-values-meaning-b-ref.html" /> + <meta name="assert" content="Test that the color components in rgba colors are interpreted correctly." /> + <style type="text/css"><![CDATA[ + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + ]]></style> + </head> + <body> + + <p>The following table should have four matching rows changing (in 5 steps) from red at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: rgba(204, 0, 0, 1.0)"> </td> + <td style="background: rgba(153, 0, 0, 1.0)"> </td> + <td style="background: rgba(102, 0, 0, 1.0)"> </td> + <td style="background: rgba(51, 0, 0, 1.0)"> </td> + <td style="background: rgba(0, 0, 0, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(80%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(60%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(40%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(20%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: rgba(255, 0, 0, 0.8)"> </td> + <td style="background: rgba(255, 0, 0, 0.6)"> </td> + <td style="background: rgba(255, 0, 0, 0.4)"> </td> + <td style="background: rgba(255, 0, 0, 0.2)"> </td> + <td style="background: rgba(255, 0, 0, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.8)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.6)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.4)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.2)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from red at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: rgba(255, 51, 51, 1.0)"> </td> + <td style="background: rgba(255, 102, 102, 1.0)"> </td> + <td style="background: rgba(255, 153, 153, 1.0)"> </td> + <td style="background: rgba(255, 204, 204, 1.0)"> </td> + <td style="background: rgba(255, 255, 255, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(100%, 20%, 20%, 1.0)"> </td> + <td style="background: rgba(100%, 40%, 40%, 1.0)"> </td> + <td style="background: rgba(100%, 60%, 60%, 1.0)"> </td> + <td style="background: rgba(100%, 80%, 80%, 1.0)"> </td> + <td style="background: rgba(100%, 100%, 100%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: rgba(255, 0, 0, 0.8)"> </td> + <td style="background: rgba(255, 0, 0, 0.6)"> </td> + <td style="background: rgba(255, 0, 0, 0.4)"> </td> + <td style="background: rgba(255, 0, 0, 0.2)"> </td> + <td style="background: rgba(255, 0, 0, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.8)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.6)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.4)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.2)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from green at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: rgba(0, 204, 0, 1.0)"> </td> + <td style="background: rgba(0, 153, 0, 1.0)"> </td> + <td style="background: rgba(0, 102, 0, 1.0)"> </td> + <td style="background: rgba(0, 51, 0, 1.0)"> </td> + <td style="background: rgba(0, 0, 0, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 80%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 60%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 40%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 20%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: rgba(0, 255, 0, 0.8)"> </td> + <td style="background: rgba(0, 255, 0, 0.6)"> </td> + <td style="background: rgba(0, 255, 0, 0.4)"> </td> + <td style="background: rgba(0, 255, 0, 0.2)"> </td> + <td style="background: rgba(0, 255, 0, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.8)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.6)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.4)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.2)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from green at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: rgba(51, 255, 51, 1.0)"> </td> + <td style="background: rgba(102, 255, 102, 1.0)"> </td> + <td style="background: rgba(153, 255, 153, 1.0)"> </td> + <td style="background: rgba(204, 255, 204, 1.0)"> </td> + <td style="background: rgba(255, 255, 255, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: rgba(20%, 100%, 20%, 1.0)"> </td> + <td style="background: rgba(40%, 100%, 40%, 1.0)"> </td> + <td style="background: rgba(60%, 100%, 60%, 1.0)"> </td> + <td style="background: rgba(80%, 100%, 80%, 1.0)"> </td> + <td style="background: rgba(100%, 100%, 100%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: rgba(0, 255, 0, 0.8)"> </td> + <td style="background: rgba(0, 255, 0, 0.6)"> </td> + <td style="background: rgba(0, 255, 0, 0.4)"> </td> + <td style="background: rgba(0, 255, 0, 0.2)"> </td> + <td style="background: rgba(0, 255, 0, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.8)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.6)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.4)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.2)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to black at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: rgba(0, 0, 204, 1.0)"> </td> + <td style="background: rgba(0, 0, 153, 1.0)"> </td> + <td style="background: rgba(0, 0, 102, 1.0)"> </td> + <td style="background: rgba(0, 0, 51, 1.0)"> </td> + <td style="background: rgba(0, 0, 0, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 80%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 60%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 40%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 20%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: rgba(0, 0, 255, 0.8)"> </td> + <td style="background: rgba(0, 0, 255, 0.6)"> </td> + <td style="background: rgba(0, 0, 255, 0.4)"> </td> + <td style="background: rgba(0, 0, 255, 0.2)"> </td> + <td style="background: rgba(0, 0, 255, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.8)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.6)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.4)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.2)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to white at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: rgba(51, 51, 255, 1.0)"> </td> + <td style="background: rgba(102, 102, 255, 1.0)"> </td> + <td style="background: rgba(153, 153, 255, 1.0)"> </td> + <td style="background: rgba(204, 204, 255, 1.0)"> </td> + <td style="background: rgba(255, 255, 255, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: rgba(20%, 20%, 100%, 1.0)"> </td> + <td style="background: rgba(40%, 40%, 100%, 1.0)"> </td> + <td style="background: rgba(60%, 60%, 100%, 1.0)"> </td> + <td style="background: rgba(80%, 80%, 100%, 1.0)"> </td> + <td style="background: rgba(100%, 100%, 100%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: rgba(0, 0, 255, 0.8)"> </td> + <td style="background: rgba(0, 0, 255, 0.6)"> </td> + <td style="background: rgba(0, 0, 255, 0.4)"> </td> + <td style="background: rgba(0, 0, 255, 0.2)"> </td> + <td style="background: rgba(0, 0, 255, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.8)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.6)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.4)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.2)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from red at the left to green at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: lime"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: rgba(204, 51, 0, 1.0)"> </td> + <td style="background: rgba(153, 102, 0, 1.0)"> </td> + <td style="background: rgba(102, 153, 0, 1.0)"> </td> + <td style="background: rgba(51, 204, 0, 1.0)"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(80%, 20%, 0%, 1.0)"> </td> + <td style="background: rgba(60%, 40%, 0%, 1.0)"> </td> + <td style="background: rgba(40%, 60%, 0%, 1.0)"> </td> + <td style="background: rgba(20%, 80%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: rgba(255, 0, 0, 0.8)"> </td> + <td style="background: rgba(255, 0, 0, 0.6)"> </td> + <td style="background: rgba(255, 0, 0, 0.4)"> </td> + <td style="background: rgba(255, 0, 0, 0.2)"> </td> + <td style="background: rgba(255, 0, 0, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.8)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.6)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.4)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.2)"> </td> + <td style="background: rgba(100%, 0%, 0%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from green at the left to blue at the right: (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: blue"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: rgba(0, 204, 51, 1.0)"> </td> + <td style="background: rgba(0, 153, 102, 1.0)"> </td> + <td style="background: rgba(0, 102, 153, 1.0)"> </td> + <td style="background: rgba(0, 51, 204, 1.0)"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 80%, 20%, 1.0)"> </td> + <td style="background: rgba(0%, 60%, 40%, 1.0)"> </td> + <td style="background: rgba(0%, 40%, 60%, 1.0)"> </td> + <td style="background: rgba(0%, 20%, 80%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 255, 0, 1.0)"> </td> + <td style="background: rgba(0, 255, 0, 0.8)"> </td> + <td style="background: rgba(0, 255, 0, 0.6)"> </td> + <td style="background: rgba(0, 255, 0, 0.4)"> </td> + <td style="background: rgba(0, 255, 0, 0.2)"> </td> + <td style="background: rgba(0, 255, 0, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 100%, 0%, 1.0)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.8)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.6)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.4)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.2)"> </td> + <td style="background: rgba(0%, 100%, 0%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have four matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: red"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: rgba(51, 0, 204, 1.0)"> </td> + <td style="background: rgba(102, 0, 153, 1.0)"> </td> + <td style="background: rgba(153, 0, 102, 1.0)"> </td> + <td style="background: rgba(204, 0, 51, 1.0)"> </td> + <td style="background: rgba(255, 0, 0, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: rgba(20%, 0%, 80%, 1.0)"> </td> + <td style="background: rgba(40%, 0%, 60%, 1.0)"> </td> + <td style="background: rgba(60%, 0%, 40%, 1.0)"> </td> + <td style="background: rgba(80%, 0%, 20%, 1.0)"> </td> + <td style="background: rgba(100%, 0%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgba(0, 0, 255, 1.0)"> </td> + <td style="background: rgba(0, 0, 255, 0.8)"> </td> + <td style="background: rgba(0, 0, 255, 0.6)"> </td> + <td style="background: rgba(0, 0, 255, 0.4)"> </td> + <td style="background: rgba(0, 0, 255, 0.2)"> </td> + <td style="background: rgba(0, 0, 255, 0.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgba(0%, 0%, 100%, 1.0)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.8)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.6)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.4)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.2)"> </td> + <td style="background: rgba(0%, 0%, 100%, 0.0)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t423-transparent-1-a.xht b/testing/web-platform/tests/css/css-color/t423-transparent-1-a.xht new file mode 100644 index 0000000000..d8680884bf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t423-transparent-1-a.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: transparent</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparent" /> + <link rel="match" href="t422-rgba-clamping-a0.0-b-ref.html" /> + <meta name="assert" content="That the 'transparent' color keyword makes colors transparent." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + p { color: black; } + #two { color: transparent; } + ]]></style> + </head> + <body> + <p id="one">This should be the only text visible on this page.</p> + <p id="two">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t423-transparent-2-a-ref.html b/testing/web-platform/tests/css/css-color/t423-transparent-2-a-ref.html new file mode 100644 index 0000000000..d1fe6c0ddc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t423-transparent-2-a-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + body { background-color: black; } + p { color: white; } +</style> +<body> + <p>This should be the only text visible on this page.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t423-transparent-2-a.xht b/testing/web-platform/tests/css/css-color/t423-transparent-2-a.xht new file mode 100644 index 0000000000..0427ec5ff6 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t423-transparent-2-a.xht @@ -0,0 +1,20 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: transparent</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#transparent" /> + <link rel="match" href="t423-transparent-2-a-ref.html" /> + <meta name="assert" content="That the 'transparent' color keyword makes colors transparent." /> + <style type="text/css"><![CDATA[ + html, body { background: black; } + p { color: white; } + #two { color: transparent; } + ]]></style> + </head> + <body> + <p id="one">This should be the only text visible on this page.</p> + <p id="two">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-basic-a-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-basic-a-ref.html new file mode 100644 index 0000000000..f79bc4beb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-basic-a-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + html, body { background: white; } + p { color: #008000; } +</style> +<body> + <p>This text should be dark green.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-basic-a.xht b/testing/web-platform/tests/css/css-color/t424-hsl-basic-a.xht new file mode 100644 index 0000000000..9fc453c939 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-basic-a.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsl()</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> + <link rel="match" href="t424-hsl-basic-a-ref.html" /> + <meta name="assert" content="Test basic functioning of hsl() colors." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + p { color: hsl(120, 100%, 25%); } + ]]></style> + </head> + <body> + <p>This text should be dark green.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b-ref.html new file mode 100644 index 0000000000..7d1f1bf278 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b-ref.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } +</style> +<body> + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + <p>Every row in this table should have both columns the same color:</p> + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td colspan='2' style="background: black"> </td> + </tr> + <tr> + <td colspan='2' style="background: black"> </td> + </tr> + <tr> + <td colspan='2' style="background: white"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(0, 0, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(102, 0, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(102, 102, 102)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 153, 153)"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b.xht b/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b.xht new file mode 100644 index 0000000000..d66c2db925 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-clip-outside-gamut-b.xht @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsl() clipping outside device gamut</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> + <link rel="match" href="t424-hsl-clip-outside-gamut-b-ref.html" /> + <meta name="assert" content="Test clipping of hsl() values outside the device gamut." /> + <style type="text/css"><![CDATA[ + + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } + + ]]></style> + </head> + <body> + + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + + <p>Every row in this table should have both columns the same color:</p> + + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td style="background: hsl(240, 100%, -100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: hsl(240, 75%, -20%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: hsl(240, 75%, 120%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: hsl(240, 130%, 50%)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + </tr> + <tr> + <td style="background: hsl(264, 130%, 50%)"> </td> + <td style="background: rgb(102, 0, 255)"> </td> + </tr> + <tr> + <td style="background: hsl(0, -50%, 40%)"> </td> + <td style="background: rgb(102, 102, 102)"> </td> + </tr> + <tr> + <td style="background: hsl(30, -50%, 60%)"> </td> + <td style="background: rgb(153, 153, 153)"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-h-rotating-b-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-h-rotating-b-ref.html new file mode 100644 index 0000000000..60585ea91a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-h-rotating-b-ref.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + #one { background: #FF0000; } + #two { background: #FFFF00; } + #three { background: #00FF00; } + #four { background: #00FFFF; } + #five { background: #0000FF; } + #six { background: #FF00FF; } +</style> +<body> + <p>Each column in the following table should have every cell the + same color, except for the checkerboard pattern at the right and + left used to indicate the row positions.</p> + + <table> + <tr> + <td style="background: white"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: white"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-h-rotating-b.xht b/testing/web-platform/tests/css/css-color/t424-hsl-h-rotating-b.xht new file mode 100644 index 0000000000..b310316f68 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-h-rotating-b.xht @@ -0,0 +1,65 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: modding of H values in hsl() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> + <link rel="match" href="t424-hsl-h-rotating-b-ref.html" /> + <meta name="assert" content="H values in hsl() colors should be treated like angles, even when outside [0,360)" /> + <style type="text/css"><![CDATA[ + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + ]]></style> + </head> + <body> + <p>Each column in the following table should have every cell the + same color, except for the checkerboard pattern at the right and + left used to indicate the row positions.</p> + + <table> + <tr> + <td style="background: white"> </td> + <td style="background: hsl(0, 100%, 50%)"> </td> + <td style="background: hsl(60, 100%, 50%)"> </td> + <td style="background: hsl(120, 100%, 50%)"> </td> + <td style="background: hsl(180, 100%, 50%)"> </td> + <td style="background: hsl(240, 100%, 50%)"> </td> + <td style="background: hsl(300, 100%, 50%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(-360, 100%, 50%)"> </td> + <td style="background: hsl(-300, 100%, 50%)"> </td> + <td style="background: hsl(-240, 100%, 50%)"> </td> + <td style="background: hsl(-180, 100%, 50%)"> </td> + <td style="background: hsl(-120, 100%, 50%)"> </td> + <td style="background: hsl(-60, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsl(360, 100%, 50%)"> </td> + <td style="background: hsl(420, 100%, 50%)"> </td> + <td style="background: hsl(480, 100%, 50%)"> </td> + <td style="background: hsl(540, 100%, 50%)"> </td> + <td style="background: hsl(600, 100%, 50%)"> </td> + <td style="background: hsl(660, 100%, 50%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(6120, 100%, 50%)"> </td> + <td style="background: hsl(-9660, 100%, 50%)"> </td> + <td style="background: hsl(99840, 100%, 50%)"> </td> + <td style="background: hsl(-900, 100%, 50%)"> </td> + <td style="background: hsl(-104880, 100%, 50%)"> </td> + <td style="background: hsl(2820, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-parsing-f-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-parsing-f-ref.html new file mode 100644 index 0000000000..5d99a1a64e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-parsing-f-ref.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + html, body { background: white; } + p { color: #008000; } +</style> +<body> + <p>This text should be dark green.</p> + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-parsing-f.xht b/testing/web-platform/tests/css/css-color/t424-hsl-parsing-f.xht new file mode 100644 index 0000000000..ca89eae62d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-parsing-f.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsl()</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> + <link rel="match" href="t424-hsl-parsing-f-ref.html" /> + <meta name="flags" content="invalid" /> + <meta name="assert" content="Test rules for parsing of hsl() colors." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + p { color: hsl(120, 100%, 25%); } + p { color: hsl(0, 255, 128); } + p { color: hsl(0%, 100%, 50%); } + p { color: hsl(0px, 100%, 50%); } + ]]></style> + </head> + <body> + <p>This text should be dark green.</p> + + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-1-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-1-ref.html new file mode 100644 index 0000000000..5c4f0717dc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-1-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from red at the left to green at the right (through yellow in the middle).</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 0)"> </td> + <td style="background: rgb(255, 102, 0)"> </td> + <td style="background: rgb(255, 153, 0)"> </td> + <td style="background: rgb(255, 204, 0)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(204, 255, 0)"> </td> + <td style="background: rgb(153, 255, 0)"> </td> + <td style="background: rgb(102, 255, 0)"> </td> + <td style="background: rgb(51, 255, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 0)"> </td> + <td style="background: rgb(255, 102, 0)"> </td> + <td style="background: rgb(255, 153, 0)"> </td> + <td style="background: rgb(255, 204, 0)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(204, 255, 0)"> </td> + <td style="background: rgb(153, 255, 0)"> </td> + <td style="background: rgb(102, 255, 0)"> </td> + <td style="background: rgb(51, 255, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-1.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-1.html new file mode 100644 index 0000000000..11d78a4afc --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-1.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-1-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from red at the left to green at the right (through yellow in the middle).</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(0, 100%, 50%)"> </td> + <td style="background: hsl(12, 100%, 50%)"> </td> + <td style="background: hsl(24, 100%, 50%)"> </td> + <td style="background: hsl(36, 100%, 50%)"> </td> + <td style="background: hsl(48, 100%, 50%)"> </td> + <td style="background: hsl(60, 100%, 50%)"> </td> + <td style="background: hsl(72, 100%, 50%)"> </td> + <td style="background: hsl(84, 100%, 50%)"> </td> + <td style="background: hsl(96, 100%, 50%)"> </td> + <td style="background: hsl(108, 100%, 50%)"> </td> + <td style="background: hsl(120, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 0)"> </td> + <td style="background: rgb(255, 102, 0)"> </td> + <td style="background: rgb(255, 153, 0)"> </td> + <td style="background: rgb(255, 204, 0)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(204, 255, 0)"> </td> + <td style="background: rgb(153, 255, 0)"> </td> + <td style="background: rgb(102, 255, 0)"> </td> + <td style="background: rgb(51, 255, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-10-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-10-ref.html new file mode 100644 index 0000000000..e93630d0cf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-10-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with red at the middle.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-10.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-10.html new file mode 100644 index 0000000000..6a18362610 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-10.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-10-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with red at the middle.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(0, 100%, 0%)"> </td> + <td style="background: hsl(0, 100%, 10%)"> </td> + <td style="background: hsl(0, 100%, 20%)"> </td> + <td style="background: hsl(0, 100%, 30%)"> </td> + <td style="background: hsl(0, 100%, 40%)"> </td> + <td style="background: hsl(0, 100%, 50%)"> </td> + <td style="background: hsl(0, 100%, 60%)"> </td> + <td style="background: hsl(0, 100%, 70%)"> </td> + <td style="background: hsl(0, 100%, 80%)"> </td> + <td style="background: hsl(0, 100%, 90%)"> </td> + <td style="background: hsl(0, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 0, 0)"> </td> + <td style="background: rgb(102, 0, 0)"> </td> + <td style="background: rgb(153, 0, 0)"> </td> + <td style="background: rgb(204, 0, 0)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: rgb(255, 51, 51)"> </td> + <td style="background: rgb(255, 102, 102)"> </td> + <td style="background: rgb(255, 153, 153)"> </td> + <td style="background: rgb(255, 204, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-11-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-11-ref.html new file mode 100644 index 0000000000..ed0ba2d863 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-11-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with yellow at the middle.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 51, 0)"> </td> + <td style="background: rgb(102, 102, 0)"> </td> + <td style="background: rgb(153, 153, 0)"> </td> + <td style="background: rgb(204, 204, 0)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(255, 255, 51)"> </td> + <td style="background: rgb(255, 255, 102)"> </td> + <td style="background: rgb(255, 255, 153)"> </td> + <td style="background: rgb(255, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 51, 0)"> </td> + <td style="background: rgb(102, 102, 0)"> </td> + <td style="background: rgb(153, 153, 0)"> </td> + <td style="background: rgb(204, 204, 0)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(255, 255, 51)"> </td> + <td style="background: rgb(255, 255, 102)"> </td> + <td style="background: rgb(255, 255, 153)"> </td> + <td style="background: rgb(255, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-11.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-11.html new file mode 100644 index 0000000000..c76e7bafea --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-11.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-11-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with yellow at the middle.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(60, 100%, 0%)"> </td> + <td style="background: hsl(60, 100%, 10%)"> </td> + <td style="background: hsl(60, 100%, 20%)"> </td> + <td style="background: hsl(60, 100%, 30%)"> </td> + <td style="background: hsl(60, 100%, 40%)"> </td> + <td style="background: hsl(60, 100%, 50%)"> </td> + <td style="background: hsl(60, 100%, 60%)"> </td> + <td style="background: hsl(60, 100%, 70%)"> </td> + <td style="background: hsl(60, 100%, 80%)"> </td> + <td style="background: hsl(60, 100%, 90%)"> </td> + <td style="background: hsl(60, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 51, 0)"> </td> + <td style="background: rgb(102, 102, 0)"> </td> + <td style="background: rgb(153, 153, 0)"> </td> + <td style="background: rgb(204, 204, 0)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: rgb(255, 255, 51)"> </td> + <td style="background: rgb(255, 255, 102)"> </td> + <td style="background: rgb(255, 255, 153)"> </td> + <td style="background: rgb(255, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-12-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-12-ref.html new file mode 100644 index 0000000000..ef2d81d994 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-12-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with green at the middle.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-12.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-12.html new file mode 100644 index 0000000000..cba1cb9c4b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-12.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-12-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with green at the middle.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(120, 100%, 0%)"> </td> + <td style="background: hsl(120, 100%, 10%)"> </td> + <td style="background: hsl(120, 100%, 20%)"> </td> + <td style="background: hsl(120, 100%, 30%)"> </td> + <td style="background: hsl(120, 100%, 40%)"> </td> + <td style="background: hsl(120, 100%, 50%)"> </td> + <td style="background: hsl(120, 100%, 60%)"> </td> + <td style="background: hsl(120, 100%, 70%)"> </td> + <td style="background: hsl(120, 100%, 80%)"> </td> + <td style="background: hsl(120, 100%, 90%)"> </td> + <td style="background: hsl(120, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 51, 0)"> </td> + <td style="background: rgb(0, 102, 0)"> </td> + <td style="background: rgb(0, 153, 0)"> </td> + <td style="background: rgb(0, 204, 0)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(51, 255, 51)"> </td> + <td style="background: rgb(102, 255, 102)"> </td> + <td style="background: rgb(153, 255, 153)"> </td> + <td style="background: rgb(204, 255, 204)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-13-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-13-ref.html new file mode 100644 index 0000000000..afe3fffdb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-13-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with aqua at the middle.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 51, 51)"> </td> + <td style="background: rgb(0, 102, 102)"> </td> + <td style="background: rgb(0, 153, 153)"> </td> + <td style="background: rgb(0, 204, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(51, 255, 255)"> </td> + <td style="background: rgb(102, 255, 255)"> </td> + <td style="background: rgb(153, 255, 255)"> </td> + <td style="background: rgb(204, 255, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 51, 51)"> </td> + <td style="background: rgb(0, 102, 102)"> </td> + <td style="background: rgb(0, 153, 153)"> </td> + <td style="background: rgb(0, 204, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(51, 255, 255)"> </td> + <td style="background: rgb(102, 255, 255)"> </td> + <td style="background: rgb(153, 255, 255)"> </td> + <td style="background: rgb(204, 255, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-13.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-13.html new file mode 100644 index 0000000000..bf69977f5e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-13.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-13-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with aqua at the middle.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(180, 100%, 0%)"> </td> + <td style="background: hsl(180, 100%, 10%)"> </td> + <td style="background: hsl(180, 100%, 20%)"> </td> + <td style="background: hsl(180, 100%, 30%)"> </td> + <td style="background: hsl(180, 100%, 40%)"> </td> + <td style="background: hsl(180, 100%, 50%)"> </td> + <td style="background: hsl(180, 100%, 60%)"> </td> + <td style="background: hsl(180, 100%, 70%)"> </td> + <td style="background: hsl(180, 100%, 80%)"> </td> + <td style="background: hsl(180, 100%, 90%)"> </td> + <td style="background: hsl(180, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 51, 51)"> </td> + <td style="background: rgb(0, 102, 102)"> </td> + <td style="background: rgb(0, 153, 153)"> </td> + <td style="background: rgb(0, 204, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(51, 255, 255)"> </td> + <td style="background: rgb(102, 255, 255)"> </td> + <td style="background: rgb(153, 255, 255)"> </td> + <td style="background: rgb(204, 255, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-14-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-14-ref.html new file mode 100644 index 0000000000..79ce8c785d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-14-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with blue at the middle.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-14.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-14.html new file mode 100644 index 0000000000..48fbe10210 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-14.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-14-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with blue at the middle.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(240, 100%, 0%)"> </td> + <td style="background: hsl(240, 100%, 10%)"> </td> + <td style="background: hsl(240, 100%, 20%)"> </td> + <td style="background: hsl(240, 100%, 30%)"> </td> + <td style="background: hsl(240, 100%, 40%)"> </td> + <td style="background: hsl(240, 100%, 50%)"> </td> + <td style="background: hsl(240, 100%, 60%)"> </td> + <td style="background: hsl(240, 100%, 70%)"> </td> + <td style="background: hsl(240, 100%, 80%)"> </td> + <td style="background: hsl(240, 100%, 90%)"> </td> + <td style="background: hsl(240, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(0, 0, 51)"> </td> + <td style="background: rgb(0, 0, 102)"> </td> + <td style="background: rgb(0, 0, 153)"> </td> + <td style="background: rgb(0, 0, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 51, 255)"> </td> + <td style="background: rgb(102, 102, 255)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + <td style="background: rgb(204, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-15-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-15-ref.html new file mode 100644 index 0000000000..5d001fc31b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-15-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with fuchsia at the middle.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 0, 51)"> </td> + <td style="background: rgb(102, 0, 102)"> </td> + <td style="background: rgb(153, 0, 153)"> </td> + <td style="background: rgb(204, 0, 204)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(255, 51, 255)"> </td> + <td style="background: rgb(255, 102, 255)"> </td> + <td style="background: rgb(255, 153, 255)"> </td> + <td style="background: rgb(255, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 0, 51)"> </td> + <td style="background: rgb(102, 0, 102)"> </td> + <td style="background: rgb(153, 0, 153)"> </td> + <td style="background: rgb(204, 0, 204)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(255, 51, 255)"> </td> + <td style="background: rgb(255, 102, 255)"> </td> + <td style="background: rgb(255, 153, 255)"> </td> + <td style="background: rgb(255, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-15.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-15.html new file mode 100644 index 0000000000..15f88c885c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-15.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-15-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in ten steps from black at the left to white at the right with fuchsia at the middle.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(300, 100%, 0%)"> </td> + <td style="background: hsl(300, 100%, 10%)"> </td> + <td style="background: hsl(300, 100%, 20%)"> </td> + <td style="background: hsl(300, 100%, 30%)"> </td> + <td style="background: hsl(300, 100%, 40%)"> </td> + <td style="background: hsl(300, 100%, 50%)"> </td> + <td style="background: hsl(300, 100%, 60%)"> </td> + <td style="background: hsl(300, 100%, 70%)"> </td> + <td style="background: hsl(300, 100%, 80%)"> </td> + <td style="background: hsl(300, 100%, 90%)"> </td> + <td style="background: hsl(300, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 0)"> </td> + <td style="background: rgb(51, 0, 51)"> </td> + <td style="background: rgb(102, 0, 102)"> </td> + <td style="background: rgb(153, 0, 153)"> </td> + <td style="background: rgb(204, 0, 204)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(255, 51, 255)"> </td> + <td style="background: rgb(255, 102, 255)"> </td> + <td style="background: rgb(255, 153, 255)"> </td> + <td style="background: rgb(255, 204, 255)"> </td> + <td style="background: rgb(255, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-2-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-2-ref.html new file mode 100644 index 0000000000..8c3e80a7f7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-2-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from green at the left to blue at the right (through aqua in the middle).</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 255, 51)"> </td> + <td style="background: rgb(0, 255, 102)"> </td> + <td style="background: rgb(0, 255, 153)"> </td> + <td style="background: rgb(0, 255, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(0, 204, 255)"> </td> + <td style="background: rgb(0, 153, 255)"> </td> + <td style="background: rgb(0, 102, 255)"> </td> + <td style="background: rgb(0, 51, 255)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 255, 51)"> </td> + <td style="background: rgb(0, 255, 102)"> </td> + <td style="background: rgb(0, 255, 153)"> </td> + <td style="background: rgb(0, 255, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(0, 204, 255)"> </td> + <td style="background: rgb(0, 153, 255)"> </td> + <td style="background: rgb(0, 102, 255)"> </td> + <td style="background: rgb(0, 51, 255)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-2.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-2.html new file mode 100644 index 0000000000..15e81d5f12 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-2.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-2-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from green at the left to blue at the right (through aqua in the middle).</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(120, 100%, 50%)"> </td> + <td style="background: hsl(132, 100%, 50%)"> </td> + <td style="background: hsl(144, 100%, 50%)"> </td> + <td style="background: hsl(156, 100%, 50%)"> </td> + <td style="background: hsl(168, 100%, 50%)"> </td> + <td style="background: hsl(180, 100%, 50%)"> </td> + <td style="background: hsl(192, 100%, 50%)"> </td> + <td style="background: hsl(204, 100%, 50%)"> </td> + <td style="background: hsl(216, 100%, 50%)"> </td> + <td style="background: hsl(228, 100%, 50%)"> </td> + <td style="background: hsl(240, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: rgb(0, 255, 51)"> </td> + <td style="background: rgb(0, 255, 102)"> </td> + <td style="background: rgb(0, 255, 153)"> </td> + <td style="background: rgb(0, 255, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: rgb(0, 204, 255)"> </td> + <td style="background: rgb(0, 153, 255)"> </td> + <td style="background: rgb(0, 102, 255)"> </td> + <td style="background: rgb(0, 51, 255)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +<body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3-ref.html new file mode 100644 index 0000000000..7d0075c052 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from blue at the left to red at the right (through fuchsia in the middle).</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 255)"> </td> + <td style="background: rgb(102, 0, 255)"> </td> + <td style="background: rgb(153, 0, 255)"> </td> + <td style="background: rgb(204, 0, 255)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(255, 0, 204)"> </td> + <td style="background: rgb(255, 0, 153)"> </td> + <td style="background: rgb(255, 0, 102)"> </td> + <td style="background: rgb(255, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 255)"> </td> + <td style="background: rgb(102, 0, 255)"> </td> + <td style="background: rgb(153, 0, 255)"> </td> + <td style="background: rgb(204, 0, 255)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(255, 0, 204)"> </td> + <td style="background: rgb(255, 0, 153)"> </td> + <td style="background: rgb(255, 0, 102)"> </td> + <td style="background: rgb(255, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3.html new file mode 100644 index 0000000000..546b8bfc6f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-3.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-3-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change gradually from blue at the left to red at the right (through fuchsia in the middle).</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(240, 100%, 50%)"> </td> + <td style="background: hsl(252, 100%, 50%)"> </td> + <td style="background: hsl(264, 100%, 50%)"> </td> + <td style="background: hsl(276, 100%, 50%)"> </td> + <td style="background: hsl(288, 100%, 50%)"> </td> + <td style="background: hsl(300, 100%, 50%)"> </td> + <td style="background: hsl(312, 100%, 50%)"> </td> + <td style="background: hsl(324, 100%, 50%)"> </td> + <td style="background: hsl(336, 100%, 50%)"> </td> + <td style="background: hsl(348, 100%, 50%)"> </td> + <td style="background: hsl(360, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: rgb(51, 0, 255)"> </td> + <td style="background: rgb(102, 0, 255)"> </td> + <td style="background: rgb(153, 0, 255)"> </td> + <td style="background: rgb(204, 0, 255)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: rgb(255, 0, 204)"> </td> + <td style="background: rgb(255, 0, 153)"> </td> + <td style="background: rgb(255, 0, 102)"> </td> + <td style="background: rgb(255, 0, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-4-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-4-ref.html new file mode 100644 index 0000000000..a4f6f12daa --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-4-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to red at the right.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(153, 102, 102)"> </td> + <td style="background: rgb(204, 51, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(153, 102, 102)"> </td> + <td style="background: rgb(204, 51, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-4.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-4.html new file mode 100644 index 0000000000..9f981a44c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-4.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-4-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to red at the right.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(0, 20%, 50%)"> </td> + <td style="background: hsl(0, 60%, 50%)"> </td> + <td style="background: hsl(0, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(153, 102, 102)"> </td> + <td style="background: rgb(204, 51, 51)"> </td> + <td style="background: rgb(255, 0, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-5-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-5-ref.html new file mode 100644 index 0000000000..ba6954e365 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-5-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to yellow at the right.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(153, 153, 102)"> </td> + <td style="background: rgb(204, 204, 51)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(153, 153, 102)"> </td> + <td style="background: rgb(204, 204, 51)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-5.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-5.html new file mode 100644 index 0000000000..5d4e569db0 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-5.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-5-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to yellow at the right.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(60, 20%, 50%)"> </td> + <td style="background: hsl(60, 60%, 50%)"> </td> + <td style="background: hsl(60, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(153, 153, 102)"> </td> + <td style="background: rgb(204, 204, 51)"> </td> + <td style="background: rgb(255, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-6-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-6-ref.html new file mode 100644 index 0000000000..ce2eba4771 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-6-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to green at the right.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(102, 153, 102)"> </td> + <td style="background: rgb(51, 204, 51)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(102, 153, 102)"> </td> + <td style="background: rgb(51, 204, 51)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-6.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-6.html new file mode 100644 index 0000000000..9e54ba0022 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-6.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-6-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to green at the right.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(120, 20%, 50%)"> </td> + <td style="background: hsl(120, 60%, 50%)"> </td> + <td style="background: hsl(120, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(102, 153, 102)"> </td> + <td style="background: rgb(51, 204, 51)"> </td> + <td style="background: rgb(0, 255, 0)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-7-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-7-ref.html new file mode 100644 index 0000000000..6f6ffb8110 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-7-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to aqua at the right.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(102, 153, 153)"> </td> + <td style="background: rgb(51, 204, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(102, 153, 153)"> </td> + <td style="background: rgb(51, 204, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-7.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-7.html new file mode 100644 index 0000000000..9b237d0b8a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-7.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-7-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to aqua at the right.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(180, 20%, 50%)"> </td> + <td style="background: hsl(180, 60%, 50%)"> </td> + <td style="background: hsl(180, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(102, 153, 153)"> </td> + <td style="background: rgb(51, 204, 204)"> </td> + <td style="background: rgb(0, 255, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-8-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-8-ref.html new file mode 100644 index 0000000000..50c29d4043 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-8-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to blue at the right.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(102, 102, 153)"> </td> + <td style="background: rgb(51, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(102, 102, 153)"> </td> + <td style="background: rgb(51, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-8.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-8.html new file mode 100644 index 0000000000..906857b8ee --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-8.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-8-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to blue at the right.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(240, 20%, 50%)"> </td> + <td style="background: hsl(240, 60%, 50%)"> </td> + <td style="background: hsl(240, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(102, 102, 153)"> </td> + <td style="background: rgb(51, 51, 204)"> </td> + <td style="background: rgb(0, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-9-ref.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-9-ref.html new file mode 100644 index 0000000000..ac42b1f86c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-9-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to fuchsia at the right.</p> +<table> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(153, 102, 153)"> </td> + <td style="background: rgb(204, 51, 204)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(153, 102, 153)"> </td> + <td style="background: rgb(204, 51, 204)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t424-hsl-values-b-9.html b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-9.html new file mode 100644 index 0000000000..eac48ff3d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t424-hsl-values-b-9.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: hsl() values</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="author" title="Intel" href="http://www.intel.com"> +<link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> +<link rel="match" href="t424-hsl-values-b-9-ref.html" /> +<meta name="assert" content="Implementation of algorithm for converting hsl() colors to rgb() colors." /> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> + <p>The following two matching (except the checkerboard at both ends to show where the rows are) rows of colors should change in two steps from nearly gray at the left to fuchsia at the right.</p> + <table> + <tr> + <td style="background: black"> </td> + <td style="background: hsl(300, 20%, 50%)"> </td> + <td style="background: hsl(300, 60%, 50%)"> </td> + <td style="background: hsl(300, 100%, 50%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(153, 102, 153)"> </td> + <td style="background: rgb(204, 51, 204)"> </td> + <td style="background: rgb(255, 0, 255)"> </td> + <td style="background: black"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-basic-a-ref.xht b/testing/web-platform/tests/css/css-color/t425-hsla-basic-a-ref.xht new file mode 100644 index 0000000000..bc21fe36a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-basic-a-ref.xht @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsla()</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Chris Lilley" href="https://svgees.us" /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + div { width: 12em; height: 12em; } + #one { background-color: hsla(120, 100%, 70%, 1.0); margin-bottom: 0 } + ]]></style> + </head> + <body> + <p>Test passes if you see a light green square.</p> + <div id="one"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-basic-a.xht b/testing/web-platform/tests/css/css-color/t425-hsla-basic-a.xht new file mode 100644 index 0000000000..435041b5fa --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-basic-a.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsla()</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Chris Lilley" href="https://svgees.us" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" /> + <link rel="match" href="t425-hsla-basic-a-ref.xht" /> + <meta name="assert" content="Test basic functioning of hsla() colors." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + div { width: 12em; height: 6em; } + #one { background-color: hsla(120, 100%, 70%, 1.0); margin-bottom: 0 } + #two { background-color: hsla(120, 100%, 50%, 0.6); margin-top:0 } + ]]></style> + /* + hsla(120, 100%, 70%, 1.0) is rgb(40% 100% 40%) + hsla(120, 100%, 50%, 0.6) is rgb(0% 100% 0% / 0.6) + composite rgb values at 60% over white in sRGB = rgb(40% 100% 40%) + BUT if compositing is done with used values, in device RGB + you will get a mismatch on WCG screen + because the red and blue components will not be zero + and the green will not be 100% + */ + </head> + <body> + <p>Test passes if you see a light green square.</p> + <div id="one"></div> + <div id="two"></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b-ref.html b/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b-ref.html new file mode 100644 index 0000000000..d35a608fb5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b-ref.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + body { background: white; color: black; } + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } +</style> +<body> + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + <p>Every row in this table should have both columns the same color:</p> + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td colspan='2' style="background: rgb(102, 102, 102)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 153, 153)"> </td> + </tr> + <tr> + <td colspan='2' style="background: white"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(153, 153, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(163, 102, 255)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(194, 194, 194)"> </td> + </tr> + <tr> + <td colspan='2' style="background: rgb(194, 194, 194)"> </td> + </tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b.xht b/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b.xht new file mode 100644 index 0000000000..d30cf8c483 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-clip-outside-device-gamut-b.xht @@ -0,0 +1,61 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsla() clipping outside device gamut</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" /> + <link rel="match" href="t425-hsla-clip-outside-device-gamut-b-ref.html" /> + <meta name="assert" content="Test clipping of hsla() values outside the device gamut." /> + <style type="text/css"><![CDATA[ + + body { background: white; color: black; } + table { border-spacing: 0 2px; padding: 0; border: none; } + td { border: none; padding: 0; height: 1.2em; } + + ]]></style> + </head> + <body> + + <p><strong>WARNING: This test assumes that the device gamut is sRGB + (as it will be for many CRT monitors).</strong></p> + + <p>Every row in this table should have both columns the same color:</p> + + <table> + <tr> + <th style="background:white; color: black">Column 1</th> + <th style="background:black; color: white">Column 2</th> + </tr> + <tr> + <td style="background: hsla(240, 100%, -100%, 0.6)"> </td> + <td style="background: rgb(102, 102, 102)"> </td> + </tr> + <tr> + <td style="background: hsla(240, 75%, -20%, 0.4)"> </td> + <td style="background: rgb(153, 153, 153)"> </td> + </tr> + <tr> + <td style="background: hsla(240, 75%, 120%, 0.6)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: hsla(240, 130%, 50%, 0.4)"> </td> + <td style="background: rgb(153, 153, 255)"> </td> + </tr> + <tr> + <td style="background: hsla(264, 130%, 50%, 0.6)"> </td> + <td style="background: rgb(163, 102, 255)"> </td> + </tr> + <tr> + <td style="background: hsla(0, -50%, 40%, 0.4)"> </td> + <td style="background: rgb(194, 194, 194)"> </td> + </tr> + <tr> + <td style="background: hsla(30, -50%, 60%, 0.6)"> </td> + <td style="background: rgb(194, 194, 194)"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-h-rotating-b-ref.html b/testing/web-platform/tests/css/css-color/t425-hsla-h-rotating-b-ref.html new file mode 100644 index 0000000000..2aec2f33e1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-h-rotating-b-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + #one { background: #FF0000; } + #two { background: rgba(255, 255, 0, 0.8); } + #three { background: rgba(0, 255, 0, 0.4); } + #four { background: rgba(0, 255, 255, 0.6); } + #five { background: rgba(0, 0, 255, 0.8); } + #six { background: rgba(255, 0, 255, 0.4); } +</style> +<body> + <p>Each column in the following table should have every cell the + same color, except for the checkerboard pattern at the right and + left used to indicate the row positions.</p> + + <table> + <tr> + <td style="background: white"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td id="one"> </td> + <td id="two"> </td> + <td id="three"> </td> + <td id="four"> </td> + <td id="five"> </td> + <td id="six"> </td> + <td style="background: white"> </td> + </tr> + </table> + +</body> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-h-rotating-b.xht b/testing/web-platform/tests/css/css-color/t425-hsla-h-rotating-b.xht new file mode 100644 index 0000000000..a192442be7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-h-rotating-b.xht @@ -0,0 +1,66 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: modding of H values in hsla() colors</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsl-color" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" /> + <link rel="match" href="t425-hsla-h-rotating-b-ref.html" /> + <meta name="assert" content="H values in hsla() colors should be treated like angles, even when outside [0,360)" /> + <style type="text/css"><![CDATA[ + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + ]]></style> + </head> + <body> + <p>Each column in the following table should have every cell the + same color, except for the checkerboard pattern at the right and + left used to indicate the row positions.</p> + + <table> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(0, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.4)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(-360, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(-300, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(-240, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(-180, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(-120, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(-60, 100%, 50%, 0.4)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(360, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(420, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(480, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(540, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(600, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(660, 100%, 50%, 0.4)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(6120, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(-9660, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(99840, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(-900, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(-104880, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(2820, 100%, 50%, 0.4)"> </td> + <td style="background: white"> </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-parsing-f.xht b/testing/web-platform/tests/css/css-color/t425-hsla-parsing-f.xht new file mode 100644 index 0000000000..67ce55f4ac --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-parsing-f.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsla()</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" /> + <link rel="match" href="t424-hsl-parsing-f-ref.html" /> + <meta name="flags" content="invalid" /> + <meta name="assert" content="Test rules for parsing of hsla() colors." /> + <style type="text/css"><![CDATA[ + html, body { background: white; } + p { color: hsla(120, 100%, 25%, 1.0); } + p { color: hsla(0, 100%, 25%, 1.0, 1.0); } + p { color: hsla(0, 100%, 25%, 1.0,); } + p { color: hsla(0, 255, 128, 1.0); } + p { color: hsla(0%, 100%, 50%, 1.0); } + p { color: hsla(0px, 100%, 50%, 1.0); } + ]]></style> + </head> + <body> + <p>This text should be dark green.</p> + + <div>Note: the rules tested by this test may be changed in + future levels of the CSS Color Module.</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-values-b-ref.html b/testing/web-platform/tests/css/css-color/t425-hsla-values-b-ref.html new file mode 100644 index 0000000000..11adfffb9f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-values-b-ref.html @@ -0,0 +1,506 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } +</style> +<body> +<p>The following table should have three matching rows changing (in 5 steps) from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: black"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 0%, 0%)"> </td> + <td style="background: rgb(60%, 0%, 0%)"> </td> + <td style="background: rgb(40%, 0%, 0%)"> </td> + <td style="background: rgb(20%, 0%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 0%, 0%)"> </td> + <td style="background: rgb(60%, 0%, 0%)"> </td> + <td style="background: rgb(40%, 0%, 0%)"> </td> + <td style="background: rgb(20%, 0%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 0%, 0%)"> </td> + <td style="background: rgb(60%, 0%, 0%)"> </td> + <td style="background: rgb(40%, 0%, 0%)"> </td> + <td style="background: rgb(20%, 0%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from red at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: white"> +<table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(100%, 20%, 20%)"> </td> + <td style="background: rgb(100%, 40%, 40%)"> </td> + <td style="background: rgb(100%, 60%, 60%)"> </td> + <td style="background: rgb(100%, 80%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(100%, 20%, 20%)"> </td> + <td style="background: rgb(100%, 40%, 40%)"> </td> + <td style="background: rgb(100%, 60%, 60%)"> </td> + <td style="background: rgb(100%, 80%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(100%, 20%, 20%)"> </td> + <td style="background: rgb(100%, 40%, 40%)"> </td> + <td style="background: rgb(100%, 60%, 60%)"> </td> + <td style="background: rgb(100%, 80%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: black"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(80%, 80%, 0%)"> </td> + <td style="background: rgb(60%, 60%, 0%)"> </td> + <td style="background: rgb(40%, 40%, 0%)"> </td> + <td style="background: rgb(20%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(80%, 80%, 0%)"> </td> + <td style="background: rgb(60%, 60%, 0%)"> </td> + <td style="background: rgb(40%, 40%, 0%)"> </td> + <td style="background: rgb(20%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(80%, 80%, 0%)"> </td> + <td style="background: rgb(60%, 60%, 0%)"> </td> + <td style="background: rgb(40%, 40%, 0%)"> </td> + <td style="background: rgb(20%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: white"> +<table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(100%, 100%, 20%)"> </td> + <td style="background: rgb(100%, 100%, 40%)"> </td> + <td style="background: rgb(100%, 100%, 60%)"> </td> + <td style="background: rgb(100%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(100%, 100%, 20%)"> </td> + <td style="background: rgb(100%, 100%, 40%)"> </td> + <td style="background: rgb(100%, 100%, 60%)"> </td> + <td style="background: rgb(100%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(100%, 100%, 20%)"> </td> + <td style="background: rgb(100%, 100%, 40%)"> </td> + <td style="background: rgb(100%, 100%, 60%)"> </td> + <td style="background: rgb(100%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: black"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 60%, 0%)"> </td> + <td style="background: rgb(0%, 40%, 0%)"> </td> + <td style="background: rgb(0%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 60%, 0%)"> </td> + <td style="background: rgb(0%, 40%, 0%)"> </td> + <td style="background: rgb(0%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 60%, 0%)"> </td> + <td style="background: rgb(0%, 40%, 0%)"> </td> + <td style="background: rgb(0%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from green at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: white"> +<table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(20%, 100%, 20%)"> </td> + <td style="background: rgb(40%, 100%, 40%)"> </td> + <td style="background: rgb(60%, 100%, 60%)"> </td> + <td style="background: rgb(80%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(20%, 100%, 20%)"> </td> + <td style="background: rgb(40%, 100%, 40%)"> </td> + <td style="background: rgb(60%, 100%, 60%)"> </td> + <td style="background: rgb(80%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(20%, 100%, 20%)"> </td> + <td style="background: rgb(40%, 100%, 40%)"> </td> + <td style="background: rgb(60%, 100%, 60%)"> </td> + <td style="background: rgb(80%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: black"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(0%, 80%, 80%)"> </td> + <td style="background: rgb(0%, 60%, 60%)"> </td> + <td style="background: rgb(0%, 40%, 40%)"> </td> + <td style="background: rgb(0%, 20%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(0%, 80%, 80%)"> </td> + <td style="background: rgb(0%, 60%, 60%)"> </td> + <td style="background: rgb(0%, 40%, 40%)"> </td> + <td style="background: rgb(0%, 20%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(0%, 80%, 80%)"> </td> + <td style="background: rgb(0%, 60%, 60%)"> </td> + <td style="background: rgb(0%, 40%, 40%)"> </td> + <td style="background: rgb(0%, 20%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: white"> +<table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(20%, 100%, 100%)"> </td> + <td style="background: rgb(40%, 100%, 100%)"> </td> + <td style="background: rgb(60%, 100%, 100%)"> </td> + <td style="background: rgb(80%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(20%, 100%, 100%)"> </td> + <td style="background: rgb(40%, 100%, 100%)"> </td> + <td style="background: rgb(60%, 100%, 100%)"> </td> + <td style="background: rgb(80%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(20%, 100%, 100%)"> </td> + <td style="background: rgb(40%, 100%, 100%)"> </td> + <td style="background: rgb(60%, 100%, 100%)"> </td> + <td style="background: rgb(80%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: black"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(0%, 0%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 60%)"> </td> + <td style="background: rgb(0%, 0%, 40%)"> </td> + <td style="background: rgb(0%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(0%, 0%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 60%)"> </td> + <td style="background: rgb(0%, 0%, 40%)"> </td> + <td style="background: rgb(0%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(0%, 0%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 60%)"> </td> + <td style="background: rgb(0%, 0%, 40%)"> </td> + <td style="background: rgb(0%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from blue at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: white"> +<table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 20%, 100%)"> </td> + <td style="background: rgb(40%, 40%, 100%)"> </td> + <td style="background: rgb(60%, 60%, 100%)"> </td> + <td style="background: rgb(80%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 20%, 100%)"> </td> + <td style="background: rgb(40%, 40%, 100%)"> </td> + <td style="background: rgb(60%, 60%, 100%)"> </td> + <td style="background: rgb(80%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 20%, 100%)"> </td> + <td style="background: rgb(40%, 40%, 100%)"> </td> + <td style="background: rgb(60%, 60%, 100%)"> </td> + <td style="background: rgb(80%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: black"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(80%, 0%, 80%)"> </td> + <td style="background: rgb(60%, 0%, 60%)"> </td> + <td style="background: rgb(40%, 0%, 40%)"> </td> + <td style="background: rgb(20%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(80%, 0%, 80%)"> </td> + <td style="background: rgb(60%, 0%, 60%)"> </td> + <td style="background: rgb(40%, 0%, 40%)"> </td> + <td style="background: rgb(20%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(80%, 0%, 80%)"> </td> + <td style="background: rgb(60%, 0%, 60%)"> </td> + <td style="background: rgb(40%, 0%, 40%)"> </td> + <td style="background: rgb(20%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> +</table> +</div> +<p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: white"> +<table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(100%, 20%, 100%)"> </td> + <td style="background: rgb(100%, 40%, 100%)"> </td> + <td style="background: rgb(100%, 60%, 100%)"> </td> + <td style="background: rgb(100%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(100%, 20%, 100%)"> </td> + <td style="background: rgb(100%, 40%, 100%)"> </td> + <td style="background: rgb(100%, 60%, 100%)"> </td> + <td style="background: rgb(100%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(100%, 20%, 100%)"> </td> + <td style="background: rgb(100%, 40%, 100%)"> </td> + <td style="background: rgb(100%, 60%, 100%)"> </td> + <td style="background: rgb(100%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have two matching rows changing (in 5 steps) from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: lime"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 20%, 0%)"> </td> + <td style="background: rgb(60%, 40%, 0%)"> </td> + <td style="background: rgb(40%, 60%, 0%)"> </td> + <td style="background: rgb(20%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 20%, 0%)"> </td> + <td style="background: rgb(60%, 40%, 0%)"> </td> + <td style="background: rgb(40%, 60%, 0%)"> </td> + <td style="background: rgb(20%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have two matching rows changing (in 5 steps) from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: blue"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 20%)"> </td> + <td style="background: rgb(0%, 60%, 40%)"> </td> + <td style="background: rgb(0%, 40%, 60%)"> </td> + <td style="background: rgb(0%, 20%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 20%)"> </td> + <td style="background: rgb(0%, 60%, 40%)"> </td> + <td style="background: rgb(0%, 40%, 60%)"> </td> + <td style="background: rgb(0%, 20%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +<p>The following table should have two matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> +<div style="background: red"> +<table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 0%, 80%)"> </td> + <td style="background: rgb(40%, 0%, 60%)"> </td> + <td style="background: rgb(60%, 0%, 40%)"> </td> + <td style="background: rgb(80%, 0%, 20%)"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 0%, 80%)"> </td> + <td style="background: rgb(40%, 0%, 60%)"> </td> + <td style="background: rgb(60%, 0%, 40%)"> </td> + <td style="background: rgb(80%, 0%, 20%)"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> +</table> +</div> +</body> diff --git a/testing/web-platform/tests/css/css-color/t425-hsla-values-b.xht b/testing/web-platform/tests/css/css-color/t425-hsla-values-b.xht new file mode 100644 index 0000000000..27ed578652 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t425-hsla-values-b.xht @@ -0,0 +1,544 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: hsla() values</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#hsla-color" /> + <link rel="match" href="t425-hsla-values-b-ref.html" /> + <meta name="assert" content="Implementation of algorithm for converting hsla() colors to rgba() colors." /> + <style type="text/css"><![CDATA[ + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + td { width: 1.2em; height: 1.2em; } + ]]></style> + </head> + <body> + + <p>The following table should have three matching rows changing (in 5 steps) from red at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(0, 100%, 50%, 1)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(0, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(0, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 40%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 30%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 20%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 10%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 0%, 0%)"> </td> + <td style="background: rgb(60%, 0%, 0%)"> </td> + <td style="background: rgb(40%, 0%, 0%)"> </td> + <td style="background: rgb(20%, 0%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from red at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(0, 100%, 50%, 1)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(0, 100%, 50%, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(0, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 60%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 70%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 80%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 90%, 1.0)"> </td> + <td style="background: hsla(0, 100%, 100%, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(100%, 20%, 20%)"> </td> + <td style="background: rgb(100%, 40%, 40%)"> </td> + <td style="background: rgb(100%, 60%, 60%)"> </td> + <td style="background: rgb(100%, 80%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(60, 100%, 50%, 1)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(60, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(60, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 40%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 30%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 20%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 10%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(80%, 80%, 0%)"> </td> + <td style="background: rgb(60%, 60%, 0%)"> </td> + <td style="background: rgb(40%, 40%, 0%)"> </td> + <td style="background: rgb(20%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from yellow at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(60, 100%, 50%, 1)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(60, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(60, 100%, 50%, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(60, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 60%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 70%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 80%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 90%, 1.0)"> </td> + <td style="background: hsla(60, 100%, 100%, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 100%, 0%)"> </td> + <td style="background: rgb(100%, 100%, 20%)"> </td> + <td style="background: rgb(100%, 100%, 40%)"> </td> + <td style="background: rgb(100%, 100%, 60%)"> </td> + <td style="background: rgb(100%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from green at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(120, 100%, 50%, 1)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(120, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(120, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 40%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 30%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 20%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 10%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 60%, 0%)"> </td> + <td style="background: rgb(0%, 40%, 0%)"> </td> + <td style="background: rgb(0%, 20%, 0%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from green at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(120, 100%, 50%, 1)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(120, 100%, 50%, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(120, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 60%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 70%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 80%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 90%, 1.0)"> </td> + <td style="background: hsla(120, 100%, 100%, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(20%, 100%, 20%)"> </td> + <td style="background: rgb(40%, 100%, 40%)"> </td> + <td style="background: rgb(60%, 100%, 60%)"> </td> + <td style="background: rgb(80%, 100%, 80%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(180, 100%, 50%, 1)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(180, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(180, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 40%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 30%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 20%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 10%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(0%, 80%, 80%)"> </td> + <td style="background: rgb(0%, 60%, 60%)"> </td> + <td style="background: rgb(0%, 40%, 40%)"> </td> + <td style="background: rgb(0%, 20%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from aqua at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(180, 100%, 50%, 1)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(180, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(180, 100%, 50%, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(180, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 60%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 70%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 80%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 90%, 1.0)"> </td> + <td style="background: hsla(180, 100%, 100%, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 100%)"> </td> + <td style="background: rgb(20%, 100%, 100%)"> </td> + <td style="background: rgb(40%, 100%, 100%)"> </td> + <td style="background: rgb(60%, 100%, 100%)"> </td> + <td style="background: rgb(80%, 100%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from blue at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(240, 100%, 50%, 1)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(240, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(240, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 40%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 30%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 20%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 10%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(0%, 0%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 60%)"> </td> + <td style="background: rgb(0%, 0%, 40%)"> </td> + <td style="background: rgb(0%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from blue at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(240, 100%, 50%, 1)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(240, 100%, 50%, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(240, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 60%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 70%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 80%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 90%, 1.0)"> </td> + <td style="background: hsla(240, 100%, 100%, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 20%, 100%)"> </td> + <td style="background: rgb(40%, 40%, 100%)"> </td> + <td style="background: rgb(60%, 60%, 100%)"> </td> + <td style="background: rgb(80%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to black at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: black"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(300, 100%, 50%, 1)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(300, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(300, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 40%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 30%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 20%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 10%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 0%, 1.0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(80%, 0%, 80%)"> </td> + <td style="background: rgb(60%, 0%, 60%)"> </td> + <td style="background: rgb(40%, 0%, 40%)"> </td> + <td style="background: rgb(20%, 0%, 20%)"> </td> + <td style="background: rgb(0%, 0%, 0%)"> </td> + <td style="background: white"> </td> + </tr> + </table> + </div> + + <p>The following table should have three matching rows changing (in 5 steps) from fuchsia at the left to white at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: white"> + <table border="border"> + <tr> + <td style="background: white"> </td> + <td style="background: hsla(300, 100%, 50%, 1)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(300, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(300, 100%, 50%, 0)"> </td> + <td style="background: black"> </td> + </tr> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(300, 100%, 50%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 60%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 70%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 80%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 90%, 1.0)"> </td> + <td style="background: hsla(300, 100%, 100%, 1.0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 100%)"> </td> + <td style="background: rgb(100%, 20%, 100%)"> </td> + <td style="background: rgb(100%, 40%, 100%)"> </td> + <td style="background: rgb(100%, 60%, 100%)"> </td> + <td style="background: rgb(100%, 80%, 100%)"> </td> + <td style="background: rgb(100%, 100%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have two matching rows changing (in 5 steps) from red at the left to green at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: lime"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(0, 100%, 50%, 1)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(0, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(0, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: rgb(80%, 20%, 0%)"> </td> + <td style="background: rgb(60%, 40%, 0%)"> </td> + <td style="background: rgb(40%, 60%, 0%)"> </td> + <td style="background: rgb(20%, 80%, 0%)"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have two matching rows changing (in 5 steps) from green at the left to blue at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: blue"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(120, 100%, 50%, 1)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(120, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(120, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 100%, 0%)"> </td> + <td style="background: rgb(0%, 80%, 20%)"> </td> + <td style="background: rgb(0%, 60%, 40%)"> </td> + <td style="background: rgb(0%, 40%, 60%)"> </td> + <td style="background: rgb(0%, 20%, 80%)"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + <p>The following table should have two matching rows changing (in 5 steps) from blue at the left to red at the right (plus a checkerboard at both ends to show where the rows are):</p> + + <div style="background: red"> + <table border="border"> + <tr> + <td style="background: black"> </td> + <td style="background: hsla(240, 100%, 50%, 1)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.8)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.6)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.4)"> </td> + <td style="background: hsla(240, 100%, 50%, 0.2)"> </td> + <td style="background: hsla(240, 100%, 50%, 0)"> </td> + <td style="background: white"> </td> + </tr> + <tr> + <td style="background: white"> </td> + <td style="background: rgb(0%, 0%, 100%)"> </td> + <td style="background: rgb(20%, 0%, 80%)"> </td> + <td style="background: rgb(40%, 0%, 60%)"> </td> + <td style="background: rgb(60%, 0%, 40%)"> </td> + <td style="background: rgb(80%, 0%, 20%)"> </td> + <td style="background: rgb(100%, 0%, 0%)"> </td> + <td style="background: black"> </td> + </tr> + </table> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t43-svg-keywords-a-ref.html b/testing/web-platform/tests/css/css-color/t43-svg-keywords-a-ref.html new file mode 100644 index 0000000000..cd26c49dc1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t43-svg-keywords-a-ref.html @@ -0,0 +1,165 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + html, body { background: #dddddd; color: #000000; } + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } +</style> +<body> + <p>Each row in the following table (except the first and last, to show where the columns are) should have two cells with the same background color. None of them should match the background of the page.</p> + + <table> + <tr><td style="background: black"> </td><td style="background: white"> </td></tr> + + <tr><td style="background: #f0f8ff" colspan=2> </td> + <tr><td style="background: #faebd7" colspan=2> </td> + <tr><td style="background: #00ffff" colspan=2> </td> + <tr><td style="background: #7fffd4" colspan=2> </td> + <tr><td style="background: #f0ffff" colspan=2> </td> + <tr><td style="background: #f5f5dc" colspan=2> </td> + <tr><td style="background: #ffe4c4" colspan=2> </td> + <tr><td style="background: #000000" colspan=2> </td> + <tr><td style="background: #ffebcd" colspan=2> </td> + <tr><td style="background: #0000ff" colspan=2> </td> + <tr><td style="background: #8a2be2" colspan=2> </td> + <tr><td style="background: #a52a2a" colspan=2> </td> + <tr><td style="background: #deb887" colspan=2> </td> + <tr><td style="background: #5f9ea0" colspan=2> </td> + <tr><td style="background: #7fff00" colspan=2> </td> + <tr><td style="background: #d2691e" colspan=2> </td> + <tr><td style="background: #ff7f50" colspan=2> </td> + <tr><td style="background: #6495ed" colspan=2> </td> + <tr><td style="background: #fff8dc" colspan=2> </td> + <tr><td style="background: #dc143c" colspan=2> </td> + <tr><td style="background: #00ffff" colspan=2> </td> + <tr><td style="background: #00008b" colspan=2> </td> + <tr><td style="background: #008b8b" colspan=2> </td> + <tr><td style="background: #b8860b" colspan=2> </td> + <tr><td style="background: #a9a9a9" colspan=2> </td> + <tr><td style="background: #006400" colspan=2> </td> + <tr><td style="background: #a9a9a9" colspan=2> </td> + <tr><td style="background: #bdb76b" colspan=2> </td> + <tr><td style="background: #8b008b" colspan=2> </td> + <tr><td style="background: #556b2f" colspan=2> </td> + <tr><td style="background: #ff8c00" colspan=2> </td> + <tr><td style="background: #9932cc" colspan=2> </td> + <tr><td style="background: #8b0000" colspan=2> </td> + <tr><td style="background: #e9967a" colspan=2> </td> + <tr><td style="background: #8fbc8f" colspan=2> </td> + <tr><td style="background: #483d8b" colspan=2> </td> + <tr><td style="background: #2f4f4f" colspan=2> </td> + <tr><td style="background: #2f4f4f" colspan=2> </td> + <tr><td style="background: #00ced1" colspan=2> </td> + <tr><td style="background: #9400d3" colspan=2> </td> + <tr><td style="background: #ff1493" colspan=2> </td> + <tr><td style="background: #00bfff" colspan=2> </td> + <tr><td style="background: #696969" colspan=2> </td> + <tr><td style="background: #696969" colspan=2> </td> + <tr><td style="background: #1e90ff" colspan=2> </td> + <tr><td style="background: #b22222" colspan=2> </td> + <tr><td style="background: #fffaf0" colspan=2> </td> + <tr><td style="background: #228b22" colspan=2> </td> + <tr><td style="background: #ff00ff" colspan=2> </td> + <tr><td style="background: #dcdcdc" colspan=2> </td> + <tr><td style="background: #f8f8ff" colspan=2> </td> + <tr><td style="background: #ffd700" colspan=2> </td> + <tr><td style="background: #daa520" colspan=2> </td> + <tr><td style="background: #808080" colspan=2> </td> + <tr><td style="background: #008000" colspan=2> </td> + <tr><td style="background: #adff2f" colspan=2> </td> + <tr><td style="background: #808080" colspan=2> </td> + <tr><td style="background: #f0fff0" colspan=2> </td> + <tr><td style="background: #ff69b4" colspan=2> </td> + <tr><td style="background: #cd5c5c" colspan=2> </td> + <tr><td style="background: #4b0082" colspan=2> </td> + <tr><td style="background: #fffff0" colspan=2> </td> + <tr><td style="background: #f0e68c" colspan=2> </td> + <tr><td style="background: #e6e6fa" colspan=2> </td> + <tr><td style="background: #fff0f5" colspan=2> </td> + <tr><td style="background: #7cfc00" colspan=2> </td> + <tr><td style="background: #fffacd" colspan=2> </td> + <tr><td style="background: #add8e6" colspan=2> </td> + <tr><td style="background: #f08080" colspan=2> </td> + <tr><td style="background: #e0ffff" colspan=2> </td> + <tr><td style="background: #fafad2" colspan=2> </td> + <tr><td style="background: #d3d3d3" colspan=2> </td> + <tr><td style="background: #90ee90" colspan=2> </td> + <tr><td style="background: #d3d3d3" colspan=2> </td> + <tr><td style="background: #ffb6c1" colspan=2> </td> + <tr><td style="background: #ffa07a" colspan=2> </td> + <tr><td style="background: #20b2aa" colspan=2> </td> + <tr><td style="background: #87cefa" colspan=2> </td> + <tr><td style="background: #778899" colspan=2> </td> + <tr><td style="background: #778899" colspan=2> </td> + <tr><td style="background: #b0c4de" colspan=2> </td> + <tr><td style="background: #ffffe0" colspan=2> </td> + <tr><td style="background: #00ff00" colspan=2> </td> + <tr><td style="background: #32cd32" colspan=2> </td> + <tr><td style="background: #faf0e6" colspan=2> </td> + <tr><td style="background: #ff00ff" colspan=2> </td> + <tr><td style="background: #800000" colspan=2> </td> + <tr><td style="background: #66cdaa" colspan=2> </td> + <tr><td style="background: #0000cd" colspan=2> </td> + <tr><td style="background: #ba55d3" colspan=2> </td> + <tr><td style="background: #9370db" colspan=2> </td> + <tr><td style="background: #3cb371" colspan=2> </td> + <tr><td style="background: #7b68ee" colspan=2> </td> + <tr><td style="background: #00fa9a" colspan=2> </td> + <tr><td style="background: #48d1cc" colspan=2> </td> + <tr><td style="background: #c71585" colspan=2> </td> + <tr><td style="background: #191970" colspan=2> </td> + <tr><td style="background: #f5fffa" colspan=2> </td> + <tr><td style="background: #ffe4e1" colspan=2> </td> + <tr><td style="background: #ffe4b5" colspan=2> </td> + <tr><td style="background: #ffdead" colspan=2> </td> + <tr><td style="background: #000080" colspan=2> </td> + <tr><td style="background: #fdf5e6" colspan=2> </td> + <tr><td style="background: #808000" colspan=2> </td> + <tr><td style="background: #6b8e23" colspan=2> </td> + <tr><td style="background: #ffa500" colspan=2> </td> + <tr><td style="background: #ff4500" colspan=2> </td> + <tr><td style="background: #da70d6" colspan=2> </td> + <tr><td style="background: #eee8aa" colspan=2> </td> + <tr><td style="background: #98fb98" colspan=2> </td> + <tr><td style="background: #afeeee" colspan=2> </td> + <tr><td style="background: #db7093" colspan=2> </td> + <tr><td style="background: #ffefd5" colspan=2> </td> + <tr><td style="background: #ffdab9" colspan=2> </td> + <tr><td style="background: #cd853f" colspan=2> </td> + <tr><td style="background: #ffc0cb" colspan=2> </td> + <tr><td style="background: #dda0dd" colspan=2> </td> + <tr><td style="background: #b0e0e6" colspan=2> </td> + <tr><td style="background: #800080" colspan=2> </td> + <tr><td style="background: #ff0000" colspan=2> </td> + <tr><td style="background: #bc8f8f" colspan=2> </td> + <tr><td style="background: #4169e1" colspan=2> </td> + <tr><td style="background: #8b4513" colspan=2> </td> + <tr><td style="background: #fa8072" colspan=2> </td> + <tr><td style="background: #f4a460" colspan=2> </td> + <tr><td style="background: #2e8b57" colspan=2> </td> + <tr><td style="background: #fff5ee" colspan=2> </td> + <tr><td style="background: #a0522d" colspan=2> </td> + <tr><td style="background: #c0c0c0" colspan=2> </td> + <tr><td style="background: #87ceeb" colspan=2> </td> + <tr><td style="background: #6a5acd" colspan=2> </td> + <tr><td style="background: #708090" colspan=2> </td> + <tr><td style="background: #708090" colspan=2> </td> + <tr><td style="background: #fffafa" colspan=2> </td> + <tr><td style="background: #00ff7f" colspan=2> </td> + <tr><td style="background: #4682b4" colspan=2> </td> + <tr><td style="background: #d2b48c" colspan=2> </td> + <tr><td style="background: #008080" colspan=2> </td> + <tr><td style="background: #d8bfd8" colspan=2> </td> + <tr><td style="background: #ff6347" colspan=2> </td> + <tr><td style="background: #40e0d0" colspan=2> </td> + <tr><td style="background: #ee82ee" colspan=2> </td> + <tr><td style="background: #f5deb3" colspan=2> </td> + <tr><td style="background: #ffffff" colspan=2> </td> + <tr><td style="background: #f5f5f5" colspan=2> </td> + <tr><td style="background: #ffff00" colspan=2> </td> + <tr><td style="background: #9acd32" colspan=2> </td> + + <tr><td style="background: white"> </td><td style="background: black"> </td></tr> + </table> +</body> diff --git a/testing/web-platform/tests/css/css-color/t43-svg-keywords-a.xht b/testing/web-platform/tests/css/css-color/t43-svg-keywords-a.xht new file mode 100644 index 0000000000..9066863c9b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t43-svg-keywords-a.xht @@ -0,0 +1,175 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: HTML4 color keywords</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#html4" /> + <link rel="match" href="t43-svg-keywords-a-ref.html" /> + <meta name="assert" content="Test that the HTML4 color keywords have the correct values." /> + <style type="text/css"><![CDATA[ + html, body { background: #dddddd; color: #000000; } + table { border-spacing: 0; padding: 0; border: none; } + td { border: none; padding: 0; } + ]]></style> + </head> + <body> + + <p>Each row in the following table (except the first and last, to show where the columns are) should have two cells with the same background color. None of them should match the background of the page.</p> + + <table> + <tr><td style="background: black"> </td><td style="background: white"> </td></tr> + + <tr><td style="background: aliceblue"> </td> <td style="background: #f0f8ff"> </td></tr> + <tr><td style="background: antiquewhite"> </td> <td style="background: #faebd7"> </td></tr> + <tr><td style="background: aqua"> </td> <td style="background: #00ffff"> </td></tr> + <tr><td style="background: aquamarine"> </td> <td style="background: #7fffd4"> </td></tr> + <tr><td style="background: azure"> </td> <td style="background: #f0ffff"> </td></tr> + <tr><td style="background: beige"> </td> <td style="background: #f5f5dc"> </td></tr> + <tr><td style="background: bisque"> </td> <td style="background: #ffe4c4"> </td></tr> + <tr><td style="background: black"> </td> <td style="background: #000000"> </td></tr> + <tr><td style="background: blanchedalmond"> </td> <td style="background: #ffebcd"> </td></tr> + <tr><td style="background: blue"> </td> <td style="background: #0000ff"> </td></tr> + <tr><td style="background: blueviolet"> </td> <td style="background: #8a2be2"> </td></tr> + <tr><td style="background: brown"> </td> <td style="background: #a52a2a"> </td></tr> + <tr><td style="background: burlywood"> </td> <td style="background: #deb887"> </td></tr> + <tr><td style="background: cadetblue"> </td> <td style="background: #5f9ea0"> </td></tr> + <tr><td style="background: chartreuse"> </td> <td style="background: #7fff00"> </td></tr> + <tr><td style="background: chocolate"> </td> <td style="background: #d2691e"> </td></tr> + <tr><td style="background: coral"> </td> <td style="background: #ff7f50"> </td></tr> + <tr><td style="background: cornflowerblue"> </td> <td style="background: #6495ed"> </td></tr> + <tr><td style="background: cornsilk"> </td> <td style="background: #fff8dc"> </td></tr> + <tr><td style="background: crimson"> </td> <td style="background: #dc143c"> </td></tr> + <tr><td style="background: cyan"> </td> <td style="background: #00ffff"> </td></tr> + <tr><td style="background: darkblue"> </td> <td style="background: #00008b"> </td></tr> + <tr><td style="background: darkcyan"> </td> <td style="background: #008b8b"> </td></tr> + <tr><td style="background: darkgoldenrod"> </td> <td style="background: #b8860b"> </td></tr> + <tr><td style="background: darkgray"> </td> <td style="background: #a9a9a9"> </td></tr> + <tr><td style="background: darkgreen"> </td> <td style="background: #006400"> </td></tr> + <tr><td style="background: darkgrey"> </td> <td style="background: #a9a9a9"> </td></tr> + <tr><td style="background: darkkhaki"> </td> <td style="background: #bdb76b"> </td></tr> + <tr><td style="background: darkmagenta"> </td> <td style="background: #8b008b"> </td></tr> + <tr><td style="background: darkolivegreen"> </td> <td style="background: #556b2f"> </td></tr> + <tr><td style="background: darkorange"> </td> <td style="background: #ff8c00"> </td></tr> + <tr><td style="background: darkorchid"> </td> <td style="background: #9932cc"> </td></tr> + <tr><td style="background: darkred"> </td> <td style="background: #8b0000"> </td></tr> + <tr><td style="background: darksalmon"> </td> <td style="background: #e9967a"> </td></tr> + <tr><td style="background: darkseagreen"> </td> <td style="background: #8fbc8f"> </td></tr> + <tr><td style="background: darkslateblue"> </td> <td style="background: #483d8b"> </td></tr> + <tr><td style="background: darkslategray"> </td> <td style="background: #2f4f4f"> </td></tr> + <tr><td style="background: darkslategrey"> </td> <td style="background: #2f4f4f"> </td></tr> + <tr><td style="background: darkturquoise"> </td> <td style="background: #00ced1"> </td></tr> + <tr><td style="background: darkviolet"> </td> <td style="background: #9400d3"> </td></tr> + <tr><td style="background: deeppink"> </td> <td style="background: #ff1493"> </td></tr> + <tr><td style="background: deepskyblue"> </td> <td style="background: #00bfff"> </td></tr> + <tr><td style="background: dimgray"> </td> <td style="background: #696969"> </td></tr> + <tr><td style="background: dimgrey"> </td> <td style="background: #696969"> </td></tr> + <tr><td style="background: dodgerblue"> </td> <td style="background: #1e90ff"> </td></tr> + <tr><td style="background: firebrick"> </td> <td style="background: #b22222"> </td></tr> + <tr><td style="background: floralwhite"> </td> <td style="background: #fffaf0"> </td></tr> + <tr><td style="background: forestgreen"> </td> <td style="background: #228b22"> </td></tr> + <tr><td style="background: fuchsia"> </td> <td style="background: #ff00ff"> </td></tr> + <tr><td style="background: gainsboro"> </td> <td style="background: #dcdcdc"> </td></tr> + <tr><td style="background: ghostwhite"> </td> <td style="background: #f8f8ff"> </td></tr> + <tr><td style="background: gold"> </td> <td style="background: #ffd700"> </td></tr> + <tr><td style="background: goldenrod"> </td> <td style="background: #daa520"> </td></tr> + <tr><td style="background: gray"> </td> <td style="background: #808080"> </td></tr> + <tr><td style="background: green"> </td> <td style="background: #008000"> </td></tr> + <tr><td style="background: greenyellow"> </td> <td style="background: #adff2f"> </td></tr> + <tr><td style="background: grey"> </td> <td style="background: #808080"> </td></tr> + <tr><td style="background: honeydew"> </td> <td style="background: #f0fff0"> </td></tr> + <tr><td style="background: hotpink"> </td> <td style="background: #ff69b4"> </td></tr> + <tr><td style="background: indianred"> </td> <td style="background: #cd5c5c"> </td></tr> + <tr><td style="background: indigo"> </td> <td style="background: #4b0082"> </td></tr> + <tr><td style="background: ivory"> </td> <td style="background: #fffff0"> </td></tr> + <tr><td style="background: khaki"> </td> <td style="background: #f0e68c"> </td></tr> + <tr><td style="background: lavender"> </td> <td style="background: #e6e6fa"> </td></tr> + <tr><td style="background: lavenderblush"> </td> <td style="background: #fff0f5"> </td></tr> + <tr><td style="background: lawngreen"> </td> <td style="background: #7cfc00"> </td></tr> + <tr><td style="background: lemonchiffon"> </td> <td style="background: #fffacd"> </td></tr> + <tr><td style="background: lightblue"> </td> <td style="background: #add8e6"> </td></tr> + <tr><td style="background: lightcoral"> </td> <td style="background: #f08080"> </td></tr> + <tr><td style="background: lightcyan"> </td> <td style="background: #e0ffff"> </td></tr> + <tr><td style="background: lightgoldenrodyellow"> </td> <td style="background: #fafad2"> </td></tr> + <tr><td style="background: lightgray"> </td> <td style="background: #d3d3d3"> </td></tr> + <tr><td style="background: lightgreen"> </td> <td style="background: #90ee90"> </td></tr> + <tr><td style="background: lightgrey"> </td> <td style="background: #d3d3d3"> </td></tr> + <tr><td style="background: lightpink"> </td> <td style="background: #ffb6c1"> </td></tr> + <tr><td style="background: lightsalmon"> </td> <td style="background: #ffa07a"> </td></tr> + <tr><td style="background: lightseagreen"> </td> <td style="background: #20b2aa"> </td></tr> + <tr><td style="background: lightskyblue"> </td> <td style="background: #87cefa"> </td></tr> + <tr><td style="background: lightslategray"> </td> <td style="background: #778899"> </td></tr> + <tr><td style="background: lightslategrey"> </td> <td style="background: #778899"> </td></tr> + <tr><td style="background: lightsteelblue"> </td> <td style="background: #b0c4de"> </td></tr> + <tr><td style="background: lightyellow"> </td> <td style="background: #ffffe0"> </td></tr> + <tr><td style="background: lime"> </td> <td style="background: #00ff00"> </td></tr> + <tr><td style="background: limegreen"> </td> <td style="background: #32cd32"> </td></tr> + <tr><td style="background: linen"> </td> <td style="background: #faf0e6"> </td></tr> + <tr><td style="background: magenta"> </td> <td style="background: #ff00ff"> </td></tr> + <tr><td style="background: maroon"> </td> <td style="background: #800000"> </td></tr> + <tr><td style="background: mediumaquamarine"> </td> <td style="background: #66cdaa"> </td></tr> + <tr><td style="background: mediumblue"> </td> <td style="background: #0000cd"> </td></tr> + <tr><td style="background: mediumorchid"> </td> <td style="background: #ba55d3"> </td></tr> + <tr><td style="background: mediumpurple"> </td> <td style="background: #9370db"> </td></tr> + <tr><td style="background: mediumseagreen"> </td> <td style="background: #3cb371"> </td></tr> + <tr><td style="background: mediumslateblue"> </td> <td style="background: #7b68ee"> </td></tr> + <tr><td style="background: mediumspringgreen"> </td> <td style="background: #00fa9a"> </td></tr> + <tr><td style="background: mediumturquoise"> </td> <td style="background: #48d1cc"> </td></tr> + <tr><td style="background: mediumvioletred"> </td> <td style="background: #c71585"> </td></tr> + <tr><td style="background: midnightblue"> </td> <td style="background: #191970"> </td></tr> + <tr><td style="background: mintcream"> </td> <td style="background: #f5fffa"> </td></tr> + <tr><td style="background: mistyrose"> </td> <td style="background: #ffe4e1"> </td></tr> + <tr><td style="background: moccasin"> </td> <td style="background: #ffe4b5"> </td></tr> + <tr><td style="background: navajowhite"> </td> <td style="background: #ffdead"> </td></tr> + <tr><td style="background: navy"> </td> <td style="background: #000080"> </td></tr> + <tr><td style="background: oldlace"> </td> <td style="background: #fdf5e6"> </td></tr> + <tr><td style="background: olive"> </td> <td style="background: #808000"> </td></tr> + <tr><td style="background: olivedrab"> </td> <td style="background: #6b8e23"> </td></tr> + <tr><td style="background: orange"> </td> <td style="background: #ffa500"> </td></tr> + <tr><td style="background: orangered"> </td> <td style="background: #ff4500"> </td></tr> + <tr><td style="background: orchid"> </td> <td style="background: #da70d6"> </td></tr> + <tr><td style="background: palegoldenrod"> </td> <td style="background: #eee8aa"> </td></tr> + <tr><td style="background: palegreen"> </td> <td style="background: #98fb98"> </td></tr> + <tr><td style="background: paleturquoise"> </td> <td style="background: #afeeee"> </td></tr> + <tr><td style="background: palevioletred"> </td> <td style="background: #db7093"> </td></tr> + <tr><td style="background: papayawhip"> </td> <td style="background: #ffefd5"> </td></tr> + <tr><td style="background: peachpuff"> </td> <td style="background: #ffdab9"> </td></tr> + <tr><td style="background: peru"> </td> <td style="background: #cd853f"> </td></tr> + <tr><td style="background: pink"> </td> <td style="background: #ffc0cb"> </td></tr> + <tr><td style="background: plum"> </td> <td style="background: #dda0dd"> </td></tr> + <tr><td style="background: powderblue"> </td> <td style="background: #b0e0e6"> </td></tr> + <tr><td style="background: purple"> </td> <td style="background: #800080"> </td></tr> + <tr><td style="background: red"> </td> <td style="background: #ff0000"> </td></tr> + <tr><td style="background: rosybrown"> </td> <td style="background: #bc8f8f"> </td></tr> + <tr><td style="background: royalblue"> </td> <td style="background: #4169e1"> </td></tr> + <tr><td style="background: saddlebrown"> </td> <td style="background: #8b4513"> </td></tr> + <tr><td style="background: salmon"> </td> <td style="background: #fa8072"> </td></tr> + <tr><td style="background: sandybrown"> </td> <td style="background: #f4a460"> </td></tr> + <tr><td style="background: seagreen"> </td> <td style="background: #2e8b57"> </td></tr> + <tr><td style="background: seashell"> </td> <td style="background: #fff5ee"> </td></tr> + <tr><td style="background: sienna"> </td> <td style="background: #a0522d"> </td></tr> + <tr><td style="background: silver"> </td> <td style="background: #c0c0c0"> </td></tr> + <tr><td style="background: skyblue"> </td> <td style="background: #87ceeb"> </td></tr> + <tr><td style="background: slateblue"> </td> <td style="background: #6a5acd"> </td></tr> + <tr><td style="background: slategray"> </td> <td style="background: #708090"> </td></tr> + <tr><td style="background: slategrey"> </td> <td style="background: #708090"> </td></tr> + <tr><td style="background: snow"> </td> <td style="background: #fffafa"> </td></tr> + <tr><td style="background: springgreen"> </td> <td style="background: #00ff7f"> </td></tr> + <tr><td style="background: steelblue"> </td> <td style="background: #4682b4"> </td></tr> + <tr><td style="background: tan"> </td> <td style="background: #d2b48c"> </td></tr> + <tr><td style="background: teal"> </td> <td style="background: #008080"> </td></tr> + <tr><td style="background: thistle"> </td> <td style="background: #d8bfd8"> </td></tr> + <tr><td style="background: tomato"> </td> <td style="background: #ff6347"> </td></tr> + <tr><td style="background: turquoise"> </td> <td style="background: #40e0d0"> </td></tr> + <tr><td style="background: violet"> </td> <td style="background: #ee82ee"> </td></tr> + <tr><td style="background: wheat"> </td> <td style="background: #f5deb3"> </td></tr> + <tr><td style="background: white"> </td> <td style="background: #ffffff"> </td></tr> + <tr><td style="background: whitesmoke"> </td> <td style="background: #f5f5f5"> </td></tr> + <tr><td style="background: yellow"> </td> <td style="background: #ffff00"> </td></tr> + <tr><td style="background: yellowgreen"> </td> <td style="background: #9acd32"> </td></tr> + + <tr><td style="background: white"> </td><td style="background: black"> </td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t44-currentcolor-background-b-ref.html b/testing/web-platform/tests/css/css-color/t44-currentcolor-background-b-ref.html new file mode 100644 index 0000000000..136fdf4569 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t44-currentcolor-background-b-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + #two { + color: green; + background: green; + } + #three { + color: green; + background: green; + } +</style> +<body> + <p>This paragraph should be followed by two green blocks.</p> + <p id="two">This text should NOT be visible.</p> + <p id="three">This text should NOT be visible.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t44-currentcolor-background-b.xht b/testing/web-platform/tests/css/css-color/t44-currentcolor-background-b.xht new file mode 100644 index 0000000000..816d622e8f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t44-currentcolor-background-b.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: currentColor (with 'background-color')</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor" /> + <link rel="match" href="t44-currentcolor-background-b-ref.html" /> + <meta name="assert" content="currentColor uses the color from the color property" /> + <style type="text/css"><![CDATA[ + #two { + color: green; + background: red; + background: currentcolor; + } + #three { + color: green; + background-color: red; + background-color: currentColor; + } + ]]></style> + </head> + <body> + <p>This paragraph should be followed by two green blocks.</p> + <p id="two">This text should NOT be visible.</p> + <p id="three">This text should NOT be visible.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t44-currentcolor-border-b-ref.html b/testing/web-platform/tests/css/css-color/t44-currentcolor-border-b-ref.html new file mode 100644 index 0000000000..30d6e754a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t44-currentcolor-border-b-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<link rel="author" title="Intel" href="http://www.intel.com"> +<style> + p { + color: green; + border: medium solid green; + } +</style> +<body> + <p>This paragraph should have a green border.</p> + <p>This paragraph should have a green border.</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/t44-currentcolor-border-b.xht b/testing/web-platform/tests/css/css-color/t44-currentcolor-border-b.xht new file mode 100644 index 0000000000..3d7441e5f5 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t44-currentcolor-border-b.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: currentColor (with 'border-color')</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor" /> + <link rel="match" href="t44-currentcolor-border-b-ref.html" /> + <meta name="assert" content="currentColor uses the color from the color property" /> + <style type="text/css"><![CDATA[ + #one { + color: green; + border: medium solid red; + border: medium solid currentColor; + } + #two { + color: green; + border: medium solid red; + border-color: currentcolor; + } + ]]></style> + </head> + <body> + <p id="one">This paragraph should have a green border.</p> + <p id="two">This paragraph should have a green border.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t44-currentcolor-inherited-c-ref.xht b/testing/web-platform/tests/css/css-color/t44-currentcolor-inherited-c-ref.xht new file mode 100644 index 0000000000..85a391d5a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t44-currentcolor-inherited-c-ref.xht @@ -0,0 +1,15 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>"This paragraph" green background ref</title> + <style type="text/css"><![CDATA[ + p { + background: green; + color: white; + } + ]]></style> + </head> + <body> + <p>This paragraph should have a green background.</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/t44-currentcolor-inherited-c.xht b/testing/web-platform/tests/css/css-color/t44-currentcolor-inherited-c.xht new file mode 100644 index 0000000000..569a616e62 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/t44-currentcolor-inherited-c.xht @@ -0,0 +1,30 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: currentColor (with 'background-color')</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="help" href="http://www.w3.org/TR/css3-color/#currentcolor" /> + <link rel="help" href="http://www.w3.org/Style/2011/REC-css3-color-20110607-errata.html#s.4.5" /> + <link rel="match" href="t44-currentcolor-inherited-c-ref.xht" /> + <meta name="assert" content="currentColor is a computed value" /> + <style type="text/css"><![CDATA[ + #one { + color: red; + background: currentColor; + } + #two { + color: green; + /* inherit currentColor, which then is green */ + background: inherit; + } + #three { + color: white; + } + ]]></style> + </head> + <body> + <div id="one"><div id="two"><p id="three">This paragraph should have a green background.</p></div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-color/tagged-images-001.html b/testing/web-platform/tests/css/css-color/tagged-images-001.html new file mode 100644 index 0000000000..0af9c0ce51 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/tagged-images-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Space of Tagged Images. HTML img</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#tagged-images"> +<link rel="help" href="https://w3c.github.io/PNG-spec/#11iCCP"> +<meta name="assert" content="Tagged RGB images... if the color profile or other identifying information is valid, must be treated as being in the specified color space."> +<link rel="match" href="009900-image-ref.html"> + +<body> + <p>Test passes if you see a green square, and no red.</p> + <!-- solid color #990000 PNG image, iCCP with v2 ICC swapped red-green sRGB profile --> + <p><img src="./support/swap-990000-iCCP.png" alt="should be green"/></p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/tagged-images-002.html b/testing/web-platform/tests/css/css-color/tagged-images-002.html new file mode 100644 index 0000000000..b7c76b3550 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/tagged-images-002.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Space of Tagged Images. HTML img</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#tagged-images"> +<link rel="help" href="https://w3c.github.io/PNG-spec/#11sRGB"> +<meta name="assert" content="Tagged RGB images... if the color profile or other identifying information is valid, must be treated as being in the specified color space."> +<link rel="match" href="009900-image-ref.html"> + +<body> + <p>Test passes if you see a green square, and no red.</p> + <!-- solid color #009900 PNG image, sRGB chunk, relative colorimetric --> + <p><img src="./support/009900-sRGB.png" alt="should be green"/></p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/tagged-images-003.html b/testing/web-platform/tests/css/css-color/tagged-images-003.html new file mode 100644 index 0000000000..14f154b88a --- /dev/null +++ b/testing/web-platform/tests/css/css-color/tagged-images-003.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Space of Tagged Images. CSS background property</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#tagged-images"> +<link rel="help" href="https://w3c.github.io/PNG-spec/#11iCCP"> +<meta name="assert" content="Tagged RGB images... if the color profile or other identifying information is valid, must be treated as being in the specified color space."> +<link rel="match" href="./greensquare-090-ref.html"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: #090; width: 12em; height: 6em; margin-bottom: 0; } /* red-green swap of #900 sRGB */ + /* solid color #990000 PNG image, iCCP with v2 ICC swapped red-green sRGB profile */ + .test { background: url(./support/swap-990000-iCCP.png); } +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="ref"></div> + <div class="test"></div> + +</body> diff --git a/testing/web-platform/tests/css/css-color/tagged-images-004.html b/testing/web-platform/tests/css/css-color/tagged-images-004.html new file mode 100644 index 0000000000..bd874c9717 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/tagged-images-004.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Space of Tagged Images. CSS background property</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#tagged-images"> +<link rel="help" href="https://w3c.github.io/PNG-spec/#11iCCP"> +<link rel="help" href="https://w3c.github.io/PNG-spec/#11sRGB"> +<meta name="assert" content="Image formats may also use other, equivalent methods, often for brevity. +For example, PNG specifies a means (the sRGB chunk) "> +<link rel="match" href="./greensquare-090-ref.html"> +<style> + div { width: 12em; height: 6em; margin-top: 0; margin-bottom: 0} + .test { background-color: red; } + + /* solid color #990000 PNG image, iCCP with v2 ICC swapped red-green sRGB profile */ + .ref { background: url(./support/swap-990000-iCCP.png); } + + /* solid color #009900 PNG image, sRGB chunk */ + .test { background: url(./support/009900-sRGB.png); } +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="ref"></div> + <div class="test"></div> + +</body> diff --git a/testing/web-platform/tests/css/css-color/untagged-images-001.html b/testing/web-platform/tests/css/css-color/untagged-images-001.html new file mode 100644 index 0000000000..a1aafb759c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/untagged-images-001.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: Color Spaces of Untagged Colors</title> +<link rel="author" title="Chris Lilley" href="mailto:chris@w3.org"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#untagged"> +<meta name="assert" content=" untagged images must be treated as being in the sRGB color space"> +<link rel="match" href="009900-tagged-image-ref.html"> + +<body> + <p>Test passes if you see a green square, and no red.</p> + <!-- solid color #009900 PNG image, no color information --> + <p><img src="./support/009900.png" alt="should be green"/></p> +</body>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-color/whitesquare-ref.html b/testing/web-platform/tests/css/css-color/whitesquare-ref.html new file mode 100644 index 0000000000..ea7103759b --- /dev/null +++ b/testing/web-platform/tests/css/css-color/whitesquare-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>White square reference</title> +<style> + body { background-color: grey; } + .test { background-color: #FFFFFF; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a white square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/whitetext-ref.html b/testing/web-platform/tests/css/css-color/whitetext-ref.html new file mode 100644 index 0000000000..0237a810eb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/whitetext-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>White text reference</title> +<style> + .test { color: #FFFFFF; background-color: #333; padding: 3px} +</style> +<body> + <p class="test">Test passes if this text is white</p> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-001.html b/testing/web-platform/tests/css/css-color/xyz-001.html new file mode 100644 index 0000000000..6fdf98e2df --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="xyz with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz 0.07719 0.15438 0.02573); } /* green (sRGB #008000) converted to xyz */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-002.html b/testing/web-platform/tests/css/css-color/xyz-002.html new file mode 100644 index 0000000000..832a1948a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="xyz with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz 0 0 0); } /* black (sRGB #000000) converted to xyz */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-003-ref.html b/testing/web-platform/tests/css/css-color/xyz-003-ref.html new file mode 100644 index 0000000000..4b7077c706 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: xyz</title> +<style> + body { background-color: grey; } + .test { background-color: color(srgb 1.08516 0.97699 0.958832); width: 12em; height: 12em; } /* color(xyz 1 1 1) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-003.html b/testing/web-platform/tests/css/css-color/xyz-003.html new file mode 100644 index 0000000000..d9f3326c58 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="xyz-003-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-18432"> +<meta name="assert" content="xyz with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: color(srgb 1.08516 0.97699 0.958832); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz 1 1 1) converted to sRGB */ + .test { background-color: color(xyz 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-004-ref.html b/testing/web-platform/tests/css/css-color/xyz-004-ref.html new file mode 100644 index 0000000000..9b1cd6abc7 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: xyz</title> +<style> + .test { background-color: lab(99.6289% -354.58 146.707); width: 12em; height: 12em; } /* color(xyz 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-004.html b/testing/web-platform/tests/css/css-color/xyz-004.html new file mode 100644 index 0000000000..e1e30c17d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="xyz-004-ref.html"> +<meta name="assert" content="xyz with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(99.6289% -354.58 146.707); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz 0 1 0) converted to Lab */ + .test { background-color: color(xyz 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-005.html b/testing/web-platform/tests/css/css-color/xyz-005.html new file mode 100644 index 0000000000..a8a01e4065 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="xyz outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz 0.26567 0.69174 0.04511); } /* green color(display-p3 0 1 0) converted to xyz */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-001.html b/testing/web-platform/tests/css/css-color/xyz-d50-001.html new file mode 100644 index 0000000000..da5ad5090c --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="xyz-d50 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz-d50 0.08312 0.154746 0.020961); } /* green (sRGB #008000) converted to xyz-d50 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-002.html b/testing/web-platform/tests/css/css-color/xyz-d50-002.html new file mode 100644 index 0000000000..140f25ebf2 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="xyz-d50 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz-d50 0 0 0); } /* black (sRGB #000000) converted to xyz-d50 */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-003-ref.html b/testing/web-platform/tests/css/css-color/xyz-d50-003-ref.html new file mode 100644 index 0000000000..4223a511df --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: xyz-d50</title> +<style> + body { background-color: grey; } + .test { background-color: color(srgb 1.01139 0.987129 1.10222); width: 12em; height: 12em; } /* color(xyz-d50 1 1 1) converted to srgb*/ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-003.html b/testing/web-platform/tests/css/css-color/xyz-d50-003.html new file mode 100644 index 0000000000..7630115187 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-003.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="xyz-d50-003-ref.html"> +<meta name="assert" content="xyz-d50 with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: color(srgb 1.01139 0.987129 1.10222); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d50 1 1 1) converted to sRGB */ + .test { background-color: color(xyz-d50 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-004-ref.html b/testing/web-platform/tests/css/css-color/xyz-d50-004-ref.html new file mode 100644 index 0000000000..4d1c08f2ae --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: xyz-d50</title> +<style> + .test { background-color: color(srgb -1.20716 1.3163 -0.489014); width: 12em; height: 12em; } /* color(xyz-d50 0 1 0) converted to srgb */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-004.html b/testing/web-platform/tests/css/css-color/xyz-d50-004.html new file mode 100644 index 0000000000..f4aa9a0a1d --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="xyz-d50-004-ref.html"> +<meta name="assert" content="xyz-d50 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: color(srgb -1.20716 1.3163 -0.489014); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d50 0 1 0) converted to sRGB */ + .test { background-color: color(xyz-d50 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d50-005.html b/testing/web-platform/tests/css/css-color/xyz-d50-005.html new file mode 100644 index 0000000000..f43c07b16e --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d50-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="xyz-d50 outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz-d50 0.29194 0.692236 0.041884); } /* green color(display-p3 0 1 0) converted to xyz-d50 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-001.html b/testing/web-platform/tests/css/css-color/xyz-d65-001.html new file mode 100644 index 0000000000..d3a9766347 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="greensquare-ref.html"> +<meta name="assert" content="xyz-d65 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz-d65 0.07719 0.15438 0.02573); } /* green (sRGB #008000) converted to xyz-d65 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-002.html b/testing/web-platform/tests/css/css-color/xyz-d65-002.html new file mode 100644 index 0000000000..eb237eda72 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-002.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="blacksquare-ref.html"> +<meta name="assert" content="xyz-d65 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz-d65 0 0 0); } /* black (sRGB #000000) converted to xyz-d65 */ +</style> +<body> + <p>Test passes if you see a black square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-003-ref.html b/testing/web-platform/tests/css/css-color/xyz-d65-003-ref.html new file mode 100644 index 0000000000..c470db054f --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-003-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: xyz-d65</title> +<style> + body { background-color: grey; } + .test { background-color: color(srgb 1.08516 0.97699 0.958832); width: 12em; height: 12em; } /* color(xyz-d65 1 1 1) converted to sRGB */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-003.html b/testing/web-platform/tests/css/css-color/xyz-d65-003.html new file mode 100644 index 0000000000..d5e5cda1f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-003.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="xyz-d65-003-ref.html"> +<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-18432"> +<meta name="assert" content="xyz-d65 with no alpha"> +<style> + body { background-color: grey; } + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: color(srgb 1.08516 0.97699 0.958832); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d65 1 1 1) converted to sRGB */ + .test { background-color: color(xyz-d65 1 1 1); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-004-ref.html b/testing/web-platform/tests/css/css-color/xyz-d65-004-ref.html new file mode 100644 index 0000000000..1664d362cf --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-004-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: CSS Color 4: xyz-d65</title> +<style> + .test { background-color: lab(99.6289% -354.58 146.707); width: 12em; height: 12em; } /* color(xyz-d65 0 1 0) converted to Lab */ +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-004.html b/testing/web-platform/tests/css/css-color/xyz-d65-004.html new file mode 100644 index 0000000000..ddb2977ec8 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-004.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="xyz-d65-004-ref.html"> +<meta name="assert" content="xyz-d65 with no alpha"> +<style> + .test { background-color: red; width: 12em; height: 6em; margin-top: 0; } + .ref { background-color: lab(99.6289% -354.58 146.707); width: 12em; height: 6em; margin-bottom: 0; } /* color(xyz-d65 0 1 0) converted to Lab */ + .test { background-color: color(xyz-d65 0 1 0); } +</style> +<body> + <p>Test passes if you see a single square, and not two rectangles of different colors.</p> + <div class="ref"></div> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/xyz-d65-005.html b/testing/web-platform/tests/css/css-color/xyz-d65-005.html new file mode 100644 index 0000000000..a99a5e9682 --- /dev/null +++ b/testing/web-platform/tests/css/css-color/xyz-d65-005.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Color 4: xyz</title> +<link rel="author" title="Sam Weinig" href="mailto:weinig@apple.com"> +<link rel="help" href="https://drafts.csswg.org/css-color-4/#valdef-color-xyz"> +<link rel="match" href="greensquare-display-p3-ref.html"> +<meta name="assert" content="xyz-d65 outside the sRGB gamut"> +<style> + .test { background-color: red; width: 12em; height: 12em; } + .test { background-color: color(xyz-d65 0.26567 0.69174 0.04511); } /* green color(display-p3 0 1 0) converted to xyz-d65 */ +</style> +<body> + <p>Test passes if you see a green square, and no red.</p> + <div class="test"></div> +</body> diff --git a/testing/web-platform/tests/css/css-color/yellowsquare-ref.html b/testing/web-platform/tests/css/css-color/yellowsquare-ref.html new file mode 100644 index 0000000000..34463bc6eb --- /dev/null +++ b/testing/web-platform/tests/css/css-color/yellowsquare-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>sRGB yellow square reference</title> +<style> + body { background-color: grey; } + .test { background-color: #FFFF00; width: 12em; height: 12em; } +</style> +<body> + <p>Test passes if you see a yellow square, and no red.</p> + <div class="test"></div> +</body> |
