mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-08-07 08:39:22 +00:00
LibWeb/CSS: Correct parsing of @supports selector()
A couple of fixes here: - Parse a `<complex-selector>` instead of a `<selector-list>` - Don't match if any unknown `::-webkit-*` pseudo-elements are found
This commit is contained in:
Sam Atkins
parent
b6fb4baeb7
commit
db597843d6
Notes:
github-actions[bot]
2025-03-17 10:01:11 +00:00
Author: https://github.com/AtkinsSJ
Commit: db597843d6
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/3941
8 changed files with 100 additions and 4 deletions
|
|
@ -304,9 +304,13 @@ OwnPtr<BooleanExpression> Parser::parse_supports_feature(TokenStream<ComponentVa
|
|||
builder.append(item.to_string());
|
||||
transaction.commit();
|
||||
TokenStream selector_tokens { first_token.function().value };
|
||||
return Supports::Selector::create(
|
||||
builder.to_string_without_validation(),
|
||||
!parse_a_selector_list(selector_tokens, SelectorType::Standalone).is_error());
|
||||
auto maybe_selector = parse_complex_selector(selector_tokens, SelectorType::Standalone);
|
||||
// A CSS processor is considered to support a CSS selector if it accepts that all aspects of that selector,
|
||||
// recursively, (rather than considering any of its syntax to be unknown or invalid) and that selector doesn’t
|
||||
// contain unknown -webkit- pseudo-elements.
|
||||
// https://drafts.csswg.org/css-conditional-4/#dfn-support-selector
|
||||
bool matches = !maybe_selector.is_error() && !maybe_selector.value()->contains_unknown_webkit_pseudo_element();
|
||||
return Supports::Selector::create(builder.to_string_without_validation(), matches);
|
||||
}
|
||||
|
||||
// `<supports-font-tech-fn> = font-tech( <font-tech> )`
|
||||
|
|
|
|||
|
|
@ -646,6 +646,24 @@ NonnullRefPtr<Selector> Selector::relative_to(SimpleSelector const& parent) cons
|
|||
return Selector::create(move(copied_compound_selectors));
|
||||
}
|
||||
|
||||
bool Selector::contains_unknown_webkit_pseudo_element() const
|
||||
{
|
||||
for (auto const& compound_selector : m_compound_selectors) {
|
||||
for (auto const& simple_selector : compound_selector.simple_selectors) {
|
||||
if (simple_selector.type == SimpleSelector::Type::PseudoClass) {
|
||||
for (auto const& child_selector : simple_selector.pseudo_class().argument_selector_list) {
|
||||
if (child_selector->contains_unknown_webkit_pseudo_element()) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (simple_selector.type == SimpleSelector::Type::PseudoElement && simple_selector.pseudo_element().type() == PseudoElement::Type::UnknownWebKit)
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
RefPtr<Selector> Selector::absolutized(Selector::SimpleSelector const& selector_for_nesting) const
|
||||
{
|
||||
if (!contains_the_nesting_selector())
|
||||
|
|
|
|||
|
|
@ -262,6 +262,7 @@ public:
|
|||
NonnullRefPtr<Selector> relative_to(SimpleSelector const&) const;
|
||||
bool contains_the_nesting_selector() const { return m_contains_the_nesting_selector; }
|
||||
bool contains_hover_pseudo_class() const { return m_contains_hover_pseudo_class; }
|
||||
bool contains_unknown_webkit_pseudo_element() const;
|
||||
RefPtr<Selector> absolutized(SimpleSelector const& selector_for_nesting) const;
|
||||
u32 specificity() const;
|
||||
String serialize() const;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>CSS Conditional Test: @supports selector() with compound selector</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-conditional/at-supports-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
background-color:red;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
@supports selector(a:link.class#ident) {
|
||||
div { background: green };
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Conditional Test: @supports selector() with pseudo-elements.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-conditional/at-supports-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
background-color:red;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
@supports selector(::before) {
|
||||
div { background: green };
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Conditional Test: @supports selector() with -webkit- unknown pseudo-elements and negation.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-conditional/at-supports-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
background-color:red;
|
||||
height:100px;
|
||||
width:100px;
|
||||
}
|
||||
@supports not selector(::-webkit-unknown-pseudo) {
|
||||
div { background: green };
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Conditional Test: @supports selector() with multiple selectors doesn't work.</title>
|
||||
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
|
||||
<link rel="author" href="https://mozilla.org" title="Mozilla">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-conditional/#at-supports">
|
||||
<link rel="match" href="../../../../expected/wpt-import/css/css-conditional/at-supports-001-ref.html">
|
||||
<style>
|
||||
div {
|
||||
background-color: green;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
@supports selector(div, div) {
|
||||
div { background: red };
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a <strong>filled green square</strong> and <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
|
|
@ -13,5 +13,5 @@ These should all fail:
|
|||
@supports (width: yellow) or (height: green): FAIL
|
||||
@supports (flogwizzle: purple): FAIL
|
||||
@supports selector(.....nope): FAIL
|
||||
@supports selector(::-webkit-input-placeholder): PASS
|
||||
@supports selector(::-webkit-input-placeholder): FAIL
|
||||
@supports selector(32) or selector(thing[foo??????bar]): FAIL
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue