CSS calc() is not supported, elements become incorrectly sized or not rendered at all. #986
Description
CSS calc() does not appear to be supported, causing elements styled with it to not render correctly.
Example, in the sandbox:
<html>
<head>
<style>
.box1 {
border: 1px solid green;
height: 60px;
}
.box2 {
border: 1px solid red;
height: calc(30px + 30px);
}
</style>
</head>
<body dir="auto">
<div class="box1">
height set using height 60px
</div>
<div class="box2">
height set using height calc(30px + 30px)
</div>
</body>
</html>
renders the first div correctly at 60px height, but the height for the second one is ignored and the sandbox log shows
Found whitespace where one of a number, a percentage, a pixel value, an em value, an ex value, a pica value, a millimeter value, a centimeter value, an inch value, a point value, an angle value, a time value, a freq value, a string, an identifier, a URI, a hex color, or function was expected at line 7. Skipping declaration.
If you use calc(30px+30px) (without whitespace around the "+") you get the error:
(null#inline_style_1) Value for height must be an identifier, length, or percentage at line 7. Skipping declaration.
Margings, paddings and border widths sized using calc() will all render incorrectly as the value is skipped entirely.
Borders sized with calc() are not rendered at all.