<html>
    <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
    description("Test the parsing of color() function colors.");

    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 testComputed(property, value, expected)
    {
        shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
    }

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

    for (const color of [ "srgb", "srgb-linear", "a98-rgb", "rec2020", "prophoto-rgb" ]) {
        debug('');
        debug(`Testing color(${color} ...)`);
        
        testComputed("background-color", `color(${color} 0% 0% 0%)`, `color(${color} 0 0 0)`);
        testComputed("background-color", `color(${color} 10% 10% 10%)`, `color(${color} 0.1 0.1 0.1)`);
        testComputed("background-color", `color(${color} .2 .2 25%)`, `color(${color} 0.2 0.2 0.25)`);
        testComputed("background-color", `color(${color} 0 0 0 / 1)`, `color(${color} 0 0 0)`);
        testComputed("background-color", `color(${color} 0% 0 0 / 0.5)`, `color(${color} 0 0 0 / 0.5)`);
        testComputed("background-color", `color(${color} 20% 0 10/0.5)`, `color(${color} 0.2 0 10 / 0.5)`);
        testComputed("background-color", `color(${color} 20% 0 10/50%)`, `color(${color} 0.2 0 10 / 0.5)`);
        testComputed("background-color", `color(${color} 400% 0 10/50%)`, `color(${color} 4 0 10 / 0.5)`);
        testComputed("background-color", `color(${color} 50% -160 160)`, `color(${color} 0.5 -160 160)`);
        testComputed("background-color", `color(${color} 50% -200 200)`, `color(${color} 0.5 -200 200)`);
        testComputed("background-color", `color(${color} 0 0 0 / -10%)`, `color(${color} 0 0 0 / 0)`);
        testComputed("background-color", `color(${color} 0 0 0 / 110%)`, `color(${color} 0 0 0)`);
        testComputed("background-color", `color(${color} 0 0 0 / 300%)`, `color(${color} 0 0 0)`);
        testComputed("background-color", `color(${color} 50% -200)`, `color(${color} 0.5 -200 0)`);
        testComputed("background-color", `color(${color} 50%)`, `color(${color} 0.5 0 0)`);
        testComputed("background-color", `color(${color})`, `color(${color} 0 0 0)`);
        testComputed("background-color", `color(${color} 50% -200 / 0.5)`, `color(${color} 0.5 -200 0 / 0.5)`);
        testComputed("background-color", `color(${color} 50% / 0.5)`, `color(${color} 0.5 0 0 / 0.5)`);
        testComputed("background-color", `color(${color} / 0.5)`, `color(${color} 0 0 0 / 0.5)`);

        debug('');
        debug('Test invalid values');
        testComputed("background-color", `color(${color} 0 0 0 0)`, `rgba(0, 0, 0, 0)`);
        testComputed("background-color", `color(${color} 0deg 0% 0)`, `rgba(0, 0, 0, 0)`);
        testComputed("background-color", `color(${color} 0% 0 0 1)`, `rgba(0, 0, 0, 0)`);
        testComputed("background-color", `color(${color} 0% 0 0 10%)`, `rgba(0, 0, 0, 0)`);
        testComputed("background-color", `color(${color} 0% 0 0deg)`, `rgba(0, 0, 0, 0)`);
        testComputed("background-color", `color(${color} 0% 0% 0deg)`, `rgba(0, 0, 0, 0)`);
        testComputed("background-color", `color(${color} 40% 0 0deg)`, `rgba(0, 0, 0, 0)`);
    }

    for (const color of [ "xyz", "xyz-d50", "xyz-d65" ]) {
        debug('');
        debug(`Testing color(${color} ...)`);
  
  	  	const resultColorSpace = color == "xyz" ? "xyz-d65" : color; 
  
	    testComputed("background-color", `color(${color} 0 0 0)`, `color(${resultColorSpace} 0 0 0)`);
	    testComputed("background-color", `color(${color} 0 0 0 / 1)`, `color(${resultColorSpace} 0 0 0)`);
	    testComputed("background-color", `color(${color} 1 1 1)`, `color(${resultColorSpace} 1 1 1)`);
	    testComputed("background-color", `color(${color} 1 1 1 / 1)`, `color(${resultColorSpace} 1 1 1)`);
	    testComputed("background-color", `color(${color} -1 -1 -1)`, `color(${resultColorSpace} -1 -1 -1)`);
	    testComputed("background-color", `color(${color} 0.1 0.1 0.1)`, `color(${resultColorSpace} 0.1 0.1 0.1)`);
	    testComputed("background-color", `color(${color} 10 10 10)`, `color(${resultColorSpace} 10 10 10)`);
	    testComputed("background-color", `color(${color} .2 .2 .25)`, `color(${resultColorSpace} 0.2 0.2 0.25)`);
	    testComputed("background-color", `color(${color} 0 0 0 / 0.5)`, `color(${resultColorSpace} 0 0 0 / 0.5)`);
	    testComputed("background-color", `color(${color} .20 0 10/0.5)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`);
	    testComputed("background-color", `color(${color} .20 0 10/50%)`, `color(${resultColorSpace} 0.2 0 10 / 0.5)`);
	    testComputed("background-color", `color(${color} 0 0 0 / -10%)`, `color(${resultColorSpace} 0 0 0 / 0)`);
	    testComputed("background-color", `color(${color} 0 0 0 / 110%)`, `color(${resultColorSpace} 0 0 0)`);
	    testComputed("background-color", `color(${color} 0 0 0 / 300%)`, `color(${resultColorSpace} 0 0 0)`);
	    testComputed("background-color", `color(${color} 1 1)`, `color(${resultColorSpace} 1 1 0)`);
	    testComputed("background-color", `color(${color} 1)`, `color(${resultColorSpace} 1 0 0)`);
	    testComputed("background-color", `color(${color})`, `color(${resultColorSpace} 0 0 0)`);
	    testComputed("background-color", `color(${color} 1 1 / .5)`, `color(${resultColorSpace} 1 1 0 / 0.5)`);
	    testComputed("background-color", `color(${color} 1 / 0.5)`, `color(${resultColorSpace} 1 0 0 / 0.5)`);
	    testComputed("background-color", `color(${color} / 50%)`, `color(${resultColorSpace} 0 0 0 / 0.5)`);

	    debug('');
	    debug('Test invalid values');
	    testComputed("background-color", `color(${color} 0 0 0 0)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 0deg 0% 0)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 0% 0 0)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 0% 0 0 1)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 0% 0 0 10%)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 0% 0 0deg)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 0% 0% 0deg)`, `rgba(0, 0, 0, 0)`);
	    testComputed("background-color", `color(${color} 40% 0 0deg)`, `rgba(0, 0, 0, 0)`);
	}

</script>
    
<script src="../../resources/js-test-post.js"></script>
</body>
</html>