<html>
    <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
    description("Test the parsing of lab(...), lch(...), oklab(...) and oklch(...) 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 colorSpace of [ "lab", "oklab" ]) {
        debug('');
        debug(`${colorSpace}(...)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 1)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(20% 0 10/0.5)`, `${colorSpace}(20% 0 10 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(20% 0 10/50%)`, `${colorSpace}(20% 0 10 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(400% 0 10/50%)`, `${colorSpace}(400% 0 10 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(50% -160 160)`, `${colorSpace}(50% -160 160)`);
        testComputed(`background-color`, `${colorSpace}(50% -200 200)`, `${colorSpace}(50% -200 200)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0 / -10%)`, `${colorSpace}(0% 0 0 / 0)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 110%)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 300%)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(-40% 0 0)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(50% -20 0)`, `${colorSpace}(50% -20 0)`);
        testComputed(`background-color`, `${colorSpace}(50% 0 -20)`, `${colorSpace}(50% 0 -20)`);

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

    for (const colorSpace of [ "lch", "oklch" ]) {
        debug('');
        debug(`${colorSpace}(...)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0deg)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0deg / 1)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(0% 0 0deg / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(100% 230 0deg / 0.5)`, `${colorSpace}(100% 230 0 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(20% 50 20deg/0.5)`, `${colorSpace}(20% 50 20 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(20% 50 20deg/50%)`, `${colorSpace}(20% 50 20 / 0.5)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 20deg / -10%)`, `${colorSpace}(10% 20 20 / 0)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 20deg / 110%)`, `${colorSpace}(10% 20 20)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 1.28rad)`, `${colorSpace}(10% 20 73.3386)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 380deg)`, `${colorSpace}(10% 20 20)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 -340deg)`, `${colorSpace}(10% 20 20)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 740deg)`, `${colorSpace}(10% 20 20)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 -700deg)`, `${colorSpace}(10% 20 20)`);
        testComputed(`background-color`, `${colorSpace}(-40% 0 0)`, `${colorSpace}(0% 0 0)`);
        testComputed(`background-color`, `${colorSpace}(20% -20 0)`, `${colorSpace}(20% 0 0)`);
        // hue (the third argument) can be either an angle or number, with number interpreted as degrees.
        testComputed(`background-color`, `${colorSpace}(0% 0 0 / 0.5)`, `${colorSpace}(0% 0 0 / 0.5)`); 
        testComputed(`background-color`, `${colorSpace}(10% 20 20 / 110%)`, `${colorSpace}(10% 20 20)`);
        testComputed(`background-color`, `${colorSpace}(10% 20 -700)`, `${colorSpace}(10% 20 20)`);

        debug('');
        debug('Test invalid values');

        testComputed(`background-color`, `${colorSpace}(0 0 0 / 0.5)`, `rgba(0, 0, 0, 0)`);
        testComputed(`background-color`, `${colorSpace}(20% 10 10deg 10)`, `rgba(0, 0, 0, 0)`);
        testComputed(`background-color`, `${colorSpace}(20% 10 10deg 10 / 0.5)`, `rgba(0, 0, 0, 0)`);
        testComputed(`background-color`, `color(${colorSpace} 20% 0 10 / 50%)`, `rgba(0, 0, 0, 0)`);
    }

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