<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#e {
    --green: green;
    --width: 100px;
    --foo: {
        background-color: var(--green, red);
        width: var(--width);
        height: var(--unknown, 200px);
    };
    @apply --foo;
}
</style>
<div id=e>
</div>
<script>
test(function(){
    assert_equals(getComputedStyle(e).backgroundColor, "rgb(0, 128, 0)");
    assert_equals(getComputedStyle(e).width, "100px");
    assert_equals(getComputedStyle(e).height, "200px");
}, "Tests that variables can be referenced inside @apply rules");
</script>