blob: a578ce416c67d06c5f7bbcf1eba306fa50c8d7f7 [file] [log] [blame]
<!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>