Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 12 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-cascade/scope-style-sharing-002.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<title>@scope - Cousin Style Sharing</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<main id=main></main>
<template id=test_1>
<style>
@scope (.scope-start) to (:scope:last-of-type > .foo) {
.foo {
z-index: 1;
}
}
</style>
<div class="scope-start">
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_1.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, '1');
assert_equals(getComputedStyle(second).zIndex, 'auto');
}, '@scope with cousin style sharing, second sibling exits scope');
</script>
<template id=test_2>
<style>
@scope (.scope-start) to (:scope:first-of-type > .foo) {
.foo {
z-index: 1;
}
}
.scope-start:first-child {
color: green;
}
</style>
<div class="scope-start">
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_2.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, 'auto');
assert_equals(getComputedStyle(second).zIndex, '1');
}, '@scope with cousin style sharing, first sibling exits scope');
</script>
<template id=test_3>
<style>
@scope (.scope-start:first-of-type > .foo) {
:scope {
z-index: 1;
}
}
</style>
<div class="scope-start">
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_3.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, '1');
assert_equals(getComputedStyle(second).zIndex, 'auto');
}, '@scope with cousin style sharing, first sibling enters scope');
</script>
<template id=test_4>
<style>
@scope (.scope-start:last-of-type > .foo) {
:scope {
z-index: 1;
}
}
</style>
<div class="scope-start">
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_4.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, 'auto');
assert_equals(getComputedStyle(second).zIndex, '1');
}, '@scope with cousin style sharing, second sibling enters scope');
</script>
<template id=test_5>
<div class="scope-start">
<style>
@scope {
.foo {
z-index: 1;
}
}
</style>
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_5.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, '1');
assert_equals(getComputedStyle(second).zIndex, 'auto');
}, '@scope with cousin style sharing, second sibling parent does not have implicit scope');
</script>
<template id=test_6>
<div class="scope-start">
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<style>
@scope {
.foo {
z-index: 1;
}
}
</style>
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_6.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, 'auto');
assert_equals(getComputedStyle(second).zIndex, '1');
}, '@scope with cousin style sharing, first sibling parent does not have implicit scope');
</script>
<template id=test_7>
<div class="scope-start">
<div id="first" class="foo">
<style>
@scope {
:scope {
z-index: 1;
}
}
</style>
</div>
</div>
<div class="scope-start">
<div id="second" class="foo">
</div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_7.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, '1');
assert_equals(getComputedStyle(second).zIndex, 'auto');
}, '@scope with cousin style sharing, second sibling does not have implicit scope');
</script>
<template id=test_8>
<div class="scope-start">
<div id="first" class="foo">
</div>
</div>
<div class="scope-start">
<div id="second" class="foo">
<style>
@scope {
:scope {
z-index: 1;
}
}
</style>
</div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_8.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, 'auto');
assert_equals(getComputedStyle(second).zIndex, '1');
}, '@scope with cousin style sharing, first sibling does not have implicit scope');
</script>
<template id=test_9>
<style>
@scope (.scope-start:has(> .bar)) {
.foo {
z-index: 1;
}
}
</style>
<div class="scope-start">
<div id="first" class="foo"></div>
<div class="bar"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_9.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, '1');
assert_equals(getComputedStyle(second).zIndex, 'auto');
}, '@scope with cousin style sharing, first sibling enters scope with :has');
</script>
<template id=test_10>
<style>
@scope (.scope-start:has(> .bar)) {
.foo {
z-index: 1;
}
}
</style>
<div class="scope-start">
<div id="first" class="foo"></div>
</div>
<div class="scope-start">
<div id="second" class="foo"></div>
<div class="bar"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_10.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, 'auto');
assert_equals(getComputedStyle(second).zIndex, '1');
}, '@scope with cousin style sharing, second sibling enters scope with :has');
</script>
<template id=test_11>
<style>
@scope (#first-parent) {
.foo {
z-index: 1;
}
}
</style>
<div id="first-parent">
<div id="first" class="foo"></div>
</div>
<div id="second-parent">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_11.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, '1');
assert_equals(getComputedStyle(second).zIndex, 'auto');
}, '@scope with cousin style sharing, first sibling enters scope ID selector');
</script>
<template id=test_12>
<style>
@scope (#second-parent) {
.foo {
z-index: 1;
}
}
</style>
<div id="first-parent">
<div id="first" class="foo"></div>
</div>
<div id="second-parent">
<div id="second" class="foo"></div>
</div>
</template>
<script>
test((t) => {
t.add_cleanup(() => main.replaceChildren());
main.append(test_12.content.cloneNode(true));
assert_equals(getComputedStyle(first).zIndex, 'auto');
assert_equals(getComputedStyle(second).zIndex, '1');
}, '@scope with cousin style sharing, second sibling enters scope ID selector');
</script>