mirror of
https://github.com/servo/servo.git
synced 2025-06-25 17:44:33 +01:00
170 lines
No EOL
4.3 KiB
HTML
170 lines
No EOL
4.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>@scope - nesting (&)</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
|
|
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nest-selector">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<main id=main></main>
|
|
|
|
<template id=test_nest_scope_end>
|
|
<div>
|
|
<style>
|
|
@scope (.a) to (& > &) {
|
|
* { z-index:1; }
|
|
}
|
|
</style>
|
|
<div class=a> <!-- This scope is limited by the element below. -->
|
|
<div class=a> <!-- This scope is limited by its own root. -->
|
|
<div id=below></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id=outside></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_nest_scope_end.content.cloneNode(true));
|
|
|
|
assert_equals(getComputedStyle(below).zIndex, 'auto');
|
|
assert_equals(getComputedStyle(outside).zIndex, 'auto');
|
|
}, 'Nesting-selector in <scope-end>');
|
|
</script>
|
|
|
|
<template id=test_nest_scope_end_implicit_scope>
|
|
<div>
|
|
<style>
|
|
/* (.b) behaves like (:scope .b), due :scope being prepended
|
|
implicitly. */
|
|
@scope (.a) to (.b) {
|
|
:scope { z-index:1; }
|
|
}
|
|
|
|
/* Should not match, since <scope-end> refers to the scope itself. */
|
|
@scope (.a) to (.b:scope) {
|
|
:scope { z-index:42; }
|
|
}
|
|
</style>
|
|
<div class="a b">
|
|
<div class=b>
|
|
<div id=below></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id=outside></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_nest_scope_end_implicit_scope.content.cloneNode(true));
|
|
let a = document.querySelector('.a');
|
|
let b = document.querySelector('.a > .b');
|
|
assert_equals(getComputedStyle(a).zIndex, '1');
|
|
assert_equals(getComputedStyle(b).zIndex, 'auto');
|
|
assert_equals(getComputedStyle(below).zIndex, 'auto');
|
|
assert_equals(getComputedStyle(outside).zIndex, 'auto');
|
|
}, 'Implicit :scope in <scope-end>');
|
|
</script>
|
|
|
|
<template id=test_relative_selector_scope_end>
|
|
<div>
|
|
<style>
|
|
@scope (.a) to (> .b) {
|
|
*, :scope { z-index:1; }
|
|
}
|
|
</style>
|
|
<div class="a b">
|
|
<div class=b>
|
|
<div id=below></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id=outside></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_relative_selector_scope_end.content.cloneNode(true));
|
|
let a = document.querySelector('.a');
|
|
let b = document.querySelector('.a > .b');
|
|
assert_equals(getComputedStyle(a).zIndex, '1');
|
|
assert_equals(getComputedStyle(b).zIndex, 'auto');
|
|
assert_equals(getComputedStyle(below).zIndex, 'auto');
|
|
assert_equals(getComputedStyle(outside).zIndex, 'auto');
|
|
}, 'Relative selectors in <scope-end>');
|
|
</script>
|
|
|
|
<template id=test_inner_nest>
|
|
<div>
|
|
<style>
|
|
@scope (.a) {
|
|
& + & {
|
|
z-index:1;
|
|
}
|
|
}
|
|
</style>
|
|
<div class=a>
|
|
<div id=inner1 class=a></div>
|
|
<div id=inner2 class=a></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_inner_nest.content.cloneNode(true));
|
|
|
|
assert_equals(getComputedStyle(inner1).zIndex, 'auto');
|
|
assert_equals(getComputedStyle(inner2).zIndex, '1');
|
|
}, 'Nesting-selector in the scope\'s <stylesheet>');
|
|
</script>
|
|
|
|
<template id=test_parent_in_pseudo_scope>
|
|
<div>
|
|
<style>
|
|
@scope (#div) {
|
|
:scope {
|
|
z-index: 1;
|
|
& {
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<div id=div></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_parent_in_pseudo_scope.content.cloneNode(true));
|
|
|
|
assert_equals(getComputedStyle(div).zIndex, '2');
|
|
}, 'Nesting-selector within :scope rule');
|
|
</script>
|
|
|
|
<template id=test_parent_in_pseudo_scope_double>
|
|
<div>
|
|
<style>
|
|
@scope (#div) {
|
|
:scope {
|
|
z-index: 1;
|
|
& {
|
|
& {
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
<div id=div></div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_parent_in_pseudo_scope_double.content.cloneNode(true));
|
|
|
|
assert_equals(getComputedStyle(div).zIndex, '2');
|
|
}, 'Nesting-selector within :scope rule (double nested)');
|
|
</script> |