SelectorEngine.cpp 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456
  1. /*
  2. * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <LibWeb/CSS/Parser/Parser.h>
  8. #include <LibWeb/CSS/SelectorEngine.h>
  9. #include <LibWeb/DOM/Document.h>
  10. #include <LibWeb/DOM/Element.h>
  11. #include <LibWeb/DOM/Text.h>
  12. #include <LibWeb/HTML/AttributeNames.h>
  13. #include <LibWeb/HTML/HTMLAnchorElement.h>
  14. #include <LibWeb/HTML/HTMLAreaElement.h>
  15. #include <LibWeb/HTML/HTMLButtonElement.h>
  16. #include <LibWeb/HTML/HTMLFieldSetElement.h>
  17. #include <LibWeb/HTML/HTMLHtmlElement.h>
  18. #include <LibWeb/HTML/HTMLInputElement.h>
  19. #include <LibWeb/HTML/HTMLOptGroupElement.h>
  20. #include <LibWeb/HTML/HTMLOptionElement.h>
  21. #include <LibWeb/HTML/HTMLProgressElement.h>
  22. #include <LibWeb/HTML/HTMLSelectElement.h>
  23. #include <LibWeb/HTML/HTMLTextAreaElement.h>
  24. #include <LibWeb/Infra/Strings.h>
  25. namespace Web::SelectorEngine {
  26. // https://drafts.csswg.org/selectors-4/#the-lang-pseudo
  27. static inline bool matches_lang_pseudo_class(DOM::Element const& element, Vector<FlyString> const& languages)
  28. {
  29. FlyString element_language;
  30. for (auto const* e = &element; e; e = e->parent_element()) {
  31. auto lang = e->attribute(HTML::AttributeNames::lang);
  32. if (!lang.is_null()) {
  33. element_language = FlyString::from_deprecated_fly_string(lang).release_value_but_fixme_should_propagate_errors();
  34. break;
  35. }
  36. }
  37. if (element_language.is_empty())
  38. return false;
  39. // FIXME: This is ad-hoc. Implement a proper language range matching algorithm as recommended by BCP47.
  40. for (auto const& language : languages) {
  41. if (language.is_empty())
  42. return false;
  43. if (language == "*"sv)
  44. return true;
  45. if (!element_language.to_string().contains('-'))
  46. return Infra::is_ascii_case_insensitive_match(element_language, language);
  47. auto parts = element_language.to_string().split_limit('-', 2).release_value_but_fixme_should_propagate_errors();
  48. return Infra::is_ascii_case_insensitive_match(parts[0], language);
  49. }
  50. return false;
  51. }
  52. // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-link
  53. static inline bool matches_link_pseudo_class(DOM::Element const& element)
  54. {
  55. // All a elements that have an href attribute, and all area elements that have an href attribute, must match one of :link and :visited.
  56. if (!is<HTML::HTMLAnchorElement>(element) && !is<HTML::HTMLAreaElement>(element))
  57. return false;
  58. return element.has_attribute(HTML::AttributeNames::href);
  59. }
  60. static inline bool matches_hover_pseudo_class(DOM::Element const& element)
  61. {
  62. auto* hovered_node = element.document().hovered_node();
  63. if (!hovered_node)
  64. return false;
  65. if (&element == hovered_node)
  66. return true;
  67. return element.is_ancestor_of(*hovered_node);
  68. }
  69. // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-checked
  70. static inline bool matches_checked_pseudo_class(DOM::Element const& element)
  71. {
  72. // The :checked pseudo-class must match any element falling into one of the following categories:
  73. // - input elements whose type attribute is in the Checkbox state and whose checkedness state is true
  74. // - input elements whose type attribute is in the Radio Button state and whose checkedness state is true
  75. if (is<HTML::HTMLInputElement>(element)) {
  76. auto const& input_element = static_cast<HTML::HTMLInputElement const&>(element);
  77. switch (input_element.type_state()) {
  78. case HTML::HTMLInputElement::TypeAttributeState::Checkbox:
  79. case HTML::HTMLInputElement::TypeAttributeState::RadioButton:
  80. return static_cast<HTML::HTMLInputElement const&>(element).checked();
  81. default:
  82. return false;
  83. }
  84. }
  85. // - option elements whose selectedness is true
  86. if (is<HTML::HTMLOptionElement>(element)) {
  87. return static_cast<HTML::HTMLOptionElement const&>(element).selected();
  88. }
  89. return false;
  90. }
  91. // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-indeterminate
  92. static inline bool matches_indeterminate_pseudo_class(DOM::Element const& element)
  93. {
  94. // The :indeterminate pseudo-class must match any element falling into one of the following categories:
  95. // - input elements whose type attribute is in the Checkbox state and whose indeterminate IDL attribute is set to true
  96. // FIXME: - input elements whose type attribute is in the Radio Button state and whose radio button group contains no input elements whose checkedness state is true.
  97. if (is<HTML::HTMLInputElement>(element)) {
  98. auto const& input_element = static_cast<HTML::HTMLInputElement const&>(element);
  99. switch (input_element.type_state()) {
  100. case HTML::HTMLInputElement::TypeAttributeState::Checkbox:
  101. return input_element.indeterminate();
  102. default:
  103. return false;
  104. }
  105. }
  106. // - progress elements with no value content attribute
  107. if (is<HTML::HTMLProgressElement>(element)) {
  108. return !element.has_attribute(HTML::AttributeNames::value);
  109. }
  110. return false;
  111. }
  112. static inline bool matches_attribute(CSS::Selector::SimpleSelector::Attribute const& attribute, DOM::Element const& element)
  113. {
  114. if (attribute.match_type == CSS::Selector::SimpleSelector::Attribute::MatchType::HasAttribute) {
  115. // Early way out in case of an attribute existence selector.
  116. return element.has_attribute(attribute.name.to_string().to_deprecated_string());
  117. }
  118. auto const case_insensitive_match = (attribute.case_type == CSS::Selector::SimpleSelector::Attribute::CaseType::CaseInsensitiveMatch);
  119. auto const case_sensitivity = case_insensitive_match
  120. ? CaseSensitivity::CaseInsensitive
  121. : CaseSensitivity::CaseSensitive;
  122. switch (attribute.match_type) {
  123. case CSS::Selector::SimpleSelector::Attribute::MatchType::ExactValueMatch:
  124. return case_insensitive_match
  125. ? Infra::is_ascii_case_insensitive_match(element.attribute(attribute.name.to_string().to_deprecated_string()), attribute.value)
  126. : element.attribute(attribute.name.to_string().to_deprecated_string()) == attribute.value.to_deprecated_string();
  127. case CSS::Selector::SimpleSelector::Attribute::MatchType::ContainsWord: {
  128. if (attribute.value.is_empty()) {
  129. // This selector is always false is match value is empty.
  130. return false;
  131. }
  132. auto const view = element.attribute(attribute.name.to_string().to_deprecated_string()).split_view(' ');
  133. auto const size = view.size();
  134. for (size_t i = 0; i < size; ++i) {
  135. auto const value = view.at(i);
  136. if (case_insensitive_match
  137. ? Infra::is_ascii_case_insensitive_match(value, attribute.value)
  138. : value == attribute.value) {
  139. return true;
  140. }
  141. }
  142. return false;
  143. }
  144. case CSS::Selector::SimpleSelector::Attribute::MatchType::ContainsString:
  145. return !attribute.value.is_empty()
  146. && element.attribute(attribute.name.to_string().to_deprecated_string()).contains(attribute.value, case_sensitivity);
  147. case CSS::Selector::SimpleSelector::Attribute::MatchType::StartsWithSegment: {
  148. auto const element_attr_value = element.attribute(attribute.name.to_string().to_deprecated_string());
  149. if (element_attr_value.is_empty()) {
  150. // If the attribute value on element is empty, the selector is true
  151. // if the match value is also empty and false otherwise.
  152. return attribute.value.is_empty();
  153. }
  154. if (attribute.value.is_empty()) {
  155. return false;
  156. }
  157. auto segments = element_attr_value.split_view('-');
  158. return case_insensitive_match
  159. ? Infra::is_ascii_case_insensitive_match(segments.first(), attribute.value)
  160. : segments.first() == attribute.value;
  161. }
  162. case CSS::Selector::SimpleSelector::Attribute::MatchType::StartsWithString:
  163. return !attribute.value.is_empty()
  164. && element.attribute(attribute.name.to_string().to_deprecated_string()).starts_with(attribute.value, case_sensitivity);
  165. case CSS::Selector::SimpleSelector::Attribute::MatchType::EndsWithString:
  166. return !attribute.value.is_empty()
  167. && element.attribute(attribute.name.to_string().to_deprecated_string()).ends_with(attribute.value, case_sensitivity);
  168. default:
  169. break;
  170. }
  171. return false;
  172. }
  173. static inline DOM::Element const* previous_sibling_with_same_tag_name(DOM::Element const& element)
  174. {
  175. for (auto const* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
  176. if (sibling->tag_name() == element.tag_name())
  177. return sibling;
  178. }
  179. return nullptr;
  180. }
  181. static inline DOM::Element const* next_sibling_with_same_tag_name(DOM::Element const& element)
  182. {
  183. for (auto const* sibling = element.next_element_sibling(); sibling; sibling = sibling->next_element_sibling()) {
  184. if (sibling->tag_name() == element.tag_name())
  185. return sibling;
  186. }
  187. return nullptr;
  188. }
  189. static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoClass const& pseudo_class, DOM::Element const& element, JS::GCPtr<DOM::ParentNode const> scope)
  190. {
  191. switch (pseudo_class.type) {
  192. case CSS::Selector::SimpleSelector::PseudoClass::Type::Link:
  193. return matches_link_pseudo_class(element);
  194. case CSS::Selector::SimpleSelector::PseudoClass::Type::Visited:
  195. // FIXME: Maybe match this selector sometimes?
  196. return false;
  197. case CSS::Selector::SimpleSelector::PseudoClass::Type::Active:
  198. return element.is_active();
  199. case CSS::Selector::SimpleSelector::PseudoClass::Type::Hover:
  200. return matches_hover_pseudo_class(element);
  201. case CSS::Selector::SimpleSelector::PseudoClass::Type::Focus:
  202. return element.is_focused();
  203. case CSS::Selector::SimpleSelector::PseudoClass::Type::FocusWithin: {
  204. auto* focused_element = element.document().focused_element();
  205. return focused_element && element.is_inclusive_ancestor_of(*focused_element);
  206. }
  207. case CSS::Selector::SimpleSelector::PseudoClass::Type::FirstChild:
  208. return !element.previous_element_sibling();
  209. case CSS::Selector::SimpleSelector::PseudoClass::Type::LastChild:
  210. return !element.next_element_sibling();
  211. case CSS::Selector::SimpleSelector::PseudoClass::Type::OnlyChild:
  212. return !(element.previous_element_sibling() || element.next_element_sibling());
  213. case CSS::Selector::SimpleSelector::PseudoClass::Type::Empty: {
  214. if (!element.has_children())
  215. return true;
  216. if (element.first_child_of_type<DOM::Element>())
  217. return false;
  218. // NOTE: CSS Selectors level 4 changed ":empty" to also match whitespace-only text nodes.
  219. // However, none of the major browser supports this yet, so let's just hang back until they do.
  220. bool has_nonempty_text_child = false;
  221. element.for_each_child_of_type<DOM::Text>([&](auto const& text_child) {
  222. if (!text_child.data().is_empty()) {
  223. has_nonempty_text_child = true;
  224. return IterationDecision::Break;
  225. }
  226. return IterationDecision::Continue;
  227. });
  228. return !has_nonempty_text_child;
  229. }
  230. case CSS::Selector::SimpleSelector::PseudoClass::Type::Root:
  231. return is<HTML::HTMLHtmlElement>(element);
  232. case CSS::Selector::SimpleSelector::PseudoClass::Type::Scope:
  233. return scope ? &element == scope : is<HTML::HTMLHtmlElement>(element);
  234. case CSS::Selector::SimpleSelector::PseudoClass::Type::FirstOfType:
  235. return !previous_sibling_with_same_tag_name(element);
  236. case CSS::Selector::SimpleSelector::PseudoClass::Type::LastOfType:
  237. return !next_sibling_with_same_tag_name(element);
  238. case CSS::Selector::SimpleSelector::PseudoClass::Type::OnlyOfType:
  239. return !previous_sibling_with_same_tag_name(element) && !next_sibling_with_same_tag_name(element);
  240. case CSS::Selector::SimpleSelector::PseudoClass::Type::Lang:
  241. return matches_lang_pseudo_class(element, pseudo_class.languages);
  242. case CSS::Selector::SimpleSelector::PseudoClass::Type::Disabled:
  243. // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-disabled
  244. // The :disabled pseudo-class must match any element that is actually disabled.
  245. return element.is_actually_disabled();
  246. case CSS::Selector::SimpleSelector::PseudoClass::Type::Enabled:
  247. // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-enabled
  248. // The :enabled pseudo-class must match any button, input, select, textarea, optgroup, option, fieldset element, or form-associated custom element that is not actually disabled.
  249. return (is<HTML::HTMLButtonElement>(element) || is<HTML::HTMLInputElement>(element) || is<HTML::HTMLSelectElement>(element) || is<HTML::HTMLTextAreaElement>(element) || is<HTML::HTMLOptGroupElement>(element) || is<HTML::HTMLOptionElement>(element) || is<HTML::HTMLFieldSetElement>(element))
  250. && !element.is_actually_disabled();
  251. case CSS::Selector::SimpleSelector::PseudoClass::Type::Checked:
  252. return matches_checked_pseudo_class(element);
  253. case CSS::Selector::SimpleSelector::PseudoClass::Type::Indeterminate:
  254. return matches_indeterminate_pseudo_class(element);
  255. case CSS::Selector::SimpleSelector::PseudoClass::Type::Is:
  256. case CSS::Selector::SimpleSelector::PseudoClass::Type::Where:
  257. for (auto& selector : pseudo_class.argument_selector_list) {
  258. if (matches(selector, element))
  259. return true;
  260. }
  261. return false;
  262. case CSS::Selector::SimpleSelector::PseudoClass::Type::Not:
  263. for (auto& selector : pseudo_class.argument_selector_list) {
  264. if (matches(selector, element))
  265. return false;
  266. }
  267. return true;
  268. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild:
  269. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild:
  270. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType:
  271. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType:
  272. auto const step_size = pseudo_class.nth_child_pattern.step_size;
  273. auto const offset = pseudo_class.nth_child_pattern.offset;
  274. if (step_size == 0 && offset == 0)
  275. return false; // "If both a and b are equal to zero, the pseudo-class represents no element in the document tree."
  276. auto const* parent = element.parent_element();
  277. if (!parent)
  278. return false;
  279. auto matches_selector_list = [](CSS::SelectorList const& list, DOM::Element const& element) {
  280. if (list.is_empty())
  281. return true;
  282. for (auto const& child_selector : list) {
  283. if (matches(child_selector, element)) {
  284. return true;
  285. }
  286. }
  287. return false;
  288. };
  289. int index = 1;
  290. switch (pseudo_class.type) {
  291. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild: {
  292. if (!matches_selector_list(pseudo_class.argument_selector_list, element))
  293. return false;
  294. for (auto* child = parent->first_child_of_type<DOM::Element>(); child && child != &element; child = child->next_element_sibling()) {
  295. if (matches_selector_list(pseudo_class.argument_selector_list, *child))
  296. ++index;
  297. }
  298. break;
  299. }
  300. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild: {
  301. if (!matches_selector_list(pseudo_class.argument_selector_list, element))
  302. return false;
  303. for (auto* child = parent->last_child_of_type<DOM::Element>(); child && child != &element; child = child->previous_element_sibling()) {
  304. if (matches_selector_list(pseudo_class.argument_selector_list, *child))
  305. ++index;
  306. }
  307. break;
  308. }
  309. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType: {
  310. for (auto* child = previous_sibling_with_same_tag_name(element); child; child = previous_sibling_with_same_tag_name(*child))
  311. ++index;
  312. break;
  313. }
  314. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType: {
  315. for (auto* child = next_sibling_with_same_tag_name(element); child; child = next_sibling_with_same_tag_name(*child))
  316. ++index;
  317. break;
  318. }
  319. default:
  320. VERIFY_NOT_REACHED();
  321. }
  322. // When "step_size == -1", selector represents first "offset" elements in document tree.
  323. if (step_size == -1)
  324. return !(offset <= 0 || index > offset);
  325. // When "step_size == 1", selector represents last "offset" elements in document tree.
  326. if (step_size == 1)
  327. return !(offset < 0 || index < offset);
  328. // When "step_size == 0", selector picks only the "offset" element.
  329. if (step_size == 0)
  330. return index == offset;
  331. // If both are negative, nothing can match.
  332. if (step_size < 0 && offset < 0)
  333. return false;
  334. // Like "a % b", but handles negative integers correctly.
  335. auto const canonical_modulo = [](int a, int b) -> int {
  336. int c = a % b;
  337. if ((c < 0 && b > 0) || (c > 0 && b < 0)) {
  338. c += b;
  339. }
  340. return c;
  341. };
  342. // When "step_size < 0", we start at "offset" and count backwards.
  343. if (step_size < 0)
  344. return index <= offset && canonical_modulo(index - offset, -step_size) == 0;
  345. // Otherwise, we start at "offset" and count forwards.
  346. return index >= offset && canonical_modulo(index - offset, step_size) == 0;
  347. }
  348. return false;
  349. }
  350. static inline bool matches(CSS::Selector::SimpleSelector const& component, DOM::Element const& element, JS::GCPtr<DOM::ParentNode const> scope)
  351. {
  352. switch (component.type) {
  353. case CSS::Selector::SimpleSelector::Type::Universal:
  354. return true;
  355. case CSS::Selector::SimpleSelector::Type::Id:
  356. return component.name() == element.attribute(HTML::AttributeNames::id).view();
  357. case CSS::Selector::SimpleSelector::Type::Class:
  358. return element.has_class(component.name());
  359. case CSS::Selector::SimpleSelector::Type::TagName:
  360. // See https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors
  361. if (element.document().document_type() == DOM::Document::Type::HTML)
  362. return component.lowercase_name() == element.local_name().view();
  363. return Infra::is_ascii_case_insensitive_match(component.name(), element.local_name());
  364. case CSS::Selector::SimpleSelector::Type::Attribute:
  365. return matches_attribute(component.attribute(), element);
  366. case CSS::Selector::SimpleSelector::Type::PseudoClass:
  367. return matches_pseudo_class(component.pseudo_class(), element, scope);
  368. case CSS::Selector::SimpleSelector::Type::PseudoElement:
  369. // Pseudo-element matching/not-matching is handled in the top level matches().
  370. return true;
  371. default:
  372. VERIFY_NOT_REACHED();
  373. }
  374. }
  375. static inline bool matches(CSS::Selector const& selector, int component_list_index, DOM::Element const& element, JS::GCPtr<DOM::ParentNode const> scope)
  376. {
  377. auto& relative_selector = selector.compound_selectors()[component_list_index];
  378. for (auto& simple_selector : relative_selector.simple_selectors) {
  379. if (!matches(simple_selector, element, scope))
  380. return false;
  381. }
  382. switch (relative_selector.combinator) {
  383. case CSS::Selector::Combinator::None:
  384. return true;
  385. case CSS::Selector::Combinator::Descendant:
  386. VERIFY(component_list_index != 0);
  387. for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) {
  388. if (!is<DOM::Element>(*ancestor))
  389. continue;
  390. if (matches(selector, component_list_index - 1, static_cast<DOM::Element const&>(*ancestor), scope))
  391. return true;
  392. }
  393. return false;
  394. case CSS::Selector::Combinator::ImmediateChild:
  395. VERIFY(component_list_index != 0);
  396. if (!element.parent() || !is<DOM::Element>(*element.parent()))
  397. return false;
  398. return matches(selector, component_list_index - 1, static_cast<DOM::Element const&>(*element.parent()), scope);
  399. case CSS::Selector::Combinator::NextSibling:
  400. VERIFY(component_list_index != 0);
  401. if (auto* sibling = element.previous_element_sibling())
  402. return matches(selector, component_list_index - 1, *sibling, scope);
  403. return false;
  404. case CSS::Selector::Combinator::SubsequentSibling:
  405. VERIFY(component_list_index != 0);
  406. for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
  407. if (matches(selector, component_list_index - 1, *sibling, scope))
  408. return true;
  409. }
  410. return false;
  411. case CSS::Selector::Combinator::Column:
  412. TODO();
  413. }
  414. VERIFY_NOT_REACHED();
  415. }
  416. bool matches(CSS::Selector const& selector, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> pseudo_element, JS::GCPtr<DOM::ParentNode const> scope)
  417. {
  418. VERIFY(!selector.compound_selectors().is_empty());
  419. if (pseudo_element.has_value() && selector.pseudo_element() != pseudo_element)
  420. return false;
  421. if (!pseudo_element.has_value() && selector.pseudo_element().has_value())
  422. return false;
  423. return matches(selector, selector.compound_selectors().size() - 1, element, scope);
  424. }
  425. }