mirror of
https://github.com/HeyPuter/firefox.git
synced 2026-11-13 20:14:57 -10:00
Anders Hartvoll Ruud
0d5809f389
Automatic update from web-platform-tests [@scope] Support various at-rules within @scope This CL adds support for the following rules within @scope: - @container - @layer - @media - @starting-style - @supports Style rules within these rules are now scoped [1] to the enclosing @scope (if any). All at-rules are supposed to be allowed within @scope, including rules which do not contain style rules in their body (e.g. @property) [2], but this CL only deals with rules that are valid "nested group rules" [3]. WPT coverage of other at-rules is tracked by Issue 1450473. Unlike nesting, @scope does not support declarations directly within its body. Since we're calling CSSParserImpl::ConsumeLayer (etc) with a non-nullptr parent_rule_for_nesting also in the @scope case (since & needs to point to the scoping root), the condition to enter direct-declaration parsing has been changed to check nesting_type rather than parent_rule_for_nesting. Additionally, for @layer, two tweaks were needed: - Propagate nesting_type: this was just neglected earlier. - Allow @layer *statements* within @scope: all at-rules are supposed to be valid within @scope. [1] https://drafts.csswg.org/css-cascade-6/#scoped-style-rules [2] https://drafts.csswg.org/css-cascade-6/#scope-scope [3] https://drafts.csswg.org/css-nesting-1/#nested-group-rules Fixed: 1451088 Bug: 1450473 Change-Id: Ic4cf9c9f76ca5a008a3054ddd1cf1cb87b6bbf44 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4629290 Reviewed-by: Steinar H Gunderson <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1161143} -- wpt-commits: ddc6b8682ef6f1ceeb2e3941b79787ba68948ee6 wpt-pr: 40658
52 lines
1.3 KiB
HTML
52 lines
1.3 KiB
HTML
<!DOCTYPE html>
|
|
<title>@scope - inner @layer</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scope-atrule">
|
|
<link rel="help" href="https://drafts.csswg.org/css-cascade-5/#layering">
|
|
<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>
|
|
<style>
|
|
@scope (.a) {
|
|
/* The theme layer wins over the base layer. Note that @layer statements
|
|
are allowed here, but aren't affected by the enclosing @scope. */
|
|
@layer base, theme;
|
|
|
|
@layer theme {
|
|
:scope {
|
|
z-index: 1;
|
|
}
|
|
|
|
.b {
|
|
background-color: green;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
.a {
|
|
z-index: 0;
|
|
}
|
|
.a .b {
|
|
background-color: red;
|
|
}
|
|
}
|
|
</style>
|
|
<main>
|
|
<div class=a>
|
|
<div class=b>
|
|
</div>
|
|
</div>
|
|
<div class=b></div>
|
|
</main>
|
|
<script>
|
|
test(() => {
|
|
let a = document.querySelector('main > .a');
|
|
let b = document.querySelector('main > .a > .b');
|
|
assert_equals(getComputedStyle(a).zIndex, '1');
|
|
assert_equals(getComputedStyle(b).backgroundColor, 'rgb(0, 128, 0)');
|
|
|
|
let out_of_scope_b = document.querySelector('main > .b');
|
|
assert_equals(getComputedStyle(out_of_scope_b).backgroundColor, 'rgba(0, 0, 0, 0)');
|
|
}, 'Style rules within @layer are scoped');
|
|
</script>
|