<html>
    <script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<script>
    description("Test the parsing of lab(...) and lch(...) 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);
    }

    debug('lab()');
    testComputed("background-color", "lab(0% 0 0)", "lab(0% 0 0)");
    testComputed("background-color", "lab(0% 0 0 / 1)", "lab(0% 0 0)");
    testComputed("background-color", "lab(0% 0 0 / 0.5)", "lab(0% 0 0 / 0.5)");
    testComputed("background-color", "lab(20% 0 10/0.5)", "lab(20% 0 10 / 0.5)");
    testComputed("background-color", "lab(20% 0 10/50%)", "lab(20% 0 10 / 0.5)");
    testComputed("background-color", "lab(400% 0 10/50%)", "lab(400% 0 10 / 0.5)");
    testComputed("background-color", "lab(50% -160 160)", "lab(50% -160 160)");
    testComputed("background-color", "lab(50% -200 200)", "lab(50% -200 200)");
    testComputed("background-color", "lab(0% 0 0 / -10%)", "lab(0% 0 0 / 0)");
    testComputed("background-color", "lab(0% 0 0 / 110%)", "lab(0% 0 0)");
    testComputed("background-color", "lab(0% 0 0 / 300%)", "lab(0% 0 0)");
    testComputed("background-color", "lab(-40% 0 0)", "lab(0% 0 0)");
    testComputed("background-color", "lab(50% -20 0)", "lab(50% -20 0)");
    testComputed("background-color", "lab(50% 0 -20)", "lab(50% 0 -20)");

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

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

    testComputed("background-color", "lch(0 0 0 / 0.5)", "rgba(0, 0, 0, 0)");
    testComputed("background-color", "lch(20% 10 10deg 10)", "rgba(0, 0, 0, 0)");
    testComputed("background-color", "lch(20% 10 10deg 10 / 0.5)", "rgba(0, 0, 0, 0)");

    testComputed("background-color", "color(lab 20% 0 10 / 50%)", "rgba(0, 0, 0, 0)");

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