mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Anders Hartvoll Ruud
e2b71070d2
Automatic update from web-platform-tests
[@scope] Implement scoped declarations
This CL allows declarations to appear directly within an @scope
rule, e.g.:
@scope (.foo) {
color: green;
}
Such declarations match the scoping root with zero specificity, i.e.
as if wrapped in a :where(:scope) rule.
Using declarations directly is already possible when @scope
is a "nested group rule" [1] (i.e. nested within a style rule).
This capability is now extended to non-nested @scope rules as well [2].
[1] https://drafts.csswg.org/css-nesting-1/#nested-group-rules
[2] https://drafts.csswg.org/css-cascade-6/#scoped-declarations
Fixed: 351045927
Change-Id: I40058437abdf976c472122076ee5eed754f93718
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6020075
Commit-Queue: Anders Hartvoll Ruud <[email protected]>
Reviewed-by: Steinar H Gunderson <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1384238}
--
wpt-commits: 7737d36470ebc08fb7f96337f8cd390b3dc569f5
wpt-pr: 49221
107 lines
2.9 KiB
HTML
107 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>@scope - scoped declarations</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-declarations">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<main id=main></main>
|
|
|
|
<template id=test_apply_root>
|
|
<style>
|
|
@scope (.a) {
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
<div class=a></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_apply_root.content.cloneNode(true));
|
|
assert_equals(getComputedStyle(main.querySelector('.a')).zIndex, '1');
|
|
}, 'Scoped declarations apply to the scoping root');
|
|
</script>
|
|
|
|
<template id=test_apply_implicit_root>
|
|
<div class=a>
|
|
<style>
|
|
@scope {
|
|
z-index: 1;
|
|
}
|
|
</style>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_apply_implicit_root.content.cloneNode(true));
|
|
assert_equals(getComputedStyle(main.querySelector('.a')).zIndex, '1');
|
|
}, 'Scoped declarations apply to implicit scoping root');
|
|
</script>
|
|
|
|
<template id=test_zero_specificity>
|
|
<style>
|
|
@scope (.a) {
|
|
:where(:scope) {
|
|
z-index: 1;
|
|
}
|
|
z-index: 2; /* Wins due to order */
|
|
}
|
|
@scope (.b) {
|
|
z-index: 1;
|
|
:where(:scope) {
|
|
z-index: 2; /* Wins due to order */
|
|
}
|
|
}
|
|
@scope (.c) {
|
|
:scope {
|
|
z-index: 1; /* Wins due to specificity */
|
|
}
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
<div class=a></div>
|
|
<div class=b></div>
|
|
<div class=c></div>
|
|
</template>
|
|
<script>
|
|
test((t) => {
|
|
t.add_cleanup(() => main.replaceChildren());
|
|
main.append(test_zero_specificity.content.cloneNode(true));
|
|
assert_equals(getComputedStyle(main.querySelector('.a')).zIndex, '2');
|
|
assert_equals(getComputedStyle(main.querySelector('.b')).zIndex, '2');
|
|
assert_equals(getComputedStyle(main.querySelector('.c')).zIndex, '1');
|
|
}, 'Scoped declarations apply with zero specificity');
|
|
</script>
|
|
|
|
<script>
|
|
|
|
for (let prelude of ['(.a)', '']) {
|
|
test((t) => {
|
|
let sheet = new CSSStyleSheet();
|
|
sheet.replaceSync(`
|
|
@scope ${prelude} {
|
|
color: red;
|
|
width: 1px;
|
|
.b {}
|
|
left: 2px;
|
|
right: 3px;
|
|
.c {}
|
|
top: 4px;
|
|
bottom: 5px;
|
|
}
|
|
`);
|
|
assert_equals(sheet.cssRules.length, 1);
|
|
let scope_rule = sheet.cssRules[0];
|
|
assert_equals(scope_rule.cssRules.length, 5);
|
|
|
|
assert_true(scope_rule.cssRules[0] instanceof CSSNestedDeclarations);
|
|
assert_equals(scope_rule.cssRules[0].cssText, 'color: red; width: 1px;');
|
|
assert_true(scope_rule.cssRules[2] instanceof CSSNestedDeclarations);
|
|
assert_equals(scope_rule.cssRules[2].cssText, 'left: 2px; right: 3px;');
|
|
assert_true(scope_rule.cssRules[4] instanceof CSSNestedDeclarations);
|
|
assert_equals(scope_rule.cssRules[4].cssText, 'top: 4px; bottom: 5px;');
|
|
}, `Declarations are parsed into CSSNestedDeclarations, prelude=${prelude}`);
|
|
}
|
|
|
|
</script>
|