Description
Quirks mode allows to specify lengths without units, so do some SVG properties like stroke-width. However, when you mix this with calc() units, stuff gets complex very fast (calc() becomes ambiguous) and the results across browsers become a bit bizarre.
Trivial example (link):
<!doctype html>
<div id=a style="stroke-width: calc(2 * 2)"></div>
<div id=b style="stroke-width: calc(2px * 2)"></div>All browsers agree on the computed value of #b, being 4px as expected. For #a, we get:
- Firefox: Computed value is the initial value (
1px) because the expression doesn't parse (Firefox doesn't propagate this quirk intocalc()). - WebKit: It parses, computed value is
0px. - Blink: It parses, computed value is
2px.
I think having the ambiguity of whether a <number> should be treated something is a <length> or not inside math expressions is not worth it and it's only going to get more complex as we add more math functions. Thus I'd like to standardize on Firefox's behavior, if other people agree.
Otherwise we could try to parse / resolve calc() both as a <number> and a <length-percentage>, I guess, which would allow for the previous example, but would disallow stuff like calc(4 * 100% + 4) or such...
Relevant links: