- From: Brian Manthos <brianman@microsoft.com>
- Date: Tue, 24 Jan 2012 18:19:54 +0000
- To: Sylvain Galineau <sylvaing@microsoft.com>, Tab Atkins Jr. <jackalmage@gmail.com>
- CC: "L. David Baron" <dbaron@dbaron.org>, fantasai <fantasai@inkedblade.net>, www-style list <www-style@w3.org>
http://dev.w3.org/csswg/css3-values/#calc
[1]# It can be used wherever <length>, <frequency>, <angle>, <time>, or <number> values are allowed.
[2]# A math expression has a resolved type, which is one of ‘<length>’, ‘<frequency>’, ‘<angle>’, ‘<time>’, or ‘<number>’.
[3]# The resolved type must be valid for where the expression is placed; otherwise, the expression is invalid.
[4]
http://www.w3.org/TR/css3-background/#the-background-position
<bg-position> = [
[ top | bottom ]
|
[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]?
|
[ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]
From [1], calc() cannot be used in place of <percentage> in a grammar.
From [2] and [3], when used in place of <length> the calc expression is either invalid or must resolve to a <length>.
DIV { width: 200px; height: 400px; font-size: 20px; }
Example A
Background-position: calc(5%);
=> background-position: 10px;
Example B
Background-position: calc(5%) bottom;
=> background-position: 10px bottom;
Example C
Background-position: calc(5%) calc(10%);
=> background-position: 10px 40px;
Example D
Background-position: calc(5% + 1em);
=> background-position: calc(5% + 20px);
=> background-position: 30px;
The rules for calc in Values (1,2,3 above) make it pretty clear it has to resolve to a <length>.
The fact that "background-position: 10%;" and "background-position: calc(10%);" can result in differ renderings is perhaps unfortunate, but required by the specs as I read them.
Received on Tuesday, 24 January 2012 18:20:54 UTC