[css3-values] The 'calc' function

There seem to be problems with the intended inheritance logic of CSS 3 'calc' function compared to that of CSS 2.1. 

First, the following sentence "The expression within the parethesis is computed at the same time as 'em' lengths are computed" (http://www.w3.org/TR/css3-values/#calc) suggests that the value can be resolved during style cascade (independent of layout). However, this is not going to work if percentage values (as shown in the example) are to be supported since they can be resolve only during layout.

Further, if the 'value' is supposed to be inherited as an expression then the following will be inconsistent with CSS 2.1

<parent style="width: 1em; font-size:100px" />  // clearly the with will compute to 100px;
  <child style="width: inherit; font-size:200px" />  // the inherited value here will be 100px not 1em which resolved to 200px at this level

<parent style="width: calc(1em); font-size: 100px" />  // clearly the with will compute to 100px;
  <child style="width: inherit; font-size: 200px" />  // the inherited 'value' here will be 1em which will resolve to 200px and differ from the CSS 2.1 behavior above

On the other hand if the value is to be inherited after layout resolution the following is inconsistent with CSS 2.1:

Assume the available width after layout is 200px  <parent style="width: 50%;" />  // clearly the with will compute to 100px;
  <child style="width: inherit;" />  // the inherited value here will be 50% which resolves to 50px at this level

Assume the available width after layout is 200px  <parent style="width: calc(50%);" />  // clearly the with will compute to 100px;
  <child style="width: inherit;" />  // the inherited value here will be 100px and differ from the CSS 2.1 behavior above

I'd be great if anyone could clarify this.

Thanks,
Rossen Atanassov

Received on Wednesday, 7 April 2010 11:49:05 UTC