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

Reinsure

Note that you can use background: var(--mycolor, inherit). Also note that I have no clue why you see what you see. – Artiodactyl

I would vote for a bug, I was using this before : https://mcmap.net/q/46861/-how-to-store-inherit-value-inside-a-css-variable-aka-custom-property/8620333 and never saw this issue – Freya

also note than color and font are inherited by default so testing with them isn't really accurate because if the var() fail they will get inherited without the need of inherit – Freya

@Artiodactyl it also fails with background, try it out. I believe it is likely due to the absolute positioning, but I don't understand why, or why it would only affect some properties. – Reinsure

on chrome background is working fine – Freya

Possible duplicate of How do I set a value of `inherit` to a CSS custom property? – Advent

@chharvy I'm the one that created the link from that one to this one via a comment. I don't think it's a duplicate because it addresses various quirks. I don't want this to be flagged as duplicate, because I believe it is still unresolved and don't want it to get locked. – Reinsure

don't worry, one vote will not close it, no one will vote more on this (he even voted for my question and another unrelated question). If it get closed ping me, I will reopen it. – Freya

Note that the <br> tag does not use and does not need a closing slash and never has in HTML. – Dysgraphia

@Dysgraphia I'm in the habit of using XHTML because my projects use XHTML and <br> would be invalid because it would be invalid XML. – Reinsure

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.

Freya

So it still seems like a bit of a mystery! Good investigative work. I'll see if anyone else chimes in. I did read the docs, but like you, concluded that I didn't appear to be doing anything wrong. – Reinsure

@adjenks it's either a bug or values like inherit/initial, etc aren't well defined on how they should behave. I will do more tests and probably report a bug – Freya

I was going to report it myself, but okay, if you do report it, please add a link here. – Reinsure

@adjenks you can do it ;) I will still wait more to do other tests – Freya

There does seem to be a wide variance of behavior between browsers for these style-sheets... – Reinsure

@adjenks they corrected the bug in the last FF version. Now FF is doing better than chrome – Freya

Woo!!! All the bugs and incompatibilities like these I found (Mostly in Edge) drove me to using a framework instead of using vanilla javascript to write web components. I wanted to make web components in pure javascript so that I wouldn't be vendor locked, but alas, it didn't seem like an option, so I used VueJS. – Reinsure