blob: 48f6d12875d4a3b6adc1812052d52b09d2f6e1ad [file] [log] [blame]
<!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)', 'calc(300px)', '300px');
testExpression('max(100px , 200px)', 'calc(200px)', '200px');
testExpression('max(100px,200px)', 'calc(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.606961px)', propertyName == 'width' ? '31.59375px' : '31.606962px');
testExpression('calc(1px * pow(2, sqrt(100))', 'calc(1024px)', '1024px');
testExpression('hypot(4px, 5px, 7px, 9px)', 'calc(13.076697px)', propertyName == 'width' ? '13.0625px' : '13.076696px');
testExpression('hypot(3px, 4px)', 'calc(5px)', '5px');
testExpression('calc(100px * hypot(3, 4))', 'calc(500px)', '500px');
testExpression('hypot(-5px)', 'calc(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>