recompute-variables-when-parent-style-updates.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
body {
  --a: red;
  --b: blue;
}

.setAToGreen {
  --a: green;
}

.setAToB {
  --a: var(--b);
}

.backgroundA {
  background: var(--a);
}
</style>
<div id="outer">
  <div class="backgroundA" id='backgroundA'></div>

  <div class="setAToB">
    <div class="backgroundA" id='backgroundB'></div>
  </div>
</div>

<script>
test(function() {
  var red = "rgb(255, 0, 0)";
  var blue = "rgb(0, 0, 255)";
  var green = "rgb(0, 128, 0)";
  assert_equals(getComputedStyle(backgroundA).backgroundColor, red);
  assert_equals(getComputedStyle(backgroundB).backgroundColor, blue);
  outer.classList.add('setAToGreen');
  assert_equals(getComputedStyle(backgroundA).backgroundColor, green);
  assert_equals(getComputedStyle(backgroundB).backgroundColor, blue);
}, 'Custom properties are recomputed when parent style changes.');
</script>

chromium/third_party/blink/web_tests/fast/css/variables/recompute-variables-when-parent-style-updates.html