<!DOCTYPE html>
<html>
    <body>
        <script src="../../resources/js-test-pre.js"></script>
        <div id="testDiv"></div>
        <script>
            description("Tests parsing of various valid and invalid calc expressions.");

            var testDiv = document.getElementById("testDiv");
            
            function testExpression(expression, specifiedValue, computedValue)
            {
                debug('');
                testDiv.style["width"] = '999px';

                evalAndLog(`testDiv.style["width"] = "${expression}"`);
                shouldBeEqualToString("testDiv.style['width']", `${specifiedValue}`);
                shouldBeEqualToString("window.getComputedStyle(testDiv).getPropertyValue('width')", `${computedValue}`);
            }

            // Valid expressions.
            testExpression('calc(100px)', 'calc(100px)', '100px');
            testExpression('max(100px + 200px)', 'max(300px)', '300px');
            testExpression('max(100px , 200px)', 'max(200px)', '200px');
            testExpression('max(100px,200px)', 'max(200px)', '200px');
            testExpression('clamp(100px,123px,200px)', 'clamp(100px, 123px, 200px)', '123px');
            testExpression('clamp(100px,300px,200px)', 'clamp(100px, 300px, 200px)', '200px');
            testExpression('clamp(200px,300px,100px)', 'clamp(200px, 300px, 100px)', '200px');
            testExpression('clamp((50px + 50px),40px,200px)', 'clamp(100px, 40px, 200px)', '100px');
            testExpression('clamp(50px + 50px,40px,200px)', 'clamp(100px, 40px, 200px)', '100px');

            // Non-parsing expression.
            testExpression('calc(100px, 200px)', '999px', '999px');
            testExpression('calc(100px  200px)', '999px', '999px');

            testExpression('calc(100px ( 200px)', '999px', '999px');

            testExpression('min(100px 200px)', '999px', '999px');
            testExpression('max(100px 200px)', '999px', '999px');
            testExpression('max(100px,, 200px)', '999px', '999px');
            testExpression('max(100px, , 200px)', '999px', '999px');
            testExpression('max(100px, 200px,)', '999px', '999px');

            testExpression('clamp(200px,300px)', '999px', '999px');
            testExpression('clamp(200px,300px,)', '999px', '999px');
            testExpression('clamp(200px,,300px)', '999px', '999px');
            testExpression('clamp((),,300px)', '999px', '999px');
            testExpression('clamp(1px,2px,2px,4px)', '999px', '999px');
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>