CSS自定义属性的依赖关系无法解析，为什么？此外，我是否发现了未记录的行为？

Question

我认为前两个示例应该具有绿色背景，并且我认为最后一个示例应该失败，因为在文档https://www.w3.org/TR/css-variables/#cycles中未提供另一个var()函数作为第一个参数的行为未定义

.test1 {
  --c1: green;
}
.test2 {
  --c1: var(--c1,red);
  background-color: var(--c1,pink);
}

.test3 {
  --c2: green;
}
.test4 {
  background-color: var(--c2,pink);
}

.test5 {
  --c3: green;
}
.test6 {
  --c3: var(var(--c3),red);
  background-color: var(--c3,pink);
}

<div class="test1">
  <div class="test2">
    12
  </div>
</div>

<div class="test3">
  <div class="test4">
    34
  </div>
</div>

<div class="test5">
  <div class="test6">
    56
  </div>
</div>

问题1： 为什么示例“ 12”不起作用？

问题2： 示例“ 56”为什么起作用，应该起作用？

Answer 1

在仔细检查了开发人员工具以及如何评估规则之后，我决定回答自己的问题。

示例“ 12”不起作用，因为当您声明--c1: var(--c1,red);时，由于级联规则，它立即推翻了其旧值，因此对--c1的内部引用指向同一行并生成一个循环，并且文档中指出：

  

如果依赖图中有一个循环，则所有自定义   循环中的属性必须计算为其初始值（即   保证无效的值）。

示例“ 56”似乎正在运行，但实际上并未运行，规则--c3: var(var(--c3),red);完全无效并且被忽略，因此示例“ 56”的行为与示例“ 34”相同。