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