Bug 161002 - Nested calculations using intermediate CSS Custom Properties don't work
Summary: Nested calculations using intermediate CSS Custom Properties don't work
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL: http://codepen.io/anon/pen/bZJaVO
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-08-19 11:09 PDT by Sergio Gomes
Modified: 2016-12-29 08:51 PST (History)
5 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Sergio Gomes 2016-08-19 11:09:07 PDT
As per example 9 in section 2.2 (Resolving Dependency Cycles) of the spec (https://drafts.csswg.org/css-variables/), it should be possible to have nested calculations:

one   { --foo: 10px; }
two   { --bar: calc(var(--foo) + 10px); }
three { --foo: calc(var(--bar) + 10px); }

This doesn't seem to work in Safari 9.1.2 or Safari Technology Preview.

Furthermore, it is stated: "Custom properties are left almost entirely unevaluated, except that they allow and evaluate the var() function in their value."
This implies that it should be possible to declare the intermediate calculations without calc() as well, as the value returned by var() would just be substituted into the new definition.

I have prepared a demo illustrating both ways of nesting calculations; one using calc() for the intermediate steps (as per the example above), and one using calc() for the final step only: http://codepen.io/anon/pen/bZJaVO
The expected result is that the third div in both groups is 30px wide.

Steps to reproduce:
1 - Load http://codepen.io/anon/pen/bZJaVO
2 - Observe third div in each group

Expected results: third div should be 30px wide.

Actual results: third div is 10px wide in Safari 9.1.2; third div fits to screen width in Safari Technology Preview.

Other browsers: The demo produces the expected result in both Chrome 53 and Firefox 48.
Comment 1 Radar WebKit Bug Importer 2016-08-20 10:42:04 PDT
<rdar://problem/27936993>
Comment 2 Oliver Joseph Ash 2016-12-27 12:15:58 PST
I think the specific problem here is Safari doesn't like nested calcs: https://bugs.webkit.org/show_bug.cgi?id=166493
Comment 3 Talwinder Singh 2016-12-27 13:42:21 PST
@Oliver
There are two separate issues that are outlined. The nested calc issue as you mentioned. But also the fact that declaring a computed value (using arthimatic operations) for a variable is valid even without wrapping it inside a calc. This is also working in FF and Chrome but not in Safari.
Comment 4 Sergio Gomes 2016-12-29 06:06:03 PST
As an update, this issue appears to be resolved in Safari Tech Preview Release 20! Fingers crossed it will make it into a stable release soon.

Marking the issue as resolved for now, but I'll keep an eye out to make sure there aren't any regressions in new TP releases.
Comment 5 Oliver Joseph Ash 2016-12-29 08:45:58 PST
(In reply to comment #4)
> As an update, this issue appears to be resolved in Safari Tech Preview
> Release 20! Fingers crossed it will make it into a stable release soon.
> 
> Marking the issue as resolved for now, but I'll keep an eye out to make sure
> there aren't any regressions in new TP releases.

Does this also mean this bug is fixed? https://bugs.webkit.org/show_bug.cgi?id=166493
Comment 6 Sergio Gomes 2016-12-29 08:51:12 PST
(In reply to comment #5)
> (In reply to comment #4)
> > As an update, this issue appears to be resolved in Safari Tech Preview
> > Release 20! Fingers crossed it will make it into a stable release soon.
> > 
> > Marking the issue as resolved for now, but I'll keep an eye out to make sure
> > there aren't any regressions in new TP releases.
> 
> Does this also mean this bug is fixed?
> https://bugs.webkit.org/show_bug.cgi?id=166493

Yes, it appears to be. I'll add a note to it.