<!DOCTYPE html><!-- webkit-test-runner [ CSSRelativeColorSyntaxEnabled=true ] -->
<html>
    <script src="../../resources/js-test-pre.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>
    description("Test the parsing of CSS Color 5 Relative Color Syntax.");

    function computedStyle(property, value)
    {
        var div = document.createElement("div");
        document.body.appendChild(div);
        div.style.setProperty(property, value);
        var computedValue = getComputedStyle(div).getPropertyValue(property);
        document.body.removeChild(div);
        return computedValue;
    }

    function innerStyle(property, value)
    {
        var div = document.createElement("div");
        div.style.setProperty(property, value);
        return div.style.getPropertyValue(property);
    }

    function testComputedProperty(property, value, expected)
    {
        shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
    }

    function testComputed(value, expected)
    {
        testComputedProperty("background-color", value, expected);
    }

    function testInner(property, value, expected)
    {
        if (expected === null)
            expected = "";
        shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
    }


    debug('rgb(from ...)');

    // Testing no modifications.
    testComputed(`rgb(from rebeccapurple r g b)`, `rgb(102, 51, 153)`);
    testComputed(`rgb(from rebeccapurple r g b / alpha)`, `rgb(102, 51, 153)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g b / alpha)`, `rgba(26, 51, 77, 0.4)`);
    testComputed(`rgb(from hsl(120deg 20% 50% / .5) r g b / alpha)`, `rgba(102, 153, 102, 0.5)`);

    // Test nesting relative colors.
    testComputed(`rgb(from rgb(from rebeccapurple r g b) r g b)`, `rgb(102, 51, 153)`);

    // Testing non-sRGB origin colors to see gamut clipping.
    testComputed(`rgb(from color(display-p3 0 1 0) r g b / alpha)`, `rgb(0, 255, 0)`);

    // Testing replacement with 0.
    testComputed(`rgb(from rebeccapurple 0 0 0)`, `rgb(0, 0, 0)`);
    testComputed(`rgb(from rebeccapurple 0 0 0 / 0)`, `rgba(0, 0, 0, 0)`);
    testComputed(`rgb(from rebeccapurple 0 g b / alpha)`, `rgb(0, 51, 153)`);
    testComputed(`rgb(from rebeccapurple r 0 b / alpha)`, `rgb(102, 0, 153)`);
    testComputed(`rgb(from rebeccapurple r g 0 / alpha)`, `rgb(102, 51, 0)`);
    testComputed(`rgb(from rebeccapurple r g b / 0)`, `rgba(102, 51, 153, 0)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) 0 g b / alpha)`, `rgba(0, 51, 77, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r 0 b / alpha)`, `rgba(26, 0, 77, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g 0 / alpha)`, `rgba(26, 51, 0, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g b / 0)`, `rgba(26, 51, 77, 0)`);

    // Testing replacement with a number.
    testComputed(`rgb(from rebeccapurple 25 g b / alpha)`, `rgb(25, 51, 153)`);
    testComputed(`rgb(from rebeccapurple r 25 b / alpha)`, `rgb(102, 25, 153)`);
    testComputed(`rgb(from rebeccapurple r g 25 / alpha)`, `rgb(102, 51, 25)`);
    testComputed(`rgb(from rebeccapurple r g b / .25)`, `rgba(102, 51, 153, 0.25)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) 25 g b / alpha)`, `rgba(25, 51, 77, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r 25 b / alpha)`, `rgba(26, 25, 77, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g 25 / alpha)`, `rgba(26, 51, 25, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g b / .25)`, `rgba(26, 51, 77, 0.25)`);

    // Testing replacement with a percentage.
    testComputed(`rgb(from rebeccapurple 25% g b / alpha)`, `rgb(64, 51, 153)`);
    testComputed(`rgb(from rebeccapurple r 25% b / alpha)`, `rgb(102, 64, 153)`);
    testComputed(`rgb(from rebeccapurple r g 25% / alpha)`, `rgb(102, 51, 64)`);
    testComputed(`rgb(from rebeccapurple r g b / 25%)`, `rgba(102, 51, 153, 0.25)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) 25% g b / alpha)`, `rgba(64, 51, 77, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r 25% b / alpha)`, `rgba(26, 64, 77, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g 25% / alpha)`, `rgba(26, 51, 64, 0.4)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g b / 25%)`, `rgba(26, 51, 77, 0.25)`);

    // Testing replacement with a number for r, g, b but percent for alpha.
    testComputed(`rgb(from rebeccapurple 25 g b / 25%)`, `rgba(25, 51, 153, 0.25)`);
    testComputed(`rgb(from rebeccapurple r 25 b / 25%)`, `rgba(102, 25, 153, 0.25)`);
    testComputed(`rgb(from rebeccapurple r g 25 / 25%)`, `rgba(102, 51, 25, 0.25)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) 25 g b / 25%)`, `rgba(25, 51, 77, 0.25)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r 25 b / 25%)`, `rgba(26, 25, 77, 0.25)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r g 25 / 25%)`, `rgba(26, 51, 25, 0.25)`);

    // Testing permutation.
    testComputed(`rgb(from rebeccapurple g b r)`, `rgb(51, 153, 102)`);
    testComputed(`rgb(from rebeccapurple b alpha r / g)`, `rgba(153, 255, 102, 0.2)`);
    testComputed(`rgb(from rebeccapurple r r r / r)`, `rgba(102, 102, 102, 0.4)`);
    testComputed(`rgb(from rebeccapurple alpha alpha alpha / alpha)`, `rgb(255, 255, 255)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) g b r)`, `rgb(51, 77, 26)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) b alpha r / g)`, `rgba(77, 102, 26, 0.2)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r r r / r)`, `rgba(26, 26, 26, 0.1)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)`, `rgba(102, 102, 102, 0.4)`);

    // Testing mixes of number and percentage. (These would not be allowed in the non-relative syntax).
    testComputed(`rgb(from rebeccapurple r 10% 10)`, `rgb(102, 26, 10)`);
    testComputed(`rgb(from rebeccapurple r 10 10%)`, `rgb(102, 10, 26)`);
    testComputed(`rgb(from rebeccapurple 0% 10 10)`, `rgb(0, 10, 10)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r 10% 10)`, `rgb(26, 26, 10)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) r 10 10%)`, `rgb(26, 10, 26)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) 0% 10 10)`, `rgb(0, 10, 10)`);

    // Testing with calc().
    testComputed(`rgb(from rebeccapurple calc(r) calc(g) calc(b))`, `rgb(102, 51, 153)`);
    testComputed(`rgb(from rebeccapurple r calc(g * .5) 10)`, `rgb(102, 26, 10)`);
    testComputed(`rgb(from rebeccapurple r calc(b * .5) 10)`, `rgb(102, 77, 10)`);
    testComputed(`rgb(from rebeccapurple r calc(b * .5 + g * .5) 10)`, `rgb(102, 102, 10)`);
    testComputed(`rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `rgb(102, 51, 10)`);
    testComputed(`rgb(from rebeccapurple r calc(b * .5 - g * .5) 10)`, `rgb(102, 51, 10)`);
    testComputed(`rgb(from rgb(10%, 20%, 30%, 40%) calc(r) calc(g) calc(b) / calc(alpha))`, `rgba(26, 51, 77, 0.4)`);

    // Testing invalid component names
    testComputed(`rgb(from rebeccapurple red g b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`rgb(from rebeccapurple l g b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`rgb(from rebeccapurple h g b)`, `rgba(0, 0, 0, 0)`);

    debug('');
    debug('hsl(from ...)');

    // Testing no modifications.
    testComputed(`hsl(from rebeccapurple h s l)`, `rgb(102, 51, 153)`);
    testComputed(`hsl(from rebeccapurple h s l / alpha)`, `rgb(102, 51, 153)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h s l / alpha)`, `rgba(26, 51, 77, 0.4)`);
    testComputed(`hsl(from hsl(120deg 20% 50% / .5) h s l / alpha)`, `rgba(102, 153, 102, 0.5)`);

    // Test nesting relative colors.
    testComputed(`hsl(from hsl(from rebeccapurple h s l) h s l)`, `rgb(102, 51, 153)`);

    // Testing non-sRGB origin colors to see gamut clipping.
    testComputed(`hsl(from color(display-p3 0 1 0) h s l / alpha)`, `rgb(0, 255, 0)`);

    // Testing replacement with 0.
    testComputed(`hsl(from rebeccapurple 0 0% 0%)`, `rgb(0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple 0deg 0% 0%)`, `rgb(0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple 0 0% 0% / 0)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple 0deg 0% 0% / 0)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple 0 s l / alpha)`, `rgb(153, 51, 51)`);
    testComputed(`hsl(from rebeccapurple 0deg s l / alpha)`, `rgb(153, 51, 51)`);
    testComputed(`hsl(from rebeccapurple h 0% l / alpha)`, `rgb(102, 102, 102)`);
    testComputed(`hsl(from rebeccapurple h s 0% / alpha)`, `rgb(0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple h s l / 0)`, `rgba(102, 51, 153, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) 0 s l / alpha)`, `rgba(77, 26, 26, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) 0deg s l / alpha)`, `rgba(77, 26, 26, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h 0% l / alpha)`, `rgba(52, 52, 52, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h s 0% / alpha)`, `rgba(0, 0, 0, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h s l / 0)`, `rgba(26, 51, 77, 0)`);

    // Testing replacement with a constant.
    testComputed(`hsl(from rebeccapurple 25 s l / alpha)`, `rgb(153, 94, 51)`);
    testComputed(`hsl(from rebeccapurple 25deg s l / alpha)`, `rgb(153, 94, 51)`);
    testComputed(`hsl(from rebeccapurple h 25% l / alpha)`, `rgb(102, 77, 128)`);
    testComputed(`hsl(from rebeccapurple h s 25% / alpha)`, `rgb(64, 32, 96)`);
    testComputed(`hsl(from rebeccapurple h s l / .25)`, `rgba(102, 51, 153, 0.25)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) 25 s l / alpha)`, `rgba(77, 47, 26, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) 25deg s l / alpha)`, `rgba(77, 47, 26, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h 25% l / alpha)`, `rgba(39, 51, 64, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h s 25% / alpha)`, `rgba(32, 63, 95, 0.4)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h s l / .25)`, `rgba(26, 51, 77, 0.25)`);

    // Testing valid permutation (types match).
    testComputed(`hsl(from rebeccapurple h l s)`, `rgb(128, 77, 179)`);
    testComputed(`hsl(from rebeccapurple h alpha l / s)`, `rgba(102, 0, 204, 0.5)`);
    testComputed(`hsl(from rebeccapurple h l l / l)`, `rgba(102, 61, 143, 0.4)`);
    testComputed(`hsl(from rebeccapurple h alpha alpha / alpha)`, `rgb(255, 255, 255)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h l s)`, `rgb(101, 126, 152)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h alpha l / s)`, `rgba(31, 51, 72, 0.494)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h l l / l)`, `rgba(41, 51, 62, 0.204)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h alpha alpha / alpha)`, `rgba(61, 101, 143, 0.4)`);

    // Testing invalid permutation (types don't match).
    testComputed(`hsl(from rebeccapurple s h l)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple s s s / s)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple h h h / h)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) s h l)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) s s s / s)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h h h / h)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);

    // Testing with calc().
    testComputed(`hsl(from rebeccapurple calc(h) calc(s) calc(l))`, `rgb(102, 51, 153)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) calc(h) calc(s) calc(l) / calc(alpha))`, `rgba(26, 51, 77, 0.4)`);

    // Testing invalid values.
    testComputed(`hsl(from rebeccapurple h 10% 10)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple h 10 10%)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple 10% s l)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h 10% 10)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) h 10 10%)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rgb(10%, 20%, 30%, 40%) 10% s l)`, `rgba(0, 0, 0, 0)`);

    // Testing invalid component names
    testComputed(`hsl(from rebeccapurple hue s l)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple x s l)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hsl(from rebeccapurple h g b)`, `rgba(0, 0, 0, 0)`);


    debug('');
    debug('hwb(from ...)');

    // Testing no modifications.
    testComputed(`hwb(from rebeccapurple h w b)`, `rgb(102, 51, 153)`);
    testComputed(`hwb(from rebeccapurple h w b / alpha)`, `rgb(102, 51, 153)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h w b / alpha)`, `rgba(26, 51, 77, 0.4)`);
    testComputed(`hwb(from hsl(120deg 20% 50% / .5) h w b / alpha)`, `rgba(102, 153, 102, 0.5)`);

    // Test nesting relative colors.
    testComputed(`hwb(from hwb(from rebeccapurple h w b) h w b)`, `rgb(102, 51, 153)`);

    // Testing non-sRGB origin colors to see gamut clipping.
    testComputed(`hwb(from color(display-p3 0 1 0) h w b / alpha)`, `rgb(0, 255, 0)`);

    // Testing replacement with 0.
    testComputed(`hwb(from rebeccapurple 0 0% 0%)`, `rgb(255, 0, 0)`);
    testComputed(`hwb(from rebeccapurple 0deg 0% 0%)`, `rgb(255, 0, 0)`);
    testComputed(`hwb(from rebeccapurple 0 0% 0% / 0)`, `rgba(255, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple 0deg 0% 0% / 0)`, `rgba(255, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple 0 w b / alpha)`, `rgb(153, 51, 51)`);
    testComputed(`hwb(from rebeccapurple 0deg w b / alpha)`, `rgb(153, 51, 51)`);
    testComputed(`hwb(from rebeccapurple h 0% b / alpha)`, `rgb(77, 0, 153)`);
    testComputed(`hwb(from rebeccapurple h w 0% / alpha)`, `rgb(153, 51, 255)`);
    testComputed(`hwb(from rebeccapurple h w b / 0)`, `rgba(102, 51, 153, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) 0 w b / alpha)`, `rgba(77, 26, 26, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) 0deg w b / alpha)`, `rgba(77, 26, 26, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h 0% b / alpha)`, `rgba(0, 38, 77, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h w 0% / alpha)`, `rgba(26, 138, 255, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h w b / 0)`, `rgba(26, 51, 77, 0)`);

    // Testing replacement with a constant.
    testComputed(`hwb(from rebeccapurple 25 w b / alpha)`, `rgb(153, 94, 51)`);
    testComputed(`hwb(from rebeccapurple 25deg w b / alpha)`, `rgb(153, 94, 51)`);
    testComputed(`hwb(from rebeccapurple h 25% b / alpha)`, `rgb(108, 64, 153)`);
    testComputed(`hwb(from rebeccapurple h w 25% / alpha)`, `rgb(121, 51, 191)`);
    testComputed(`hwb(from rebeccapurple h w b / .25)`, `rgba(102, 51, 153, 0.25)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) 25 w b / alpha)`, `rgba(77, 47, 26, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) 25deg w b / alpha)`, `rgba(77, 47, 26, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h 25% b / alpha)`, `rgba(64, 70, 77, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h w 25% / alpha)`, `rgba(26, 107, 191, 0.4)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h w b / .25)`, `rgba(26, 51, 77, 0.25)`);

    // Testing valid permutation (types match).
    testComputed(`hwb(from rebeccapurple h b w)`, `rgb(153, 102, 204)`);
    testComputed(`hwb(from rebeccapurple h alpha w / b)`, `rgba(213, 213, 213, 0.4)`);
    testComputed(`hwb(from rebeccapurple h w w / w)`, `rgba(128, 51, 204, 0.2)`);
    testComputed(`hwb(from rebeccapurple h alpha alpha / alpha)`, `rgb(128, 128, 128)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h b w)`, `rgb(178, 203, 229)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h alpha w / b)`, `rgba(102, 164, 229, 0.698)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h w w / w)`, `rgba(26, 126, 229, 0.1)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h alpha alpha / alpha)`, `rgba(102, 127, 153, 0.4)`);

    // Testing invalid permutation (types don't match).
    testComputed(`hwb(from rebeccapurple w h b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple b b b / b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple h h h / h)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) w b h)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) b b b / b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h h h / h)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);

    // Testing with calc().
    testComputed(`hwb(from rebeccapurple calc(h) calc(w) calc(b))`, `rgb(102, 51, 153)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) calc(h) calc(w) calc(b) / calc(alpha))`, `rgba(26, 51, 77, 0.4)`);

    // Testing invalid values.
    testComputed(`hwb(from rebeccapurple h 10% 10)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple h 10 10%)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple 10% w b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h 10% 10)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) h 10 10%)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rgb(10%, 20%, 30%, 40%) 10% w b)`, `rgba(0, 0, 0, 0)`);

    // Testing invalid component names
    testComputed(`hwb(from rebeccapurple hue w b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple x w b)`, `rgba(0, 0, 0, 0)`);
    testComputed(`hwb(from rebeccapurple h g b)`, `rgba(0, 0, 0, 0)`);

    for (const colorSpace of [ "lab", "oklab" ]) {
        debug('');
        debug(`${colorSpace}(from ...)`);

        // Testing no modifications.
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b)`, `${colorSpace}(25% 20 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b / alpha)`, `${colorSpace}(25% 20 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a b / alpha)`, `${colorSpace}(25% 20 50 / 0.4)`);

        // Test nesting relative colors.
        testComputed(`${colorSpace}(from ${colorSpace}(from ${colorSpace}(25% 20 50) l a b) l a b)`, `${colorSpace}(25% 20 50)`);

        // Testing non-${colorSpace} origin to see conversion.
        testComputed(`${colorSpace}(from color(display-p3 0 0 0) l a b / alpha)`, `${colorSpace}(0% 0 0)`);

        // Testing replacement with 0.
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 0% 0 0)`, `${colorSpace}(0% 0 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 0% 0 0 / 0)`, `${colorSpace}(0% 0 0 / 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 0% a b / alpha)`, `${colorSpace}(0% 20 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 0 b / alpha)`, `${colorSpace}(25% 0 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a 0 / alpha)`, `${colorSpace}(25% 20 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b / 0)`, `${colorSpace}(25% 20 50 / 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) 0% a b / alpha)`, `${colorSpace}(0% 20 50 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 0 b / alpha)`, `${colorSpace}(25% 0 50 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a 0 / alpha)`, `${colorSpace}(25% 20 0 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a b / 0)`, `${colorSpace}(25% 20 50 / 0)`);

        // Testing replacement with a constant.
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 35% a b / alpha)`, `${colorSpace}(35% 20 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 35 b / alpha)`, `${colorSpace}(25% 35 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a 35 / alpha)`, `${colorSpace}(25% 20 35)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a b / .35)`, `${colorSpace}(25% 20 50 / 0.35)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) 35% a b / alpha)`, `${colorSpace}(35% 20 50 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 35 b / alpha)`, `${colorSpace}(25% 35 50 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a 35 / alpha)`, `${colorSpace}(25% 20 35 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a b / .35)`, `${colorSpace}(25% 20 50 / 0.35)`);

        // Testing valid permutation (types match).
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l b a)`, `${colorSpace}(25% 50 20)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l a a / a)`, `${colorSpace}(25% 20 20)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l b a)`, `${colorSpace}(25% 50 20)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l a a / a)`, `${colorSpace}(25% 20 20)`);

        // Testing invalid permutation (types don't match).
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l alpha a / b)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l alpha a / b)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);

        // Testing with calc().
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) calc(l) calc(a) calc(b))`, `${colorSpace}(25% 20 50)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) calc(l) calc(a) calc(b) / calc(alpha))`, `${colorSpace}(25% 20 50 / 0.4)`);

        // Testing invalid values.
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 10% 10)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) l 10 10%)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) 10 a b)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 10% 10)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) l 10 10%)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50 / 40%) 10 a b)`, `rgba(0, 0, 0, 0)`);

        // Testing invalid component names
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) lightness a b)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) x a b)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(25% 20 50) h g b)`, `rgba(0, 0, 0, 0)`);
    }

    for (const colorSpace of [ "lch", "oklch" ]) {
        debug('');
        debug(`${colorSpace}(from ...)`);

        const rectangularForm = colorSpace == "lch" ? "lab" : "oklab";

        // Testing no modifications.
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h)`, `${colorSpace}(70% 45 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h / alpha)`, `${colorSpace}(70% 45 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c h/ alpha)`, `${colorSpace}(70% 45 30 / 0.4)`);

        // Test nesting relative colors.
        testComputed(`${colorSpace}(from ${colorSpace}(from ${colorSpace}(70% 45 30) l c h) l c h)`, `${colorSpace}(70% 45 30)`);

        // Testing non-sRGB origin colors to see gamut clipping.
        testComputed(`${colorSpace}(from color(display-p3 0 0 0) l c h / alpha)`, `${colorSpace}(0% 0 0)`);
        testComputed(`${colorSpace}(from ${rectangularForm}(70% 45 30) l c h / alpha)`, `${colorSpace}(70% 54.08327 33.690067)`);

        // Testing replacement with 0.
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0)`, `${colorSpace}(0% 0 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0deg)`, `${colorSpace}(0% 0 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0 / 0)`, `${colorSpace}(0% 0 0 / 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% 0 0deg / 0)`, `${colorSpace}(0% 0 0 / 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 0% c h / alpha)`, `${colorSpace}(0% 45 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l 0 h / alpha)`, `${colorSpace}(70% 0 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 0 / alpha)`, `${colorSpace}(70% 45 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 0deg / alpha)`, `${colorSpace}(70% 45 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h / 0)`, `${colorSpace}(70% 45 30 / 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) 0% c h / alpha)`, `${colorSpace}(0% 45 30 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l 0 h / alpha)`, `${colorSpace}(70% 0 30 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 0 / alpha)`, `${colorSpace}(70% 45 0 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 0deg / alpha)`, `${colorSpace}(70% 45 0 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c h / 0)`, `${colorSpace}(70% 45 30 / 0)`);

        // Testing replacement with a constant.
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 25% c h / alpha)`, `${colorSpace}(25% 45 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l 25 h / alpha)`, `${colorSpace}(70% 25 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 25 / alpha)`, `${colorSpace}(70% 45 25)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 25deg / alpha)`, `${colorSpace}(70% 45 25)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c h / .25)`, `${colorSpace}(70% 45 30 / 0.25)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) 25% c h / alpha)`, `${colorSpace}(25% 45 30 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l 25 h / alpha)`, `${colorSpace}(70% 25 30 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 25 / alpha)`, `${colorSpace}(70% 45 25 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 25deg / alpha)`, `${colorSpace}(70% 45 25 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c h / .25)`, `${colorSpace}(70% 45 30 / 0.25)`);

        // Testing valid permutation (types match).
        // NOTE: 'c' is a vaild hue, as hue is <angle>|<number>.
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha c h / l)`, `${colorSpace}(100% 45 30 / 0.7)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c c / alpha)`, `${colorSpace}(70% 45 45)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha c h / alpha)`, `${colorSpace}(100% 45 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha c c / alpha)`, `${colorSpace}(100% 45 45)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha c h / l)`, `${colorSpace}(40% 45 30 / 0.7)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c c / alpha)`, `${colorSpace}(70% 45 45 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha c h / alpha)`, `${colorSpace}(40% 45 30 / 0.4)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha c c / alpha)`, `${colorSpace}(40% 45 45 / 0.4)`);

        // Testing invalid permutation (types don't match).
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) h l c / alpha)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) c c c / c)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) h l c / alpha)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) c c c / c)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) alpha alpha alpha / alpha)`, `rgba(0, 0, 0, 0)`);

        // Testing with calc().
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) calc(l) calc(c) calc(h))`, `${colorSpace}(70% 45 30)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) calc(l) calc(c) calc(h) / calc(alpha))`, `${colorSpace}(70% 45 30 / 0.4)`);

        // Testing invalid values.
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l 10% h)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l c 10%)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) 10 c h)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l 10% h)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) l c 10%)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30 / 40%) 10 c h)`, `rgba(0, 0, 0, 0)`);

        // Testing invalid component names
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) lightness c h)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) x c h)`, `rgba(0, 0, 0, 0)`);
        testComputed(`${colorSpace}(from ${colorSpace}(70% 45 30) l g b)`, `rgba(0, 0, 0, 0)`);
    }

    for (const colorSpace of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) {
        debug('');
        debug(`color(from ... ${colorSpace} ...)`);

        // Testing no modifications.
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b)`,                              `color(${colorSpace} 0.7 0.5 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / alpha)`,                      `color(${colorSpace} 0.7 0.5 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} r g b)`,                        `color(${colorSpace} 0.7 0.5 0.3)`);
        testComputed(`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.
        testComputed(`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.
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0)`,                              `color(${colorSpace} 0 0 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0)`,                              `color(${colorSpace} 0 0 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0 / 0)`,                          `color(${colorSpace} 0 0 0 / 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 0 0 / 0)`,                          `color(${colorSpace} 0 0 0 / 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0 g b / alpha)`,                      `color(${colorSpace} 0 0.5 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0 b / alpha)`,                      `color(${colorSpace} 0.7 0 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0 / alpha)`,                      `color(${colorSpace} 0.7 0.5 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 0)`,                          `color(${colorSpace} 0.7 0.5 0.3 / 0)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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.
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 0.2 g b / alpha)`,                    `color(${colorSpace} 0.2 0.5 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 20% g b / alpha)`,                    `color(${colorSpace} 0.2 0.5 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 0.2 b / alpha)`,                    `color(${colorSpace} 0.7 0.2 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 20% b / alpha)`,                    `color(${colorSpace} 0.7 0.2 0.3)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 0.2 / alpha)`,                    `color(${colorSpace} 0.7 0.5 0.2)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 20% / alpha)`,                    `color(${colorSpace} 0.7 0.5 0.2)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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)`);

        // Testing valid permutation (types match).
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} g b r)`,                              `color(${colorSpace} 0.5 0.3 0.7)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} b alpha r / g)`,                      `color(${colorSpace} 0.3 1 0.7 / 0.5)`);
        testComputed(`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)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} alpha alpha alpha / alpha)`,          `color(${colorSpace} 1 1 1)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3 / 40%) ${colorSpace} g b r)`,                        `color(${colorSpace} 0.5 0.3 0.7)`);
        testComputed(`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)`);
        testComputed(`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)`);
        testComputed(`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 with calc().
        testComputed(`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)`);
        testComputed(`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 invalid values.
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} 10deg g b)`,                          `rgba(0, 0, 0, 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r 10deg b)`,                          `rgba(0, 0, 0, 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g 10deg)`,                          `rgba(0, 0, 0, 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} r g b / 10deg)`,                      `rgba(0, 0, 0, 0)`);

        // Testing invalid component names
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} red g b)`,                            `rgba(0, 0, 0, 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} x g b)`,                              `rgba(0, 0, 0, 0)`);
        testComputed(`color(from color(${colorSpace} 0.7 0.5 0.3) ${colorSpace} l g b)`,                              `rgba(0, 0, 0, 0)`);
    }

    for (const colorSpace of [ "xyz", "xyz-d50", "xyz-d65" ]) {
	    debug('');
        debug(`color(from ... ${colorSpace} ...)`);

  	  	const resultColorSpace = colorSpace == "xyz" ? "xyz-d65" : colorSpace; 

	    // Testing no modifications.
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z)`,                              `color(${resultColorSpace} 7 -20.5 100)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / alpha)`,                      `color(${resultColorSpace} 7 -20.5 100)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y z)`,                        `color(${resultColorSpace} 7 -20.5 100)`);
	    testComputed(`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.
	    testComputed(`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.
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0)`,                              `color(${resultColorSpace} 0 0 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0)`,                              `color(${resultColorSpace} 0 0 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0 / 0)`,                          `color(${resultColorSpace} 0 0 0 / 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 0 0 / 0)`,                          `color(${resultColorSpace} 0 0 0 / 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0 y z / alpha)`,                      `color(${resultColorSpace} 0 -20.5 100)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0 z / alpha)`,                      `color(${resultColorSpace} 7 0 100)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0 / alpha)`,                      `color(${resultColorSpace} 7 -20.5 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0)`,                          `color(${resultColorSpace} 7 -20.5 100 / 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0 y z / alpha)`,                `color(${resultColorSpace} 0 -20.5 100 / 0.4)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0 z / alpha)`,                `color(${resultColorSpace} 7 0 100 / 0.4)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0 / alpha)`,                `color(${resultColorSpace} 7 -20.5 0 / 0.4)`);
	    testComputed(`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.
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 0.2 y z / alpha)`,                    `color(${resultColorSpace} 0.2 -20.5 100)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 0.2 z / alpha)`,                    `color(${resultColorSpace} 7 0.2 100)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 0.2 / alpha)`,                    `color(${resultColorSpace} 7 -20.5 0.2)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 0.2)`,                        `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 20%)`,                        `color(${resultColorSpace} 7 -20.5 100 / 0.2)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} 0.2 y z / alpha)`,              `color(${resultColorSpace} 0.2 -20.5 100 / 0.4)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x 0.2 z / alpha)`,              `color(${resultColorSpace} 7 0.2 100 / 0.4)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x y 0.2 / alpha)`,              `color(${resultColorSpace} 7 -20.5 0.2 / 0.4)`);
	    testComputed(`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).
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} y z x)`,                              `color(${resultColorSpace} -20.5 100 7)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x x x / x)`,                          `color(${resultColorSpace} 7 7 7)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} y z x)`,                        `color(${resultColorSpace} -20.5 100 7)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} x x x / x)`,                    `color(${resultColorSpace} 7 7 7)`);

	    // Testing invalid permutation (types don't match).
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} z alpha x / y)`,                      `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} alpha alpha alpha / alpha)`,          `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} z alpha x / y)`,                `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100 / 40%) ${colorSpace} alpha alpha alpha / alpha)`,    `rgba(0, 0, 0, 0)`);

	    // Testing with calc().
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} calc(x) calc(y) calc(z))`,                        `color(${resultColorSpace} 7 -20.5 100)`);
	    testComputed(`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 invalid values.
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} 10deg y z)`,                          `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x 10deg z)`,                          `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y 10deg)`,                          `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} x y z / 10deg)`,                      `rgba(0, 0, 0, 0)`);

	    // Testing invalid component names
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} red y)`,                              `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} r y z)`,                              `rgba(0, 0, 0, 0)`);
	    testComputed(`color(from color(${colorSpace} 7 -20.5 100) ${colorSpace} l y z)`,                              `rgba(0, 0, 0, 0)`);
	}

    debug('');
    debug('Spec Examples');

    // Example 11.
    testComputed(`rgb(from var(--bg-color) r g b / 80%)`, `rgba(0, 0, 255, 0.8)`);

    // Example 12.
    testComputed(`lch(from var(--color) calc(l / 2) c h)`, `lch(23.138971% 67.989716 134.39125)`);

    // Example 13.
    testComputed(`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))`, `rgb(76, 76, 76)`)
    testComputed(`lch(from var(--color) l 0 h)`, `lch(46.277943% 0 134.39125)`)

    // Example 14.
    testComputed(`rgb(from indianred 255 g b)`, `rgb(255, 92, 92)`);

    // Example 15.
    testComputed(`hsl(from var(--accent) calc(h + 180deg) s l)`, `rgb(178, 32, 40)`);

    // Example 16.
    testComputed(`lab(from var(--mycolor) l a b / 100%)`, `lab(62.751923% 52.45802 -34.117283)`);
    testComputed(`lab(from var(--mycolor) l a b / calc(alpha * 0.8))`, `lab(62.751923% 52.45802 -34.117283 / 0.8)`);
    testComputed(`lab(from var(--mycolor) l a b / calc(alpha - 20%))`, `lab(62.751923% 52.45802 -34.117283 / 0.8)`);

    // Example 17.
    testComputed(`lab(from var(--mycolor) l 0 0)`, `lab(62.751923% 0 0)`);

    // Example 18.
    testComputed(`lch(from peru calc(l * 0.8) c h)`, `lch(49.80138% 54.003296 63.680317)`);

    // Example 19.
    testComputed(`LCH(from var(--accent) l c calc(h + 180deg))`, `lch(65.49473% 39.446903 10.114471)`);

    // Example 20.
    testComputed(`lch(from var(--mycolor) l 0 h)`, `lch(62.751923% 0 326.96112)`);
    testComputed(`var(--mygray)`, `lch(62.751923% 0 326.96112)`);
    testComputed(`lch(from var(--mygray) l 30 h)`, `lch(62.751923% 30 326.96112)`);
    
</script>
    
<script src="../../resources/js-test-post.js"></script>
</body>
</html>