这是浏览器错误吗？具有背景色的变量的继承

Question

我发现在CSS的变量函数中声明背景色时，无法继承其他元素的背景色。这是我遇到的一个例子。这是错误吗？

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>

如您所见，所有子div都具有正确的属性，但示例“ BackgroundInherited in var”中的第一个除外，因为它应该具有蓝色背景。它适用于颜色和字体系列。为什么不使用背景色？

上面是结果表。也许需要更多测试吗？

我知道有些情况下具有绝对的定位和继承性，这会起到一定作用吗？我试图创建一个wrapper元素，但是它并没有解决任何问题。

编辑：我使用background而不是background-color对其进行了测试，其行为方式相同。

编辑：这不是重复项。其他问题讨论将inherit分配给自定义属性的用法，以及为什么它没有意义。这个问题讨论了inherit函数中var(--var, fallback)作为后备值的使用，以及与此相关的怪癖以及浏览器之间的差异。

编辑：在此处提交的错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1544886

Answer 1

我简化了您的代码并对其进行了其他属性测试，发现它不适用于height / box-shadow，但可以与其他属性一起使用。在Fiferox中没有任何工作。我认为这是一个错误。

.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>

考虑the specification：

  

当自定义属性具有其初始值时，var（）函数无法将其用于替换。尝试这样做会使声明在计算值时间无效，除非指定了有效的后备。

也

  

要在属性值中替换var（）：

     

  
1. 如果由var（）函数的第一个参数命名的自定义属性是受动画污染的，并且var（）函数正在animation属性或它的长手之一中使用，则将custom属性视为具有其初始值该算法其余部分的价值。
  
2. 如果由var（）函数的第一个参数命名的自定义属性的值不是初始值，请用相应的自定义属性的值替换var（）函数。
  
3. 否则，如果var（）函数的后备值作为其第二个参数，请用后备值替换var（）函数。如果后备中有任何var（）引用，也可以替代它们。
  
4. 否则，包含var（）函数的属性在计算值时间无效。
  

很明显，在所有情况下，我们都有应使用的有效后备值。

---

请注意，使用color和font之类的属性进行测试是不准确的，因为默认情况下继承了，因此，如果var()失败，您仍将获得预期的结果。 / p>

---

顺便说一句，我们也可以读到：

  

如果声明包含一个以初始值引用自定义属性的var（），则声明在计算值时间可能无效 ...当发生这种情况时，该属性的计算值是该属性的继承值或其初始值，具体取决于该属性是否被继承。

这就像某些声明无效，因此我们使用initial值。

还有一个小字条：

  

注意：其他情况也会使属性在计算值时间无效。

不确定那些其他东西是什么，但是如果不是错误，这可能就是这里正在发生的事情。