<!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 calcWithNestedParens(content, parenCount)
            {
                let result = "calc";
                for (let i = 0; i < parenCount; ++i)
                    result += '(';
            
                result += content;
                for (let i = 0; i < parenCount; ++i)
                    result += ')';

                return result;
            }
            
            function calcWithManySubtractions(a, b, parenCount)
            {
                let result = "calc( " + a;
                for (let i = 0; i < parenCount; ++i)
                    result += ' - ' + b;
            
                result += ')'
                return result;
            }

            function calcWithManyDivisions(a, b, parenCount)
            {
                let result = "calc( " + a;
                for (let i = 0; i < parenCount; ++i)
                    result += ' / ' + b;
            
                result += ')'
                return result;
            }

            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}`);
            }

            testExpression(calcWithNestedParens('100px', 100), 'calc(100px)', '100px');
            testExpression(calcWithNestedParens('100px', 102), '999px', '999px');

            testExpression(calcWithManySubtractions('1000px', '1px', 102), 'calc(898px)', '898px');
            testExpression(calcWithManyDivisions('1000px', '1.01', 102), 'calc(362.42644086767854px)', '362.421875px');
        </script>
        <script src="../../resources/js-test-post.js"></script>
    </body>
</html>