Skip to content

Commit e70c25a

Browse files
andruudchromium-wpt-export-bot
andruud
authored and
chromium-wpt-export-bot
committed
[@scope] Treat kScopeActivation as a special kSubSelector
The internal selector relation kScopeActivation is inserted by the selector parser for selectors within @scope. This relation, when encountered in the selector, basically figures out if we're in scope [1], what the scoping roots are (there may be multiple), and tries to match the rest of the selector with context.scope set to those roots. However, kScopeActivation is not a combinator: it does not change the current element being considered for matching. In this respect, it's much like the kSubSelector relation. This CL treats it as such in SelectorChecker::MatchSelector, by skipping the combinator- related checks for exceeding the scope [2] and dynamic_pseudo matching (i.e. exactly the same as kSubSelector). I've moved the handling of kScopeActivation to a separate function (MatchForScopeActivation) to make it more clear that it's a special case (like MatchForSubSelector), and not like the other relations. This fixes a bug where selectors with pseudo-elements within @scope would match the originating element instead (due to missing dynamic_pseudo). [1] https://drafts.csswg.org/css-cascade-6/#in-scope [2] Although we already skipped this for kScopeActivation. Fixed: 335337303 Change-Id: I6f421c317c00efba5be8ca1407455f03e414a174 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5476369 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1291819}
1 parent 7a80152 commit e70c25a

File tree

2 files changed

+145
-0
lines changed

2 files changed

+145
-0
lines changed

‎css/css-cascade/scope-pseudo-element-ref.html

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<title>@scope - pseudo-elements (ref)</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
4+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#link">
5+
6+
<!-- Cosmetic -->
7+
<style>
8+
body > div {
9+
display: inline-block;
10+
width: 100px;
11+
height: 100px;
12+
border: 1px solid black;
13+
vertical-align:top;
14+
}
15+
</style>
16+
17+
<!-- ::before -->
18+
<style>
19+
#before_test > main {
20+
background-color: skyblue;
21+
}
22+
#before_test > main::before {
23+
content: "B";
24+
width: 20px;
25+
height: 20px;
26+
display: inline-block;
27+
background-color: tomato;
28+
}
29+
</style>
30+
<div id=before_test>
31+
<main>
32+
Foo
33+
</main>
34+
</div>
35+
36+
<!-- ::after -->
37+
<style>
38+
#after_test > main {
39+
background-color: skyblue;
40+
}
41+
#after_test > main::after {
42+
content: "A";
43+
width: 20px;
44+
height: 20px;
45+
display: inline-block;
46+
background-color: tomato;
47+
}
48+
</style>
49+
<div id=after_test>
50+
<main>
51+
Foo
52+
</main>
53+
</div>
54+
55+
<!-- ::marker -->
56+
<style>
57+
#marker_test li {
58+
background-color: skyblue;
59+
}
60+
#marker_test li::marker {
61+
content: "M";
62+
}
63+
</style>
64+
<div id=marker_test>
65+
<ul>
66+
<li>One</li>
67+
<li>Two</li>
68+
</ul>
69+
</div>

‎css/css-cascade/scope-pseudo-element.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<title>@scope - pseudo-elements</title>
3+
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-styles">
4+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#link">
5+
<link rel="match" href="scope-pseudo-element-ref.html">
6+
7+
<!-- Cosmetic -->
8+
<style>
9+
body > div {
10+
display: inline-block;
11+
width: 100px;
12+
height: 100px;
13+
border: 1px solid black;
14+
vertical-align:top;
15+
}
16+
</style>
17+
18+
<!-- ::before -->
19+
<style>
20+
@scope (#before_test > main) {
21+
:scope {
22+
background-color: skyblue;
23+
}
24+
:scope::before {
25+
content: "B";
26+
width: 20px;
27+
height: 20px;
28+
display: inline-block;
29+
background-color: tomato;
30+
}
31+
}
32+
</style>
33+
<div id=before_test>
34+
<main>
35+
Foo
36+
</main>
37+
</div>
38+
39+
<!-- ::after -->
40+
<style>
41+
@scope (#after_test > main) {
42+
:scope {
43+
background-color: skyblue;
44+
}
45+
:scope::after {
46+
content: "A";
47+
width: 20px;
48+
height: 20px;
49+
display: inline-block;
50+
background-color: tomato;
51+
}
52+
}
53+
</style>
54+
<div id=after_test>
55+
<main>
56+
Foo
57+
</main>
58+
</div>
59+
60+
<!-- ::marker -->
61+
<style>
62+
@scope (#marker_test li) {
63+
:scope {
64+
background-color: skyblue;
65+
}
66+
:scope::marker {
67+
content: "M";
68+
}
69+
}
70+
</style>
71+
<div id=marker_test>
72+
<ul>
73+
<li>One</li>
74+
<li>Two</li>
75+
</ul>
76+
</div>

0 commit comments

Comments
 (0)