<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#e {
    width: 100px;
    height: 100px;
    background-color: red;
    --apply1: @apply;
    --apply2: --red;
    --red: { background-color: red; };
    --foo: {
        background-color: green;
        var(--apply1) var(--apply2);
    };
    @apply --foo;
}
</style>
<div id=e>
</div>
<script>
test(function(){
    assert_equals(getComputedStyle(e).backgroundColor, "rgb(0, 128, 0)");
    assert_equals(getComputedStyle(e).getPropertyValue("--foo"), " { background-color: green;  @apply  --red; }");
}, "@apply inside custom properties don't get expanded if the @apply rule was " +
   "constructed from variable references");
</script>