variable-resolution-order-independent.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
div {
    width: 100px;
    height: 100px;
}
#firstdiv {
    --green: green;
    --clr: var(--green);
    --foo: var(--clr);
    --bar: var(--clr);
    background-color: var(--bar);
}
#seconddiv {
    --green: green;
    --clr: var(--green);
    --bar: var(--clr);
    --foo: var(--clr);
    background-color: var(--bar);
}
</style>

<div id="firstdiv"></div>
<div id="seconddiv"></div>

<script>
test(function() {
  assert_equals(getComputedStyle(firstdiv).backgroundColor, 'rgb(0, 128, 0)');
  assert_equals(getComputedStyle(seconddiv).backgroundColor, 'rgb(0, 128, 0)');
}, 'Background color needs to resolved to green independent of ordering of variable declaration.');
</script>

chromium/third_party/blink/web_tests/fast/css/variables/variable-resolution-order-independent.html