SelectorEngine.cpp 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458
  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::Defined:
  256. return element.is_defined();
  257. case CSS::Selector::SimpleSelector::PseudoClass::Type::Is:
  258. case CSS::Selector::SimpleSelector::PseudoClass::Type::Where:
  259. for (auto& selector : pseudo_class.argument_selector_list) {
  260. if (matches(selector, element))
  261. return true;
  262. }
  263. return false;
  264. case CSS::Selector::SimpleSelector::PseudoClass::Type::Not:
  265. for (auto& selector : pseudo_class.argument_selector_list) {
  266. if (matches(selector, element))
  267. return false;
  268. }
  269. return true;
  270. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild:
  271. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild:
  272. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType:
  273. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType:
  274. auto const step_size = pseudo_class.nth_child_pattern.step_size;
  275. auto const offset = pseudo_class.nth_child_pattern.offset;
  276. if (step_size == 0 && offset == 0)
  277. return false; // "If both a and b are equal to zero, the pseudo-class represents no element in the document tree."
  278. auto const* parent = element.parent_element();
  279. if (!parent)
  280. return false;
  281. auto matches_selector_list = [](CSS::SelectorList const& list, DOM::Element const& element) {
  282. if (list.is_empty())
  283. return true;
  284. for (auto const& child_selector : list) {
  285. if (matches(child_selector, element)) {
  286. return true;
  287. }
  288. }
  289. return false;
  290. };
  291. int index = 1;
  292. switch (pseudo_class.type) {
  293. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild: {
  294. if (!matches_selector_list(pseudo_class.argument_selector_list, element))
  295. return false;
  296. for (auto* child = parent->first_child_of_type<DOM::Element>(); child && child != &element; child = child->next_element_sibling()) {
  297. if (matches_selector_list(pseudo_class.argument_selector_list, *child))
  298. ++index;
  299. }
  300. break;
  301. }
  302. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild: {
  303. if (!matches_selector_list(pseudo_class.argument_selector_list, element))
  304. return false;
  305. for (auto* child = parent->last_child_of_type<DOM::Element>(); child && child != &element; child = child->previous_element_sibling()) {
  306. if (matches_selector_list(pseudo_class.argument_selector_list, *child))
  307. ++index;
  308. }
  309. break;
  310. }
  311. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType: {
  312. for (auto* child = previous_sibling_with_same_tag_name(element); child; child = previous_sibling_with_same_tag_name(*child))
  313. ++index;
  314. break;
  315. }
  316. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType: {
  317. for (auto* child = next_sibling_with_same_tag_name(element); child; child = next_sibling_with_same_tag_name(*child))
  318. ++index;
  319. break;
  320. }
  321. default:
  322. VERIFY_NOT_REACHED();
  323. }
  324. // When "step_size == -1", selector represents first "offset" elements in document tree.
  325. if (step_size == -1)
  326. return !(offset <= 0 || index > offset);
  327. // When "step_size == 1", selector represents last "offset" elements in document tree.
  328. if (step_size == 1)
  329. return !(offset < 0 || index < offset);
  330. // When "step_size == 0", selector picks only the "offset" element.
  331. if (step_size == 0)
  332. return index == offset;
  333. // If both are negative, nothing can match.
  334. if (step_size < 0 && offset < 0)
  335. return false;
  336. // Like "a % b", but handles negative integers correctly.
  337. auto const canonical_modulo = [](int a, int b) -> int {
  338. int c = a % b;
  339. if ((c < 0 && b > 0) || (c > 0 && b < 0)) {
  340. c += b;
  341. }
  342. return c;
  343. };
  344. // When "step_size < 0", we start at "offset" and count backwards.
  345. if (step_size < 0)
  346. return index <= offset && canonical_modulo(index - offset, -step_size) == 0;
  347. // Otherwise, we start at "offset" and count forwards.
  348. return index >= offset && canonical_modulo(index - offset, step_size) == 0;
  349. }
  350. return false;
  351. }
  352. static inline bool matches(CSS::Selector::SimpleSelector const& component, DOM::Element const& element, JS::GCPtr<DOM::ParentNode const> scope)
  353. {
  354. switch (component.type) {
  355. case CSS::Selector::SimpleSelector::Type::Universal:
  356. return true;
  357. case CSS::Selector::SimpleSelector::Type::Id:
  358. return component.name() == element.attribute(HTML::AttributeNames::id).view();
  359. case CSS::Selector::SimpleSelector::Type::Class:
  360. return element.has_class(component.name());
  361. case CSS::Selector::SimpleSelector::Type::TagName:
  362. // See https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors
  363. if (element.document().document_type() == DOM::Document::Type::HTML)
  364. return component.lowercase_name() == element.local_name().view();
  365. return Infra::is_ascii_case_insensitive_match(component.name(), element.local_name());
  366. case CSS::Selector::SimpleSelector::Type::Attribute:
  367. return matches_attribute(component.attribute(), element);
  368. case CSS::Selector::SimpleSelector::Type::PseudoClass:
  369. return matches_pseudo_class(component.pseudo_class(), element, scope);
  370. case CSS::Selector::SimpleSelector::Type::PseudoElement:
  371. // Pseudo-element matching/not-matching is handled in the top level matches().
  372. return true;
  373. default:
  374. VERIFY_NOT_REACHED();
  375. }
  376. }
  377. static inline bool matches(CSS::Selector const& selector, int component_list_index, DOM::Element const& element, JS::GCPtr<DOM::ParentNode const> scope)
  378. {
  379. auto& relative_selector = selector.compound_selectors()[component_list_index];
  380. for (auto& simple_selector : relative_selector.simple_selectors) {
  381. if (!matches(simple_selector, element, scope))
  382. return false;
  383. }
  384. switch (relative_selector.combinator) {
  385. case CSS::Selector::Combinator::None:
  386. return true;
  387. case CSS::Selector::Combinator::Descendant:
  388. VERIFY(component_list_index != 0);
  389. for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) {
  390. if (!is<DOM::Element>(*ancestor))
  391. continue;
  392. if (matches(selector, component_list_index - 1, static_cast<DOM::Element const&>(*ancestor), scope))
  393. return true;
  394. }
  395. return false;
  396. case CSS::Selector::Combinator::ImmediateChild:
  397. VERIFY(component_list_index != 0);
  398. if (!element.parent() || !is<DOM::Element>(*element.parent()))
  399. return false;
  400. return matches(selector, component_list_index - 1, static_cast<DOM::Element const&>(*element.parent()), scope);
  401. case CSS::Selector::Combinator::NextSibling:
  402. VERIFY(component_list_index != 0);
  403. if (auto* sibling = element.previous_element_sibling())
  404. return matches(selector, component_list_index - 1, *sibling, scope);
  405. return false;
  406. case CSS::Selector::Combinator::SubsequentSibling:
  407. VERIFY(component_list_index != 0);
  408. for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
  409. if (matches(selector, component_list_index - 1, *sibling, scope))
  410. return true;
  411. }
  412. return false;
  413. case CSS::Selector::Combinator::Column:
  414. TODO();
  415. }
  416. VERIFY_NOT_REACHED();
  417. }
  418. bool matches(CSS::Selector const& selector, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> pseudo_element, JS::GCPtr<DOM::ParentNode const> scope)
  419. {
  420. VERIFY(!selector.compound_selectors().is_empty());
  421. if (pseudo_element.has_value() && selector.pseudo_element() != pseudo_element)
  422. return false;
  423. if (!pseudo_element.has_value() && selector.pseudo_element().has_value())
  424. return false;
  425. return matches(selector, selector.compound_selectors().size() - 1, element, scope);
  426. }
  427. }