59 lines
3.2 KiB
HTML
59 lines
3.2 KiB
HTML
<!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}`);
|
|
}
|
|
|
|
// 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%)");
|
|
|
|
// 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');
|
|
}
|
|
|
|
testProperty("width");
|
|
testProperty("min-width");
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</body>
|
|
</html>
|