Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-10 16:05:43 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

402
tests/wpt/web-platform-tests/css/css-cascade/scope-evaluation.html Normal file
View file

@ -0,0 +1,402 @@
<!DOCTYPE html>
<title>@scope - evaluation</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
function test_scope(script_element, callback_fn, description) {
test((t) => {
// The provided <script> element must be an immedate subsequent sibling of
// a <template> element.
let template_element = script_element.previousElementSibling;
assert_equals(template_element.tagName, 'TEMPLATE');
t.add_cleanup(() => main.replaceChildren());
main.append(template_element.content.cloneNode(true));
callback_fn();
}, description);
}
function assert_green(selector) {
assert_equals(getComputedStyle(main.querySelector(selector)).backgroundColor, 'rgb(0, 128, 0)');
}
function assert_not_green(selector) {
assert_equals(getComputedStyle(main.querySelector(selector)).backgroundColor, 'rgb(0, 0, 0)');
}
</script>
<style>
main * {
background-color: black;
}
</style>
<main id=main>
</main>
<!-- Tests follow -->
<template>
<style>
@scope (.a) {
span { background-color: green; }
}
</style>
<div class=a>
<span>green</span>
</div>
<div class=b>
<span>not green</span>
</div>
<span>not green</span>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a > span');
assert_not_green('.b > span');
assert_not_green(':scope > span');
}, 'Single scope');
</script>
<template>
<style>
@scope (.a) {
.a { background-color: green; }
}
</style>
<div class=a> <!-- green -->
<span>not green</span>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a');
assert_not_green('.a > span');
}, 'Single scope (self)');
</script>
<template>
<style>
@scope (.a) to (.c) {
span { background-color: green; }
}
</style>
<div class=a>
<div class=b>
<span>green</span>
</div>
<div class=c>
<span>not green</span>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.b > span');
assert_not_green('.c > span');
}, 'Single scope with limit');
</script>
<template>
<style>
@scope (.a) {
:scope > span { background-color: green; }
}
</style>
<div class=a>
<span>green</span>
<div class=b>
<span>not green</span>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a > span');
assert_not_green('.b > span');
}, 'Single scope, :scope pseudo in main selector');
</script>
<template>
<style>
@scope (.a) to (:scope > .b) {
span { background-color: green; }
}
</style>
<div class=a>
<div class=b>
<span>not green</span>
</div>
<div class=c>
<div class=b>
<span>green</span>
</div>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_not_green('.a > .b > span');
assert_green('.a > .c > .b > span');
}, 'Single scope, :scope pseudo in to-selector');
</script>
<template>
<style>
@scope (.a) to (:scope > .b) {
span { background-color: green; }
}
</style>
<div class=a>
<div class=b>
<span>not green</span>
</div>
<div class=a>
<div class=b>
<span>green</span>
</div>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_not_green('.a > .b > span');
// Note that this span is in the outer .a-scope, but not in the inner scope.
assert_green('.a > .a > .b > span');
}, 'Multiple scopes, :scope pseudo in to-selector');
</script>
<template>
<style>
@scope (.a) {
@scope (:scope > .b) {
span { background-color: green; }
}
}
</style>
<div class=a>
<div class=b>
<span>green</span>
</div>
<div>
<div class=b>
<span>not green</span>
</div>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a > .b > span');
assert_not_green('.a > div > .b > span');
}, 'Inner @scope with :scope in from-selector');
</script>
<template>
<style>
@scope (.a) to (:scope > .b) {
.c { background-color: green; }
}
</style>
<div class=a>
<div>
<div class=a>
<div class=b>
<div class=c></div>
</div>
</div>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
// Not in the inner scope, but is in the outer scope.
assert_green('.c');
}, 'Multiple scopes from same @scope-rule, only one limited');
</script>
<template>
<style>
@scope (.a) to (.b) {
.c { background-color: green; }
}
</style>
<div class=a>
<div>
<div class=a>
<div class=b>
<div class=c></div>
</div>
</div>
</div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_not_green('.c');
}, 'Multiple scopes from same @scope-rule, both limited');
</script>
<template>
<style>
@scope (.a) {
@scope (.b) {
span { background-color: green; }
}
}
</style>
<div class=a>
<div class=b>
<span>green</span>
</div>
<span>not green</span>
</div>
<div class=b>
<span>not green</span>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a > .b > span');
assert_not_green('.a > span');
assert_not_green(':scope > .b > span');
}, 'Nested scopes');
</script>
<template>
<style>
@scope (.b) {
@scope (.a) {
span { background-color: green; }
}
}
</style>
<div class=a>
<div class=b>
<span>not green</span>
</div>
<span>not green</span>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_not_green('.a > .b > span');
assert_not_green('.a > span');
}, 'Nested scopes, reverse');
</script>
<template>
<style>
@scope (.a) {
@scope (.b) to (.c) {
span { background-color: green; }
}
}
</style>
<div class=a>
<div class=b>
<span>green</span>
</div>
<div class=b>
<div class=c>
<span>not green</span>
</div>
</div>
<span>not green</span>
</div>
<div class=b>
<span>not green</span>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a > .b > span');
assert_not_green('.a > span');
assert_not_green('.a > .b > .c > span');
assert_not_green(':scope > .b > span');
}, 'Nested scopes, with to-selector');
</script>
<template>
<style>
@scope (.a) {
:scope { background-color: green; }
}
</style>
<div class=a></div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_green('.a');
}, ':scope selecting itself');
</script>
<template>
<style>
@scope (.a) to (.b) {
* { background-color: green; }
}
</style>
<div id=above>
<div class=a>
<div>
<div class=b>
<div id=below></div>
</div>
</div>
</div>
<div id=adjacent></div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
assert_not_green('#above');
assert_not_green('#adjacent');
assert_green('.a');
assert_green('.a > div');
assert_green('.b');
assert_not_green('#below');
}, 'The scoping limit is in scope');
</script>
<template>
<style>
@scope (.a) {
:scope + .c { background-color: green; }
}
</style>
<div class=a>
<div class=a></div>
<div class=c></div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
// A :scope sibling can never match, as the scoping element must
// be on the ancestor chain.
assert_not_green('.c');
}, ':scope direct adjacent sibling');
</script>
<template>
<style>
@scope (.a) {
:scope + .c { background-color: green; }
}
</style>
<div class=a>
<div class=a></div>
<div></div>
<div class=c></div>
</div>
</template>
<script>
test_scope(document.currentScript, () => {
// A :scope sibling can never match, as the scoping element must
// be on the ancestor chain.
assert_not_green('.c');
}, ':scope indirect adjacent sibling');
</script>