<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 - calc(): + and - with one operand of unitless length 0 and another of a length with explicit units are incorrectly ignored as invalid"
href="https://bugs.webkit.org/show_bug.cgi?id=161271">161271</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>calc(): + and - with one operand of unitless length 0 and another of a length with explicit units are incorrectly ignored as invalid
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Unspecified
</td>
</tr>
<tr>
<th>OS</th>
<td>Unspecified
</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>bicknellr@google.com
</td>
</tr></table>
<p>
<div>
<pre>Example URL:
<a href="http://jsbin.com/jejewa/1/edit?html,output">http://jsbin.com/jejewa/1/edit?html,output</a>
Steps to reproduce the problem:
Write a CSS rule using `calc()` to produce a length and add unitless zero to that length within the `calc()`. For example, `calc(1px + 0)`. The rule will be considered invalid.
What is the expected behavior?
Unitless zero is a valid length (<a href="https://www.w3.org/TR/css-values/#lengths">https://www.w3.org/TR/css-values/#lengths</a>, <a href="https://drafts.csswg.org/css-values-3/#lengths">https://drafts.csswg.org/css-values-3/#lengths</a>) so adding and subtracting unitless zero and other lengths with explicit units should resolve to the type of unit of the other operand.
One specific problem this bug results in is when using `calc()` with CSS custom properties. If you write a `calc()` function using a custom property as an operand to an addition or subtraction with a length, the person setting the value of that custom property you've provided can't use the unitless zero shorthand even though it is a valid length.
What went wrong?
Safari (and all other browsers I tested) report this kind of expression as invalid and ignore it.
Also filed against Chrome:
<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=641556">https://bugs.chromium.org/p/chromium/issues/detail?id=641556</a></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>