112 lines
2.9 KiB
HTML
112 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>@scope - name-defining at-rules</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#scope-scope">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<main id=main></main>
|
|
|
|
<template id=test_keyframes>
|
|
<style>
|
|
@scope (#inner) {
|
|
@keyframes --my-anim {
|
|
from { background-color: rgb(0, 0, 255); }
|
|
to { background-color: rgb(0, 0, 255); }
|
|
}
|
|
}
|
|
@scope (#outer) {
|
|
@keyframes --my-anim {
|
|
from { background-color: rgb(0, 128, 0); }
|
|
to { background-color: rgb(0, 128, 0); }
|
|
}
|
|
}
|
|
#animating {
|
|
animation: --my-anim 1000s linear;
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div id=inner>
|
|
<div id=animating></div>
|
|
<div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(test_keyframes.content.cloneNode(true));
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
assert_equals(getComputedStyle(animating).backgroundColor, 'rgb(0, 128, 0)');
|
|
}, '@keyframes is unaffected by @scope');
|
|
</script>
|
|
|
|
<template id=test_keyframes_non_matching>
|
|
<style>
|
|
@scope (#nomatch) {
|
|
@keyframes --my-anim {
|
|
from { background-color: rgb(0, 128, 0); }
|
|
to { background-color: rgb(0, 128, 0); }
|
|
}
|
|
}
|
|
#animating {
|
|
animation: --my-anim 1000s linear;
|
|
}
|
|
</style>
|
|
<div id=animating></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(test_keyframes_non_matching.content.cloneNode(true));
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
assert_equals(getComputedStyle(animating).backgroundColor, 'rgb(0, 128, 0)');
|
|
}, '@keyframes is unaffected by non-matching @scope');
|
|
</script>
|
|
|
|
<template id=test_property>
|
|
<style>
|
|
@scope (#inner) {
|
|
@property --my-prop {
|
|
syntax: "<length>";
|
|
initial-value: 1px;
|
|
inherits: false;
|
|
}
|
|
}
|
|
@scope (#outer) {
|
|
@property --my-prop {
|
|
syntax: "<length>";
|
|
initial-value: 2px;
|
|
inherits: false;
|
|
}
|
|
}
|
|
</style>
|
|
<div id=outer>
|
|
<div id=inner>
|
|
<div id=subject></div>
|
|
<div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(test_property.content.cloneNode(true));
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
assert_equals(getComputedStyle(subject).getPropertyValue('--my-prop'), '2px');
|
|
}, '@property is unaffected by @scope');
|
|
</script>
|
|
|
|
<template id=test_property_non_matching>
|
|
<style>
|
|
@scope (#nomatch) {
|
|
@property --my-prop {
|
|
syntax: "<length>";
|
|
initial-value: 2px;
|
|
inherits: false;
|
|
}
|
|
}
|
|
</style>
|
|
<div id=subject></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
main.append(test_property_non_matching.content.cloneNode(true));
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
assert_equals(getComputedStyle(subject).getPropertyValue('--my-prop'), '2px');
|
|
}, '@property is unaffected by non-matching @scope');
|
|
</script>
|