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

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

                    evalAndLog(`element.style["${propertyName}"] = "${expression}"`);
                    shouldBeEqualToString(`element.style['${propertyName}']`, `${specifiedValue}`);
                    shouldBeEqualToString(`getComputedStyle(element).getPropertyValue('${propertyName}')`, `${computedValue}`);
                }
                
                function testValue(expression, computedValue)
                {
                    debug('');
                    element.style[propertyName] = '999px';
                    evalAndLog(`element.style["${propertyName}"] = "${expression}"`);
                    var value = Math.round(getComputedStyle(element).getPropertyValue(propertyName).slice(0,-2));
                    shouldBe(`${value}`, 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');
                testExpression('min(100px,0%)', 'min(100px, 0%)', propertyName == 'width' ? '0px' : "min(100px, 0%)");
                testExpression('max(100px,0%)', 'max(100px, 0%)', propertyName == 'width' ? '100px' : "max(100px, 0%)");
                testExpression('clamp(100px,0%,1%)', 'clamp(100px, 0%, 1%)', propertyName == 'width' ? '100px' : "clamp(100px, 0%, 1%)");
                testExpression('calc(100px * pow(2, pow(2, 2)))', 'calc(1600px)', '1600px');
                testExpression('calc(1px * pow(2, 3))', 'calc(8px)', '8px')
                testExpression('calc(100px * sqrt(100))', 'calc(1000px)', '1000px');
                testExpression('calc(1px * sqrt(999))', 'calc(31.606961258558215px)', propertyName == 'width' ? '31.59375px' : '31.606962203979492px');
                testExpression('calc(1px * pow(2, sqrt(100))', 'calc(1024px)', '1024px');
                testExpression('hypot(4px, 5px, 7px, 9px)', 'hypot(13.076696830622021px)', propertyName == 'width' ? '13.0625px' : '13.076696395874023px');
                testExpression('hypot(3px, 4px)', 'hypot(5px)', '5px');
                testExpression('calc(100px * hypot(3, 4))', 'calc(500px)', '500px');
                testExpression('hypot(-5px)', 'hypot(5px)', '5px');
                testExpression('calc(1px * hypot(-5))', 'calc(5px)', '5px');
                testExpression('calc(1px * hypot(10000))', 'calc(10000px)', '10000px');
                testExpression('calc(2px * sqrt(100000000))', 'calc(20000px)', '20000px');
                testExpression('calc(3px * pow(200, 4))', 'calc(4800000000px)', '33554428px');
                testValue('calc(sin(90deg) * 100px)', '100');
                testValue('calc(sin(45deg  +  45deg ) * 100px)', '100');
                testValue('calc(cos( 0 ) * 100px)', '100');
                testValue('calc(cos( 30deg - 30deg ) * 100px)', '100');
                testValue('calc(tan(45deg)*100px)', '100');
                testValue('calc(tan(30deg + 15deg) * 100px)', '100');
                testValue('calc(sin(pi/2) * 100px)', '100');
                testValue('calc(cos(e - e) * 100px)', '100');

                // Non-parsing expressions.
                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');
                testExpression('calc(1px * pow(1))', '999px', '999px');
                testExpression('calc(1px * pow(2px, 3px))', '999px', '999px');
                testExpression('calc(sqrt(100px)', '999px', '999px');
                testExpression('hypot(2px, 40%)', '999px', '999px');
                testExpression('hypot(2px, 3)', '999px', '999px');
                testExpression('hypot(3, ,4)', '999px', '999px');
                testExpression('calc(1px * pow(2 3))', '999px', '999px');
                testExpression('hypot()', '999px', '999px');
                testExpression('calc(pow(2))', '999px', '999px');
                testExpression('pow())', '999px', '999px', '999px'); 
                testExpression('calc(sqrt())', '999px', '999px');
                testExpression('calc(sqrt(100, 200))', '999px', '999px');
                testExpression('calc(sin(90px) * 100px)', '999px', '999px');
                testExpression('calc(sin(30deg + 1.0471967rad, 0) * 100px)', '999px', '999px');
                testExpression('calc(cos( 0 ,) * 100px)', '999px', '999px');
                testExpression('calc(cos( () 30deg - 0.523599rad ) * 100px)', '999px', '999px');
                testExpression('calc(tan(45deg ) ) * 100px)', '999px', '999px');
                testExpression('calc(tan(30deg, + 0.261799rad) * 100px)', '999px', '999px');
                testExpression('calc(sin(piiii/4) * 100px)', '999px', '999px');
                testExpression('calc(sin(e e/4) * 100px)', '999px', '999px');
                testExpression('calc(sin() * 100px)', '999px', '999px');
            }

            testProperty("width");
            testProperty("min-width");
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>