Skip to content

GitLab

T
tangled
Commit 9c6fd611 authored by Anders Hartvoll Ruud's avatar Anders Hartvoll Ruud Committed by Commit Bot
Browse files
Options

[:is/:where] Drop pseudo_id when matching nested complex selectors 

If the pseudo_id is set, the SelectorChecker::MatchSelector call for
each subselector will fail completely because the dynamic_pseudo of
the inner result will not match context.pseudo_id. This check does not
make sense to perform for nested complex selectors, since pseudo
elements are not valid in nested complex selectors. Hence, we can just
set the pseudo_id to kPseudoIdNone at the :is/:where boundary.

This fixes a bug where selectors such as ":is(.a .b)::before" would
never match.

This CL also adds a basic test for pseudo classes. (Not related to the
fix).

Bug: 568705
Change-Id: I119265836ac0f1b77868537c7685690300c265fd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2466278Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Commit-Queue: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#816500}
parent 989aeb7a
Hide whitespace changes
Inline Side-by-side
Showing with 103 additions and 0 deletions
third_party/blink/renderer/core/css/selector_checker.cc
View file @ 9c6fd611
......@@ -931,6 +931,7 @@ bool SelectorChecker::CheckPseudoClass(const SelectorCheckingContext& context,
SelectorCheckingContext sub_context(context);
sub_context.is_sub_selector = true;
sub_context.in_nested_complex_selector = true;
sub_context.pseudo_id = kPseudoIdNone;
if (!selector.SelectorList())
break;
for (sub_context.selector = selector.SelectorList()->First();
......
third_party/blink/web_tests/external/wpt/css/selectors/is-where-pseudo-classes.html 0 → 100644
View file @ 9c6fd611
<!DOCTYPE html>
<title>:is() combined with pseudo-classes</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
<link rel="help" href="https://drafts.csswg.org/selectors/#useraction-pseudos">
<style>
button {
color: black;
}
/* Selects #a, #c */
:is(main :where(main #a), #c:nth-child(odd), #d):is(:enabled) {
color: green;
}
/* Selects #b, #d, #f */
button:is(:nth-child(even), span #e):is(:enabled, :where(:disabled)) {
color: blue;
}
</style>
<main>
<button id=a>A</button>
<button id=b>B</button>
<button id=c>C</button>
<button id=d disabled>D</button>
<button id=e disabled>E</button>
<button id=f disabled>F</button>
</main>
<script>
test(function() {
assert_equals(getComputedStyle(a).color, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(b).color, 'rgb(0, 0, 255)');
assert_equals(getComputedStyle(c).color, 'rgb(0, 128, 0)');
assert_equals(getComputedStyle(d).color, 'rgb(0, 0, 255)');
assert_equals(getComputedStyle(e).color, 'rgb(0, 0, 0)');
assert_equals(getComputedStyle(f).color, 'rgb(0, 0, 255)');
}, ':is() combined with pseudo-classes');
</script>
third_party/blink/web_tests/external/wpt/css/selectors/is-where-pseudo-elements-ref.html 0 → 100644
View file @ 9c6fd611
<!DOCTYPE html>
<title>:is() combined with pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
<style>
#b::before, #d::before {
content: "before ";
color: green;
}
#e::after, #h::after {
content: " after";
color: green;
}
#a::first-letter, #b::first-letter {
color: blue;
}
#g::first-line, #l::first-line {
color: magenta;
}
</style>
<main id=main>
<div id=a>a</div>
<div id=b>b</div>
<div id=c>c</div>
<div id=d>d</div>
<div id=e>e</div>
<div id=f>f</div>
<div id=g>g</div>
<div id=h>h</div>
<div id=j>j</div>
<div id=k>k</div>
<div id=l>l<br>l2</div>
</main>
third_party/blink/web_tests/external/wpt/css/selectors/is-where-pseudo-elements.html 0 → 100644
View file @ 9c6fd611
<!DOCTYPE html>
<title>:is() combined with pseudo elements</title>
<link rel="help" href="https://drafts.csswg.org/selectors-4/#matches">
<link rel="match" href="is-where-pseudo-elements-ref.html">
<style>
:is(#a, #c) + :is(main :is(#b, #d))::before {
content: "before ";
color: green;
}
:is(#d + div, #d ~ #h)::after {
content: " after";
color: green;
}
:is(main > #a, #b)::first-letter {
color: blue;
}
:is(:where(main > div + #g, #k + #l))::first-line {
color: magenta;
}
</style>
<main id=main>
<div id=a>a</div>
<div id=b>b</div>
<div id=c>c</div>
<div id=d>d</div>
<div id=e>e</div>
<div id=f>f</div>
<div id=g>g</div>
<div id=h>h</div>
<div id=j>j</div>
<div id=k>k</div>
<div id=l>l<br>l2</div>
</main>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment