title: Why display property set to inherit with CSS variable doesn't work?
body: <p>I set the display property for divs to <code>in
  line-block</code>. I then created four classes:</p>
  
  <ul>
  <li>no-var, which sets display to <code>inherit</code></li>
  <li>var, which sets display to a variable set to <code>inherit</code></li>
  <li>var-none, which sets display to a variable set to <code>none</code></li>
  <li>var-default, which sets display to a variable set to <code>inherit</code> and a default of <code>grid</code></li>
  </ul>
  
  <p>The actual style that is used by each class doesn't seem to be correct, though:</p>
  
  <ul>
  <li>The no-var class correctly inherits display to <code>block</code></li>
  <li>The var class doesn't get the <code>inherit</code> value from the variable and displays as <code>inline-block</code></li>
  <li>The var-none class correctly sets display to <code>none</code> and is hidden</li>
  <li>The var-default class doesn't get the <code>inherit</code> value from the variable and sets display to the default</li>
  </ul>
  
  <p>For each of these classes I added variables and defaults for the color property, which all work as expected. Are variables supposed to ignore <code>inherit</code> and <code>unset</code> values?</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>:root {
    --display: inherit;
    --display-none: none;
    --color: red;
  }
  div  {
    display: inline-block;
    color: green;
  }
  .no-var {
    display: inherit;
    color: red;
  }
  .var {
    display: var(--display);
    color: var(--color);
  }
  .var-none {
    display: var(--display-none);
  }
  .var-default {
    display: var(--display, grid);
    color: var(--color, purple);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="no-var"&gt;
    No variable
  &lt;/div&gt;
  &lt;div class="no-var"&gt;
    No variable
  &lt;/div&gt;
  &lt;div class="var"&gt;
    Variable
  &lt;/div&gt;
  &lt;div class="var"&gt;
    Variable
  &lt;/div&gt;
  &lt;div class="var-none"&gt;
    None
  &lt;/div&gt;
  &lt;div class="var-none"&gt;
    None
  &lt;/div&gt;
  &lt;div class="var-default"&gt;
    Default
  &lt;/div&gt;
  &lt;div class="var-default"&gt;
    Default
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>