0

I believe the first two examples should have a green background and I believe the last example should fail because supplying another var() function as the first parameter is not defined behavior in the docs https://www.w3.org/TR/css-variables/#cycles

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

Question 1: Why is example "12" not working?

Question 2: Why is example "56" working and should it be?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
ADJenks
  • 2,973
  • 27
  • 38
  • duplicate of the first question: https://stackoverflow.com/q/51660196/8620333 – Temani Afif Apr 16 '19 at 21:58
  • Thank you, I didn't find that question. It is indeed a duplicate. Should I delete this? – ADJenks Apr 16 '19 at 22:04
  • no it can also be useful, we still have few questions around CSS variable so having many *similar* ones written differently can be helpful to bring search result – Temani Afif Apr 16 '19 at 22:06

1 Answers1

0

After closely inspecting the developer tools and how the rules are evaluated I've decided to answer my own question.

Example "12" is not working because when you declare --c1: var(--c1,red); it immediately overrules its old value due to cascading rules, so the internal reference to --c1 refers to the same line and generates a cycle, and the documentation states that:

If there is a cycle in the dependency graph, all the custom properties in the cycle must compute to their initial value (which is a guaranteed-invalid value).

Example "56" appears to be working but it is not actually working, rule --c3: var(var(--c3),red); is completely invalid and is ignored, therefore example "56" acts identically to example "34".

ADJenks
  • 2,973
  • 27
  • 38