LibWeb/CSS: Implement aliases for pseudo-elements

We previously supported a few -webkit vendor-prefixed pseudo-elements.
This patch adds those back, along with -moz equivalents, by aliasing
them to standard ones. They behave identically, except for serializing
with their original name, just like for unrecognized -webkit
pseudo-elements.

It's likely to be a while before the forms spec settles and authors
start using the new pseudo-elements, so until then, we can still make
use of styles they've written for the non-standard ones.
This commit is contained in:
Sam Atkins 2025-03-19 16:36:30 +00:00
commit 193adee164
Notes: github-actions[bot] 2025-03-24 09:51:08 +00:00
3 changed files with 89 additions and 3 deletions

View file

@ -430,6 +430,20 @@ Parser::ParseErrorOr<Selector::SimpleSelector> Parser::parse_pseudo_simple_selec
};
}
// Aliased pseudo-elements behave like their target pseudo-element, but serialize as themselves. So store their
// name like we do for unknown -webkit pseudos below.
if (auto pseudo_element = aliased_pseudo_element_from_string(pseudo_name); pseudo_element.has_value()) {
// :has() is fussy about pseudo-elements inside it
if (m_pseudo_class_context.contains_slow(PseudoClass::Has) && !is_has_allowed_pseudo_element(*pseudo_element)) {
return ParseError::SyntaxError;
}
return Selector::SimpleSelector {
.type = Selector::SimpleSelector::Type::PseudoElement,
.value = Selector::PseudoElementSelector { pseudo_element.release_value(), pseudo_name.to_string().to_ascii_lowercase() }
};
}
// https://www.w3.org/TR/selectors-4/#compat
// All other pseudo-elements whose names begin with the string “-webkit-” (matched ASCII case-insensitively)
// and that are not functional notations must be treated as valid at parse time. (That is, ::-webkit-asdf is

View file

@ -1,4 +1,34 @@
{
"-moz-meter-bar": {
"alias-for": "fill"
},
"-moz-progress-bar": {
"alias-for": "fill"
},
"-moz-range-progress": {
"alias-for": "fill"
},
"-moz-range-track": {
"alias-for": "track"
},
"-moz-range-thumb": {
"alias-for": "thumb"
},
"-webkit-meter-bar": {
"alias-for": "track"
},
"-webkit-progress-bar": {
"alias-for": "track"
},
"-webkit-progress-value": {
"alias-for": "fill"
},
"-webkit-slider-runnable-track": {
"alias-for": "track"
},
"-webkit-slider-thumb": {
"alias-for": "thumb"
},
"after": {
"spec": "https://drafts.csswg.org/css-pseudo-4/#selectordef-after",
"is-generated": true