<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
header {
  --x: black;
}

main {
  --x: green;
}

button {
  background: var(--x);
}
</style>

<header><button id='a'></button></header>
<main><button id='b'></button></header>
<script>
test(function() {
  assert_equals(getComputedStyle(a).backgroundColor, 'rgb(0, 0, 0)');
  assert_equals(getComputedStyle(b).backgroundColor, 'rgb(0, 128, 0)');
}, "uninherited properties don't reuse values when set to variables.");

</script>