Re: CSS3 calc(): ability to calculate on 'current' value

One example would be a 'popout' effect:

img { width: calc(0.5); float: left; }
img:active { transform: scale(2); }

Scaling down by width allows the image to take up less space in favour of
surrounding text, then scaling up with transform allows the image to pop
over to 1:1 size without reflowing the surrounding text.

But generally, I'd see this as a very important building block which would
allow calc to be used in ways only otherwise be achievable through
JavaScript.

Another example would be if if you have a text box with a background
color.  If you want the box to have 50% text at the top and 50% free space
at the bottom it would be great if you could say:

div { height: calc(2); background-color: lightcoral; }



On 20 September 2013 20:07, Tab Atkins Jr. <jackalmage@gmail.com> wrote:

> On Thu, Sep 19, 2013 at 10:57 AM, Eoghan Murray <eoghan@getthere.ie>
> wrote:
> > I can do the following in CSS3:
> >
> >     img { width: calc(66%); }
> >
> > which is equivalent to doing:
> >
> >     img { width: 66%; }
> >
> > which resizes the image width to 66% of it's containing element.
> >
> > What I'd like to be able to do is to be able to calculate based on the
> > current (i.e. default or auto) width of the image.
> > A syntax for this could be:
> >
> >     img { width: calc(auto * 0.66); }
> >
> > or just plain:
> >
> >     img { width: calc(0.66); }
> >
> > I think there is an omission here, as percentages cover very different
> > ground:
> > http://www.w3.org/TR/css3-values/#percentage-value
> > "The value may be that of another property for the same element, a
> property
> > for an ancestor element, or a value of the formatting context (e.g., the
> > width of a containing block)"
> >
> > (Aside: transform: scale(0.66); doesn't have the effect I'm intending as
> it
> > doesn't alter layout)
>
> What are you actually trying to do with something like this?  Do you
> have examples?
>
> ~TJ
>