| 
									
										
										
										
											2020-01-18 09:38:21 +01:00
										 |  |  | /*
 | 
					
						
							|  |  |  |  * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org> | 
					
						
							|  |  |  |  * | 
					
						
							| 
									
										
										
										
											2021-04-22 01:24:48 -07:00
										 |  |  |  * SPDX-License-Identifier: BSD-2-Clause | 
					
						
							| 
									
										
										
										
											2020-01-18 09:38:21 +01:00
										 |  |  |  */ | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-03-07 10:32:51 +01:00
										 |  |  | #include <LibWeb/CSS/SelectorEngine.h>
 | 
					
						
							|  |  |  | #include <LibWeb/DOM/Document.h>
 | 
					
						
							|  |  |  | #include <LibWeb/DOM/Element.h>
 | 
					
						
							|  |  |  | #include <LibWeb/DOM/Text.h>
 | 
					
						
							| 
									
										
										
										
											2020-08-12 14:46:53 +02:00
										 |  |  | #include <LibWeb/HTML/AttributeNames.h>
 | 
					
						
							| 
									
										
										
										
											2021-01-01 18:12:33 +01:00
										 |  |  | #include <LibWeb/HTML/HTMLElement.h>
 | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  | namespace Web::SelectorEngine { | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-26 19:37:56 +02:00
										 |  |  | static bool matches_hover_pseudo_class(const DOM::Element& element) | 
					
						
							| 
									
										
										
										
											2019-10-14 17:54:17 +02:00
										 |  |  | { | 
					
						
							|  |  |  |     auto* hovered_node = element.document().hovered_node(); | 
					
						
							|  |  |  |     if (!hovered_node) | 
					
						
							|  |  |  |         return false; | 
					
						
							|  |  |  |     if (&element == hovered_node) | 
					
						
							|  |  |  |         return true; | 
					
						
							|  |  |  |     return element.is_ancestor_of(*hovered_node); | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-08-11 00:07:16 +02:00
										 |  |  | static bool matches(const CSS::Selector::SimpleSelector& component, const DOM::Element& element) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2020-12-01 15:40:20 +01:00
										 |  |  |     switch (component.pseudo_element) { | 
					
						
							|  |  |  |     case CSS::Selector::SimpleSelector::PseudoElement::None: | 
					
						
							|  |  |  |         break; | 
					
						
							|  |  |  |     default: | 
					
						
							|  |  |  |         // FIXME: Implement pseudo-elements.
 | 
					
						
							|  |  |  |         return false; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-10-14 17:54:17 +02:00
										 |  |  |     switch (component.pseudo_class) { | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::None: | 
					
						
							| 
									
										
										
										
											2019-10-14 17:54:17 +02:00
										 |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::Link: | 
					
						
							| 
									
										
										
										
											2019-10-20 09:18:46 +02:00
										 |  |  |         if (!element.is_link()) | 
					
						
							|  |  |  |             return false; | 
					
						
							| 
									
										
										
										
											2019-10-14 17:54:17 +02:00
										 |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::Visited: | 
					
						
							| 
									
										
										
										
											2020-06-13 00:21:42 +02:00
										 |  |  |         // FIXME: Maybe match this selector sometimes?
 | 
					
						
							|  |  |  |         return false; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::Hover: | 
					
						
							| 
									
										
										
										
											2019-10-14 17:54:17 +02:00
										 |  |  |         if (!matches_hover_pseudo_class(element)) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::Focus: | 
					
						
							| 
									
										
										
										
											2020-05-05 11:48:13 +01:00
										 |  |  |         // FIXME: Implement matches_focus_pseudo_class(element)
 | 
					
						
							|  |  |  |         return false; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::FirstChild: | 
					
						
							| 
									
										
										
										
											2019-12-16 19:34:52 +01:00
										 |  |  |         if (element.previous_element_sibling()) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::LastChild: | 
					
						
							| 
									
										
										
										
											2019-12-16 19:34:52 +01:00
										 |  |  |         if (element.next_element_sibling()) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::OnlyChild: | 
					
						
							| 
									
										
										
										
											2019-12-16 19:52:11 +01:00
										 |  |  |         if (element.previous_element_sibling() || element.next_element_sibling()) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::Empty: | 
					
						
							| 
									
										
										
										
											2020-07-26 19:37:56 +02:00
										 |  |  |         if (element.first_child_of_type<DOM::Element>() || element.first_child_of_type<DOM::Text>()) | 
					
						
							| 
									
										
										
										
											2019-12-16 19:45:50 +01:00
										 |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::Root: | 
					
						
							| 
									
										
										
										
											2021-01-01 18:12:33 +01:00
										 |  |  |         if (!is<HTML::HTMLElement>(element)) | 
					
						
							| 
									
										
										
										
											2020-05-13 22:38:12 +01:00
										 |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2021-04-06 12:23:32 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::FirstOfType: | 
					
						
							|  |  |  |         for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) { | 
					
						
							|  |  |  |             if (sibling->tag_name() == element.tag_name()) | 
					
						
							|  |  |  |                 return false; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2021-04-06 13:06:25 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::PseudoClass::LastOfType: | 
					
						
							|  |  |  |         for (auto* sibling = element.next_element_sibling(); sibling; sibling = sibling->next_element_sibling()) { | 
					
						
							|  |  |  |             if (sibling->tag_name() == element.tag_name()) | 
					
						
							|  |  |  |                 return false; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2019-10-14 17:54:17 +02:00
										 |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-11-21 20:07:43 +01:00
										 |  |  |     switch (component.attribute_match_type) { | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::AttributeMatchType::HasAttribute: | 
					
						
							| 
									
										
										
										
											2019-11-21 20:07:43 +01:00
										 |  |  |         if (!element.has_attribute(component.attribute_name)) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::AttributeMatchType::ExactValueMatch: | 
					
						
							| 
									
										
										
										
											2019-11-21 20:07:43 +01:00
										 |  |  |         if (element.attribute(component.attribute_name) != component.attribute_value) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::AttributeMatchType::Contains: | 
					
						
							| 
									
										
										
										
											2020-06-10 15:43:41 +02:00
										 |  |  |         if (!element.attribute(component.attribute_name).split(' ').contains_slow(component.attribute_value)) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |         break; | 
					
						
							| 
									
										
										
										
											2019-11-21 20:07:43 +01:00
										 |  |  |     default: | 
					
						
							|  |  |  |         break; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |     switch (component.type) { | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::Type::Universal: | 
					
						
							| 
									
										
										
										
											2019-11-19 18:22:12 +01:00
										 |  |  |         return true; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::Type::Id: | 
					
						
							| 
									
										
										
										
											2020-05-26 23:27:22 +02:00
										 |  |  |         return component.value == element.attribute(HTML::AttributeNames::id); | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::Type::Class: | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |         return element.has_class(component.value); | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::SimpleSelector::Type::TagName: | 
					
						
							| 
									
										
										
										
											2020-07-23 18:18:13 +02:00
										 |  |  |         return component.value == element.local_name(); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |     default: | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |         VERIFY_NOT_REACHED(); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |     } | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-08-11 00:07:16 +02:00
										 |  |  | static bool matches(const CSS::Selector& selector, int component_list_index, const DOM::Element& element) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2019-11-27 20:37:36 +01:00
										 |  |  |     auto& component_list = selector.complex_selectors()[component_list_index]; | 
					
						
							|  |  |  |     for (auto& component : component_list.compound_selector) { | 
					
						
							|  |  |  |         if (!matches(component, element)) | 
					
						
							|  |  |  |             return false; | 
					
						
							|  |  |  |     } | 
					
						
							|  |  |  |     switch (component_list.relation) { | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::ComplexSelector::Relation::None: | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |         return true; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::ComplexSelector::Relation::Descendant: | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |         VERIFY(component_list_index != 0); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |         for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) { | 
					
						
							| 
									
										
										
										
											2020-07-26 19:37:56 +02:00
										 |  |  |             if (!is<DOM::Element>(*ancestor)) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |                 continue; | 
					
						
							| 
									
										
										
										
											2020-07-26 19:37:56 +02:00
										 |  |  |             if (matches(selector, component_list_index - 1, downcast<DOM::Element>(*ancestor))) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |                 return true; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |         return false; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::ComplexSelector::Relation::ImmediateChild: | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |         VERIFY(component_list_index != 0); | 
					
						
							| 
									
										
										
										
											2020-07-26 19:37:56 +02:00
										 |  |  |         if (!element.parent() || !is<DOM::Element>(*element.parent())) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |             return false; | 
					
						
							| 
									
										
										
										
											2020-07-26 19:37:56 +02:00
										 |  |  |         return matches(selector, component_list_index - 1, downcast<DOM::Element>(*element.parent())); | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::ComplexSelector::Relation::AdjacentSibling: | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |         VERIFY(component_list_index != 0); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |         if (auto* sibling = element.previous_element_sibling()) | 
					
						
							| 
									
										
										
										
											2019-11-27 20:37:36 +01:00
										 |  |  |             return matches(selector, component_list_index - 1, *sibling); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |         return false; | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  |     case CSS::Selector::ComplexSelector::Relation::GeneralSibling: | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |         VERIFY(component_list_index != 0); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |         for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) { | 
					
						
							| 
									
										
										
										
											2019-11-27 20:37:36 +01:00
										 |  |  |             if (matches(selector, component_list_index - 1, *sibling)) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |                 return true; | 
					
						
							|  |  |  |         } | 
					
						
							|  |  |  |         return false; | 
					
						
							| 
									
										
										
										
											2021-04-29 21:16:28 +02:00
										 |  |  |     case CSS::Selector::ComplexSelector::Relation::Column: | 
					
						
							|  |  |  |         TODO(); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  |     } | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |     VERIFY_NOT_REACHED(); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2020-07-26 20:01:35 +02:00
										 |  |  | bool matches(const CSS::Selector& selector, const DOM::Element& element) | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | { | 
					
						
							| 
									
										
										
										
											2021-02-23 20:42:32 +01:00
										 |  |  |     VERIFY(!selector.complex_selectors().is_empty()); | 
					
						
							| 
									
										
										
										
											2019-11-27 20:37:36 +01:00
										 |  |  |     return matches(selector, selector.complex_selectors().size() - 1, element); | 
					
						
							| 
									
										
										
										
											2019-10-08 15:33:58 +02:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | } |