Is this a browser bug? Inheritence in variables with background-color

Question

I found that I couldn't get the background color to inherit the background colour of another element when declared inside a variable function in css. Here is an example of what I am encountering. Is this a bug?

div,span{
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}
/* Background test*/
.Xb {
  background: blue;
  height: 10px;
}

.Ybv {
  position: absolute;
  background: var(--mycolor,inherit);
}

.Yb {
  position: absolute;
  background: inherit;
}

/* Color test*/
.Xc {
  color: blue;
  height: 10px;
}

.Ycv {
  position: absolute;
  color: var(--mycolor,inherit);
}

.Yc {
  position: absolute;
  color: inherit;
}

/* Font test*/
.Xf {
  font-family: arial;
  height: 10px;
}

.Yfv {
  position: absolute;
  color: var(--myfont,inherit);
}

.Yf {
  position: absolute;
  color: inherit;
}

<div class="Xb">
  <div class="Ybv">Background inherit in var</div>
</div>

<br/><br/><br/>

<div class="Xb">
  <div class="Yb">Background inherit without var</div>
</div>

<br/><br/><br/>

<div class="Xc">
  <div class="Ycv">Color inherit in var</div>
</div>

<br/><br/><br/>

<div class="Xc">
  <div class="Yc">Color inherit without var</div>
</div>

<br/><br/><br/>

<div class="Xf">
  <div class="Yfv">Font inherit in var</div>
</div>

<br/><br/><br/>

<div class="Xf">
  <div class="Yf">Font inherit without var</div>
</div>

As you can see the sub-divs all have the correct properties, except for the first one in the example "Background inherit in var", because it should have a blue background. It works with color and with font-family. Why not with background-color?

Above is a table of the results. Perhaps more tests are necessary?

I understand that there are special cases with absolute positioning and inheritance, could this play a factor? I tried to create a wrapper element but it didn't do anything to solve it.

Edit: I tested it using background instead of background-color and it behaved the same way.

Edit: This is not a duplicate. Other questions discuss the use of inherit being assigned to a custom property and why it doesn't make sense. This question discusses the use of inherit as a fallback value in the var(--var, fallback) function, as well as the quirks associated with it and the differences between browsers.

Edit: Bug report filed here: https://bugzilla.mozilla.org/show_bug.cgi?id=1544886

Answer 1

Update: the bug seems to be corrected in the last Firefox version (68). Stil some properties aren't working fine on Chrome

---

I have simplified your code and tested with other properties and found that it's not working with height/box-shadow but it's working with other propeties. In Fiferox nothing is working. I think it's a bug.

.Xb {
  background-color: red;
  height: 100px;
  padding:0 30px;
  margin: 10px;
  box-shadow:2px 2px 20px blue;
  position:relative;
  border:1px solid green;
}

.Ybv {
  /*doesn't work*/
  background-color: var(--var,inherit);
  height:var(--var,inherit);
  box-shadow:var(--var,inherit);
  /*works on Chrome and not Fiferox */
  border:var(--var,inherit);
  padding:var(--var,inherit);
  margin:var(--var,inherit);
}

<div class="Xb">
  <div class="Ybv">inherit in var</div>
</div>

Considering the specification:

When a custom property has its initial value, var() functions cannot use it for substitution. Attempting to do so makes the declaration invalid at computed-value time, unless a valid fallback is specified.

also

To substitute a var() in a property’s value:

1. If the custom property named by the first argument to the var() function is animation-tainted, and the var() function is being used in the animation property or one of its longhands, treat the custom property as having its initial value for the rest of this algorithm.
2. If the value of the custom property named by the first argument to the var() function is anything but the initial value, replace the var() function by the value of the corresponding custom property.
3. Otherwise, if the var() function has a fallback value as its second argument, replace the var() function by the fallback value. If there are any var() references in the fallback, substitute them as well.
4. Otherwise, the property containing the var() function is invalid at computed-value time.

It's clear that in all the cases we have a valid fallback value that should be used.

---

As a side note, testing with properties like color and font is inaccurate because the are inherited by default so if the var() is failing you will still have the expected result.

---

By the way, We can also read that:

A declaration can be invalid at computed-value time if it contains a var() that references a custom property with its initial value ... When this happens, the computed value of the property is either the property’s inherited value or its initial value depending on whether the property is inherited or not.

It's like some of declarations are invalidated thus we are using the initial value.

There is also a small note saying:

Note: Other things can also make a property invalid at computed-value time.

Not sure what are those other things but probably this is what is happening here if it's not a bug.