title: Why is a `calc()` width with an illegal value not ignored?
body: <p>Inspired by <a href="https://stackoverflow.com/q/41996221">this question</a>, I found this interesting phenomenon.</p>
  
  <p>Since negative widths are illegal, and therefore should be ignored, I would expect style properties like <code>width:-200px;</code> and <code>width:calc(0% - 200px);</code> to have no effect. And indeed, for the first one it doesn't. The second one, however, is not ignored: a width of 0 is used instead.</p>
  
  <p>See this example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {border:1px solid; background:lime;}
  
  #badwidth {width:-200px;}
  
  #badcalc {width:calc(0% - 200px);}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Div with bad width:
  &lt;div id="badwidth"&gt; &lt;/div&gt;
  
  Div with bad calc:
  &lt;div id="badcalc"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If the width property was ignored, the div would be its full width (like the top one). However, it is collapsed to 0 (see the black line to the left; that's the border).</p>
  
  <p>For reference, here are some other divs, to demonstrate 1) that <code>calc(0% - 200px)</code> by itself is not an error, and 2) that they work fine and the first snippet is an anomaly.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {border:1px solid; background:lime;}
  
  #calc {margin-right:calc(0% - 200px);}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>Plain div:
  &lt;div&gt; &lt;/div&gt;
  
  With calc(0% - 200px) in a place where it's OK:
  &lt;div id="calc"&gt; &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, why do normal widths and calculated widths behave differently?<br>
  If it was just one browser, I'd call it a bug. But they all treat this the same way! So there must be something I'm overlooking. What?</p>