<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Nested calculations using intermediate CSS Custom Properties don't work"
href="https://bugs.webkit.org/show_bug.cgi?id=161002">161002</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Nested calculations using intermediate CSS Custom Properties don't work
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>Safari Technology Preview
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh
</td>
</tr>
<tr>
<th>OS</th>
<td>OS X 10.11
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>CSS
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>sgomes@google.com
</td>
</tr></table>
<p>
<div>
<pre>As per example 9 in section 2.2 (Resolving Dependency Cycles) of the spec (<a href="https://drafts.csswg.org/css-variables/">https://drafts.csswg.org/css-variables/</a>), 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: <a href="http://codepen.io/anon/pen/bZJaVO">http://codepen.io/anon/pen/bZJaVO</a>
The expected result is that the third div in both groups is 30px wide.
Steps to reproduce:
1 - Load <a href="http://codepen.io/anon/pen/bZJaVO">http://codepen.io/anon/pen/bZJaVO</a>
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.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>