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

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都具有正确的属性，除了示例“Background inherit in var”中的第一个属性，因为它应该具有蓝色背景。它适用于颜色和font-family。为什么不用背景色？

以上是结果表。也许更多的测试是必要的？

我知道有绝对定位和继承的特殊情况，这可能起到一个作用吗？我试图创建一个包装元素，但它没有做任何事情来解决它。

编辑：我使用background而不是background-color测试它，它的行为方式相同。

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

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

Answer 1

更新：该错误似乎在上一个Firefox版本中得到了纠正（68）。 Stil的一些属性在Chrome上运行不正常

---

我已经简化了您的代码并使用其他属性进行了测试，发现它不能与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（）函数正在动画属性或其中一个长整数中使用，请将自定义属性视为具有其初始值。其余的这个算法。
2. 如果var（）函数的第一个参数指定的自定义属性的值不是初始值，则将var（）函数替换为相应自定义属性的值。
3. 否则，如果var（）函数将回退值作为其第二个参数，则使用回退值替换var（）函数。如果后备中有任何var（）引用，也可以替换它们。
4. 否则，包含var（）函数的属性在计算值时间无效。

很明显，在所有情况下，我们都有一个应该使用的有效回退值。

---

作为旁注，使用color和font等属性进行测试是不准确的，因为默认情况下会继承，所以如果var()失败，您仍然会得到预期的结果。

---

顺便说一下，我们还可以读到：

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

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

还有一个小小的说法：

注意：其他事情也可能使属性在计算值时间无效。

不知道那些其他东西是什么，但可能这就是这里发生的事情，如果它不是一个bug。