SelectorEngine.cpp 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. /*
  2. * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, 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/HTMLHtmlElement.h>
  14. #include <LibWeb/HTML/HTMLInputElement.h>
  15. namespace Web::SelectorEngine {
  16. static inline bool matches_hover_pseudo_class(DOM::Element const& element)
  17. {
  18. auto* hovered_node = element.document().hovered_node();
  19. if (!hovered_node)
  20. return false;
  21. if (&element == hovered_node)
  22. return true;
  23. return element.is_ancestor_of(*hovered_node);
  24. }
  25. // https://html.spec.whatwg.org/multipage/semantics-other.html#selector-checked
  26. static inline bool matches_checked_pseudo_class(DOM::Element const& element)
  27. {
  28. // The :checked pseudo-class must match any element falling into one of the following categories:
  29. // - input elements whose type attribute is in the Checkbox state and whose checkedness state is true
  30. // - input elements whose type attribute is in the Radio Button state and whose checkedness state is true
  31. if (is<HTML::HTMLInputElement>(element)) {
  32. auto const& input_element = static_cast<HTML::HTMLInputElement const&>(element);
  33. switch (input_element.type_state()) {
  34. case HTML::HTMLInputElement::TypeAttributeState::Checkbox:
  35. case HTML::HTMLInputElement::TypeAttributeState::RadioButton:
  36. return static_cast<HTML::HTMLInputElement const&>(element).checked();
  37. default:
  38. return false;
  39. }
  40. }
  41. // FIXME: - option elements whose selectedness is true
  42. return false;
  43. }
  44. static inline bool matches_attribute(CSS::Selector::SimpleSelector::Attribute const& attribute, DOM::Element const& element)
  45. {
  46. switch (attribute.match_type) {
  47. case CSS::Selector::SimpleSelector::Attribute::MatchType::HasAttribute:
  48. return element.has_attribute(attribute.name);
  49. case CSS::Selector::SimpleSelector::Attribute::MatchType::ExactValueMatch:
  50. return element.attribute(attribute.name) == attribute.value;
  51. case CSS::Selector::SimpleSelector::Attribute::MatchType::ContainsWord:
  52. return element.attribute(attribute.name).split_view(' ').contains_slow(attribute.value);
  53. case CSS::Selector::SimpleSelector::Attribute::MatchType::ContainsString:
  54. return element.attribute(attribute.name).contains(attribute.value);
  55. case CSS::Selector::SimpleSelector::Attribute::MatchType::StartsWithSegment: {
  56. auto segments = element.attribute(attribute.name).split_view('-');
  57. return !segments.is_empty() && segments.first() == attribute.value;
  58. }
  59. case CSS::Selector::SimpleSelector::Attribute::MatchType::StartsWithString:
  60. return element.attribute(attribute.name).starts_with(attribute.value);
  61. case CSS::Selector::SimpleSelector::Attribute::MatchType::EndsWithString:
  62. return element.attribute(attribute.name).ends_with(attribute.value);
  63. case CSS::Selector::SimpleSelector::Attribute::MatchType::None:
  64. VERIFY_NOT_REACHED();
  65. break;
  66. }
  67. return false;
  68. }
  69. static inline DOM::Element const* previous_sibling_with_same_tag_name(DOM::Element const& element)
  70. {
  71. for (auto const* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
  72. if (sibling->tag_name() == element.tag_name())
  73. return sibling;
  74. }
  75. return nullptr;
  76. }
  77. static inline DOM::Element const* next_sibling_with_same_tag_name(DOM::Element const& element)
  78. {
  79. for (auto const* sibling = element.next_element_sibling(); sibling; sibling = sibling->next_element_sibling()) {
  80. if (sibling->tag_name() == element.tag_name())
  81. return sibling;
  82. }
  83. return nullptr;
  84. }
  85. static inline bool matches_pseudo_class(CSS::Selector::SimpleSelector::PseudoClass const& pseudo_class, DOM::Element const& element)
  86. {
  87. switch (pseudo_class.type) {
  88. case CSS::Selector::SimpleSelector::PseudoClass::Type::None:
  89. break;
  90. case CSS::Selector::SimpleSelector::PseudoClass::Type::Link:
  91. return element.is_link();
  92. case CSS::Selector::SimpleSelector::PseudoClass::Type::Visited:
  93. // FIXME: Maybe match this selector sometimes?
  94. return false;
  95. case CSS::Selector::SimpleSelector::PseudoClass::Type::Active:
  96. return element.is_active();
  97. case CSS::Selector::SimpleSelector::PseudoClass::Type::Hover:
  98. return matches_hover_pseudo_class(element);
  99. case CSS::Selector::SimpleSelector::PseudoClass::Type::Focus:
  100. return element.is_focused();
  101. case CSS::Selector::SimpleSelector::PseudoClass::Type::FirstChild:
  102. return !element.previous_element_sibling();
  103. case CSS::Selector::SimpleSelector::PseudoClass::Type::LastChild:
  104. return !element.next_element_sibling();
  105. case CSS::Selector::SimpleSelector::PseudoClass::Type::OnlyChild:
  106. return !(element.previous_element_sibling() || element.next_element_sibling());
  107. case CSS::Selector::SimpleSelector::PseudoClass::Type::Empty: {
  108. if (!element.has_children())
  109. return true;
  110. if (element.first_child_of_type<DOM::Element>())
  111. return false;
  112. // NOTE: CSS Selectors level 4 changed ":empty" to also match whitespace-only text nodes.
  113. // However, none of the major browser supports this yet, so let's just hang back until they do.
  114. bool has_nonempty_text_child = false;
  115. element.for_each_child_of_type<DOM::Text>([&](auto const& text_child) {
  116. if (!text_child.data().is_empty()) {
  117. has_nonempty_text_child = true;
  118. return IterationDecision::Break;
  119. }
  120. return IterationDecision::Continue;
  121. });
  122. return !has_nonempty_text_child;
  123. }
  124. case CSS::Selector::SimpleSelector::PseudoClass::Type::Root:
  125. return is<HTML::HTMLHtmlElement>(element);
  126. case CSS::Selector::SimpleSelector::PseudoClass::Type::FirstOfType:
  127. return !previous_sibling_with_same_tag_name(element);
  128. case CSS::Selector::SimpleSelector::PseudoClass::Type::LastOfType:
  129. return !next_sibling_with_same_tag_name(element);
  130. case CSS::Selector::SimpleSelector::PseudoClass::Type::OnlyOfType:
  131. return !previous_sibling_with_same_tag_name(element) && !next_sibling_with_same_tag_name(element);
  132. case CSS::Selector::SimpleSelector::PseudoClass::Type::Disabled:
  133. if (!element.tag_name().equals_ignoring_case(HTML::TagNames::input))
  134. return false;
  135. if (!element.has_attribute("disabled"))
  136. return false;
  137. return true;
  138. case CSS::Selector::SimpleSelector::PseudoClass::Type::Enabled:
  139. if (!element.tag_name().equals_ignoring_case(HTML::TagNames::input))
  140. return false;
  141. if (element.has_attribute("disabled"))
  142. return false;
  143. return true;
  144. case CSS::Selector::SimpleSelector::PseudoClass::Type::Checked:
  145. return matches_checked_pseudo_class(element);
  146. case CSS::Selector::SimpleSelector::PseudoClass::Type::Is:
  147. case CSS::Selector::SimpleSelector::PseudoClass::Type::Where:
  148. for (auto& selector : pseudo_class.argument_selector_list) {
  149. if (matches(selector, element))
  150. return true;
  151. }
  152. return false;
  153. case CSS::Selector::SimpleSelector::PseudoClass::Type::Not:
  154. for (auto& selector : pseudo_class.argument_selector_list) {
  155. if (matches(selector, element))
  156. return false;
  157. }
  158. return true;
  159. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild:
  160. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild:
  161. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType:
  162. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType:
  163. auto const step_size = pseudo_class.nth_child_pattern.step_size;
  164. auto const offset = pseudo_class.nth_child_pattern.offset;
  165. if (step_size == 0 && offset == 0)
  166. return false; // "If both a and b are equal to zero, the pseudo-class represents no element in the document tree."
  167. auto const* parent = element.parent_element();
  168. if (!parent)
  169. return false;
  170. auto matches_selector_list = [](CSS::SelectorList const& list, DOM::Element const& element) {
  171. if (list.is_empty())
  172. return true;
  173. for (auto const& child_selector : list) {
  174. if (matches(child_selector, element)) {
  175. return true;
  176. }
  177. }
  178. return false;
  179. };
  180. int index = 1;
  181. switch (pseudo_class.type) {
  182. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthChild: {
  183. if (!matches_selector_list(pseudo_class.argument_selector_list, element))
  184. return false;
  185. for (auto* child = parent->first_child_of_type<DOM::Element>(); child && child != &element; child = child->next_element_sibling()) {
  186. if (matches_selector_list(pseudo_class.argument_selector_list, *child))
  187. ++index;
  188. }
  189. break;
  190. }
  191. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastChild: {
  192. if (!matches_selector_list(pseudo_class.argument_selector_list, element))
  193. return false;
  194. for (auto* child = parent->last_child_of_type<DOM::Element>(); child && child != &element; child = child->previous_element_sibling()) {
  195. if (matches_selector_list(pseudo_class.argument_selector_list, *child))
  196. ++index;
  197. }
  198. break;
  199. }
  200. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthOfType: {
  201. for (auto* child = previous_sibling_with_same_tag_name(element); child; child = previous_sibling_with_same_tag_name(*child))
  202. ++index;
  203. break;
  204. }
  205. case CSS::Selector::SimpleSelector::PseudoClass::Type::NthLastOfType: {
  206. for (auto* child = next_sibling_with_same_tag_name(element); child; child = next_sibling_with_same_tag_name(*child))
  207. ++index;
  208. break;
  209. }
  210. default:
  211. VERIFY_NOT_REACHED();
  212. }
  213. // When "step_size == -1", selector represents first "offset" elements in document tree.
  214. if (step_size == -1)
  215. return !(offset <= 0 || index > offset);
  216. // When "step_size == 1", selector represents last "offset" elements in document tree.
  217. if (step_size == 1)
  218. return !(offset < 0 || index < offset);
  219. // When "step_size == 0", selector picks only the "offset" element.
  220. if (step_size == 0)
  221. return index == offset;
  222. // If both are negative, nothing can match.
  223. if (step_size < 0 && offset < 0)
  224. return false;
  225. // Like "a % b", but handles negative integers correctly.
  226. auto const canonical_modulo = [](int a, int b) -> int {
  227. int c = a % b;
  228. if ((c < 0 && b > 0) || (c > 0 && b < 0)) {
  229. c += b;
  230. }
  231. return c;
  232. };
  233. // When "step_size < 0", we start at "offset" and count backwards.
  234. if (step_size < 0)
  235. return index <= offset && canonical_modulo(index - offset, -step_size) == 0;
  236. // Otherwise, we start at "offset" and count forwards.
  237. return index >= offset && canonical_modulo(index - offset, step_size) == 0;
  238. }
  239. return false;
  240. }
  241. static inline bool matches(CSS::Selector::SimpleSelector const& component, DOM::Element const& element)
  242. {
  243. switch (component.type) {
  244. case CSS::Selector::SimpleSelector::Type::Universal:
  245. return true;
  246. case CSS::Selector::SimpleSelector::Type::Id:
  247. return component.value == element.attribute(HTML::AttributeNames::id);
  248. case CSS::Selector::SimpleSelector::Type::Class:
  249. return element.has_class(component.value);
  250. case CSS::Selector::SimpleSelector::Type::TagName:
  251. return component.value == element.local_name();
  252. case CSS::Selector::SimpleSelector::Type::Attribute:
  253. return matches_attribute(component.attribute, element);
  254. case CSS::Selector::SimpleSelector::Type::PseudoClass:
  255. return matches_pseudo_class(component.pseudo_class, element);
  256. case CSS::Selector::SimpleSelector::Type::PseudoElement:
  257. // Pseudo-element matching/not-matching is handled in the top level matches().
  258. return true;
  259. default:
  260. VERIFY_NOT_REACHED();
  261. }
  262. }
  263. static inline bool matches(CSS::Selector const& selector, int component_list_index, DOM::Element const& element)
  264. {
  265. auto& relative_selector = selector.compound_selectors()[component_list_index];
  266. for (auto& simple_selector : relative_selector.simple_selectors) {
  267. if (!matches(simple_selector, element))
  268. return false;
  269. }
  270. switch (relative_selector.combinator) {
  271. case CSS::Selector::Combinator::None:
  272. return true;
  273. case CSS::Selector::Combinator::Descendant:
  274. VERIFY(component_list_index != 0);
  275. for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) {
  276. if (!is<DOM::Element>(*ancestor))
  277. continue;
  278. if (matches(selector, component_list_index - 1, static_cast<DOM::Element const&>(*ancestor)))
  279. return true;
  280. }
  281. return false;
  282. case CSS::Selector::Combinator::ImmediateChild:
  283. VERIFY(component_list_index != 0);
  284. if (!element.parent() || !is<DOM::Element>(*element.parent()))
  285. return false;
  286. return matches(selector, component_list_index - 1, static_cast<DOM::Element const&>(*element.parent()));
  287. case CSS::Selector::Combinator::NextSibling:
  288. VERIFY(component_list_index != 0);
  289. if (auto* sibling = element.previous_element_sibling())
  290. return matches(selector, component_list_index - 1, *sibling);
  291. return false;
  292. case CSS::Selector::Combinator::SubsequentSibling:
  293. VERIFY(component_list_index != 0);
  294. for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
  295. if (matches(selector, component_list_index - 1, *sibling))
  296. return true;
  297. }
  298. return false;
  299. case CSS::Selector::Combinator::Column:
  300. TODO();
  301. }
  302. VERIFY_NOT_REACHED();
  303. }
  304. bool matches(CSS::Selector const& selector, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> pseudo_element)
  305. {
  306. VERIFY(!selector.compound_selectors().is_empty());
  307. if (pseudo_element.has_value() && selector.pseudo_element() != pseudo_element)
  308. return false;
  309. if (!pseudo_element.has_value() && selector.pseudo_element().has_value())
  310. return false;
  311. return matches(selector, selector.compound_selectors().size() - 1, element);
  312. }
  313. }