<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Color 4: Resolving color values</title>
<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
<link rel="help" href="https://drafts.csswg.org/css-color-4/#resolving-color-values">
<meta name="assert" content="Tests if color values are resolved properly">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<div id="parent" style="color: rgb(45, 23, 27)">
    <div id="inner"></div>
</div>

<script>
    function color_test(color, expected, reason) {
        test(function() {
            var element = document.getElementById('inner');
            // Random value not in our test data.
            fail_value = "rgb(12, 34, 223)"
            element.style.color = "black";
            element.style.cssText = "color: " + fail_value + "; color: " + color;

            if (expected === null)
                assert_equals(getComputedStyle(element).color, fail_value);
            else
                assert_equals(getComputedStyle(element).color, expected);
        }, `${reason}: ${color}`);
    }

    function expected_value(rgb_channels) {
        if (rgb_channels === null)
            return null;
        else if (rgb_channels.length === 3 || rgb_channels[3] == 1)
            return "rgb(" + rgb_channels.slice(0, 3).join(", ") + ")";
        else
            return "rgba(" + rgb_channels.join(", ") + ")";
    }

    tests = [
        // Keyword tests
        ["", null, "Should not parse invalid keyword"],
        [" /* hey */\n", null, "Should not parse invalid keyword"],
        ["4", null, "Should not parse invalid keyword"],
        ["top", null, "Should not parse invalid keyword"],
        ["/**/transparent", [0, 0, 0, 0], "Should parse to completely transparent"],
        ["transparent", [0, 0, 0, 0], "Should parse to completely transparent"],
        [" transparent\n", [0, 0, 0, 0], "Should parse to completely transparent"],
        ["TransParent", [0, 0, 0, 0], "Should parse to completely transparent"],
        ["currentColor", [45, 23, 27], "Should be same as parent color"],
        ["CURRENTcolor", [45, 23, 27], "Should be same as parent color"],
        ["current-Color", null, "Should not parse invalid keyword"],
        ["black", [0, 0, 0, 1], "Should parse as correct value"],
        ["white", [255, 255, 255, 1], "Should parse as correct value"],
        ["fuchsia", [255, 0, 255, 1], "Should parse as correct value"],
        ["cyan", [0, 255, 255, 1], "Should parse as correct value"],
        ["CyAn", [0, 255, 255, 1], "Should parse as cyan"],

        // Hex tests
        ["#", null, "Should not parse invalid hex"],
        ["#f", null, "Should not parse invalid hex"],
        ["#ff", null, "Should not parse invalid hex"],
        ["#fff", [255, 255, 255, 1], "Valid 3-digit hex"],
        ["#ffg", null, "Should not parse invalid hex"],
        ["#ffff", [255, 255, 255, 1], "Valid 4-digit hex"],
        ["#fffg", null, "Should not parse invalid hex"],
        ["#fffff", null, "Should not parse invalid hex"],
        ["#ffffff", [255, 255, 255, 1], "Valid 6-digit hex"],
        ["#fffffg", null, "Should not parse invalid hex"],
        ["#fffffff", null, "Should not parse invalid hex"],
        ["#ffffffff", [255, 255, 255, 1], "Valid 8-digit hex"],
        ["#fffffffg", null, "Should not parse invalid hex"],
        ["#fffffffff", null, "Should not parse invalid hex"],
        ["#FFCc99", [255, 204, 153, 1], "Valid 6-digit hex"],
        ["#369", [51, 102, 153, 1], "Valid 3-digit hex"],

        // RGB tests
        ["rgb(00, 51, 102)", [0, 51, 102, 1], "Valid numbers should be parsed"],
        ["r\\gb(00, 51, 102)", [0, 51, 102, 1], "Correct escape sequences should still parse"],
        ["r\\67 b(00, 51, 102)", [0, 51, 102, 1], "Correct escape sequences should still parse"],
        ["RGB(153, 204, 255)", [153, 204, 255, 1], "Capitalization should not affect parsing"],
        ["rgB(0, 0, 0)", [0, 0, 0, 1], "Capitalization should not affect parsing"],
        ["rgB(0, 51, 255)", [0, 51, 255, 1], "Capitalization should not affect parsing"],
        ["rgb(0,51,255)", [0, 51, 255, 1], "Lack of whitespace should not affect parsing"],
        ["rgb(0\t,  51 ,255)", [0, 51, 255, 1], "Whitespace should not affect parsing"],
        ["rgb(/* R */0, /* G */51, /* B */255)", [0, 51, 255, 1], "Comments should be allowed within function"],
        ["rgb(-51, 306, 0)", [0, 255, 0, 1], "Invalid values should be clamped to 0 and 255 respectively"],
        ["rgb(42%, 3%, 50%)", [107, 8, 128, 1], "Valid percentages should be parsed"],
        ["RGB(100%, 100%, 100%)", [255, 255, 255, 1], "Capitalization should not affect parsing"],
        ["rgB(0%, 0%, 0%)", [0, 0, 0, 1], "Capitalization should not affect parsing"],
        ["rgB(10%, 20%, 30%)", [26, 51, 77, 1], "Capitalization should not affect parsing"],
        ["rgb(10%,20%,30%)", [26, 51, 77, 1], "Whitespace should not affect parsing"],
        ["rgb(10%\t,  20% ,30%)", [26, 51, 77, 1], "Whitespace should not affect parsing"],
        ["rgb(/* R */ 10%, /* G */ 20%, /* B */ 30%)", [26, 51, 77, 1], "Comments should not affect parsing"],
        ["rgb(-12%, 110%, 1400%)", [0, 255, 255, 1], "Invalid values should be clamped to 0 and 255 respectively"],
        ["rgb(10%, 50%, 0)", null, "Values must be all numbers or all percentages"],
        ["rgb(255, 50%, 0%)", null, "Values must be all numbers or all percentages"],
        ["rgb(0, 0 0)", null, "Comma optional syntax requires no commas at all"],
        ["rgb(0, 0, 0deg)", null, "Angles are not accepted in the rgb function"],
        ["rgb(0, 0, light)", null, "Keywords are not accepted in the rgb function"],
        ["rgb()", null, "The rgb function requires 3 or 4 arguments"],
        ["rgb(0)", null, "The rgb function requires 3 or 4 arguments"],
        ["rgb(0, 0)", null, "The rgb function requires 3 or 4 arguments"],
        ["rgb(0%)", null, "The rgb function requires 3 or 4 arguments"],
        ["rgb(0%, 0%)", null, "The rgb function requires 3 or 4 arguments"],
        ["rgb(0, 0, 0, 0)", [0, 0, 0, 0], "RGB and RGBA are synonyms"],
        ["rgb(0%, 0%, 0%, 0%)", [0, 0, 0, 0], "RGB and RGBA are synonyms"],
        ["rgb(0%, 0%, 0%, 0)", [0, 0, 0, 0], "RGB and RGBA are synonyms"],
        ["rgba(0, 0, 0, 0)", [0, 0, 0, 0], "Valid numbers should be parsed"],
        ["rgba(204, 0, 102, 0.3)", [204, 0, 102, 0.3], "Valid numbers should be parsed"],
        ["RGBA(255, 255, 255, 0)", [255, 255, 255, 0], "Capitalization should not affect parsing"],
        ["rgBA(0, 51, 255, 1)", [0, 51, 255, 1], "Capitalization should not affect parsing"],
        ["rgba(0, 51, 255, 1.1)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(0, 51, 255, 37)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(0, 51, 255, 0.42)", [0, 51, 255, 0.42], "Valid numbers should be parsed"],
        ["rgba(0, 51, 255, 0)", [0, 51, 255, 0], "Valid numbers should be parsed"],
        ["rgba(0, 51, 255, -0.1)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(0, 51, 255, -139)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["RGBA(100%, 100%, 100%, 0)", [255, 255, 255, 0], "Capitalization should not affect parsing"],
        ["rgba(42%, 3%, 50%, 0.3)", [107, 8, 128, 0.3], "Valid percentages should be parsed"],
        ["rgBA(0%, 20%, 100%, 1)", [0, 51, 255, 1], "Capitalization should not affect parsing"],
        ["rgba(0%, 20%, 100%, 1.1)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(0%, 20%, 100%, 37)", [0, 51, 255, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(0%, 20%, 100%, 0.42)", [0, 51, 255, 0.42], "Valid percentages should be parsed"],
        ["rgba(0%, 20%, 100%, 0)", [0, 51, 255, 0], "Valid percentages should be parsed"],
        ["rgba(0%, 20%, 100%, -0.1)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(0%, 20%, 100%, -139)", [0, 51, 255, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["rgba(255, 255, 255, 0%)", [255, 255, 255, 0], "Percent alpha values are accepted in rgb/rgba"],
        ["rgba(0%, 0%, 0%, 0%)", [0, 0, 0, 0], "Percent alpha values are accepted in rgb/rgba"],
        ["rgba(0%, 0%, 0%)", [0, 0, 0, 1], "RGB and RGBA are synonyms"],
        ["rgba(0, 0, 0)", [0, 0, 0, 1], "RGB and RGBA are synonyms"],
        ["rgba(10%, 50%, 0, 1)", null, "Values must be all numbers or all percentages"],
        ["rgba(255, 50%, 0%, 1)", null, "Values must be all numbers or all percentages"],
        ["rgba(0, 0, 0 0)", null, "Comma optional syntax requires no commas at all"],
        ["rgba(0, 0, 0, 0deg)", null, "Angles are not accepted in the rgb function"],
        ["rgba(0, 0, 0, light)", null, "Keywords are not accepted in the rgb function"],
        ["rgba()", null, "The rgba function requires 3 or 4 arguments"],
        ["rgba(0)", null, "The rgba function requires 3 or 4 arguments"],
        ["rgba(0, 0, 0, 0, 0)", null, "The rgba function requires 3 or 4 arguments"],
        ["rgba(0%)", null, "The rgba function requires 3 or 4 arguments"],
        ["rgba(0%, 0%)", null, "The rgba function requires 3 or 4 arguments"],
        ["rgba(0%, 0%, 0%, 0%, 0%)", null, "The rgba function requires 3 or 4 arguments"],

        // HSL tests
        ["HSL(0, 0%, 0%)", [0, 0, 0, 1], "Capitalization should not affect parsing"],
        ["hsL(0, 100%, 50%)", [255, 0, 0, 1], "Capitalization should not affect parsing"],
        ["hsl(60, 100%, 37.5%)", [191, 191, 0, 1], "Valid numbers should be parsed"],
        ["hsl(780, 100%, 37.5%)", [191, 191, 0, 1], "Angles are represented as a part of a circle and wrap around"],
        ["hsl(-300, 100%, 37.5%)", [191, 191, 0, 1], "Angles are represented as a part of a circle and wrap around"],
        ["hsl(300, 50%, 50%)", [191, 64, 191, 1], "Valid numbers should be parsed"],
        ["hsl(30deg, 100%, 100%)", [255, 255, 255, 1], "Angles are accepted in HSL/HSLA"],
        ["hsl(0, 0%, 0%, 0%)", [0, 0, 0, 0], "HSL and HSLA are synonyms"],
        ["hsl(10, 50%, 0)", null, "The second and third parameters of hsl/hsla must be a percent"],
        ["hsl(50%, 50%, 0%)", null, "The first parameter of hsl/hsla must be a number or angle"],
        ["hsl(0, 0% 0%)", null, "Comma optional syntax requires no commas at all"],
        ["hsl(0, 0%, light)", null, "Keywords are not accepted in the hsl function"],
        ["hsl()", null, "The hsl function requires 3 or 4 arguments"],
        ["hsl(0)", null, "The hsl function requires 3 or 4 arguments"],
        ["hsl(0, 0%)", null, "The hsl function requires 3 or 4 arguments"],
        ["HSLA(-300, 100%, 37.5%, 1)", [191, 191, 0, 1], "Angles are represented as a part of a circle and wrap around"],
        ["hsLA(-300, 100%, 37.5%, 12)", [191, 191, 0, 1], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["hsla(-300, 100%, 37.5%, 0.2)", [191, 191, 0, 0.2], "Angles are represented as a part of a circle and wrap around"],
        ["hsla(-300, 100%, 37.5%, 0)", [191, 191, 0, 0], "Angles are represented as a part of a circle and wrap around"],
        ["hsla(-300, 100%, 37.5%, -3)", [191, 191, 0, 0], "Invalid alpha values should be clamped to 0 and 1 respectively"],
        ["hsla(0, 0%, 0%, 50%)", [0, 0, 0, 0.5], "Percent alpha values are accepted in hsl/hsla"],
        ["hsla(30deg, 100%, 100%, 1)", [255, 255, 255, 1], "Angles are accepted in HSL/HSLA"],
        ["hsla(10, 50%, 0, 1)", null, "The second and third parameters of hsl/hsla must be a percent"],
        ["hsla(50%, 50%, 0%, 1)", null, "The first parameter of hsl/hsla must be a number or angle"],
        ["hsla(0, 0% 0%, 1)", null, "Comma optional syntax requires no commas at all"],
        ["hsla(0, 0%, light, 1)", null, "Keywords are not accepted in the hsla function"],
        ["hsla()", null, "The hsla function requires 3 or 4 arguments"],
        ["hsla(0)", null, "The hsla function requires 3 or 4 arguments"],
        ["hsla(0, 0%)", null, "The hsla function requires 3 or 4 arguments"],
        ["hsla(0, 0%, 0%, 1, 0%)", null, "The hsla function requires 3 or 4 arguments"]
    ]

    for (var value in tests) {
        items_to_test = tests[value];
        color_test(items_to_test[0], expected_value(items_to_test[1]), items_to_test[2]);
    }
</script>