<!doctype html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#e {
    --green: {
        background-color: green;
    };
    @apply --green;

    @apply --unknown;
    --red: {
        background-color: red;
    };
    @apply--red;
    @apply red;
    @apply(--red);
    @apply --red !important;
    @apply --red { }
    @apply { background-color: red; }
    --redvar: --red;
    @apply var(--redvar);

    --red2: { background-color: red; } bla ;
    @apply --red2;

    --var1: @apply;
    --var2: @apply foo;
    --var3: @apply --red :/ ;
    --var4: @apply --red @apply --red;
    --var5: @apply --red {;

    width: 100px;
    height: 100px;

    animation: anim 0s both;
}

@apply --red;

@keyframes anim {
    100% {
        @apply --red;
    }
}
</style>
<div id=e>
</div>
<script>
test(function(){
    assert_equals(getComputedStyle(e).backgroundColor, "rgb(0, 128, 0)");
    assert_equals(getComputedStyle(e).getPropertyValue("--var1"), "");
    assert_equals(getComputedStyle(e).getPropertyValue("--var2"), "");
    assert_equals(getComputedStyle(e).getPropertyValue("--var3"), "");
    assert_equals(getComputedStyle(e).getPropertyValue("--var4"), "");
    assert_equals(getComputedStyle(e).getPropertyValue("--var5"), "");
}, "Tests various invalid @apply rules get rejected");
</script>