RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-30 22:28:12 +00:00
Code Issues Activity Actions

LibHTML: Implement compound selectors

Browse source 
This patch moves the Selector object model closer to the specification
objects in Selectors Level 4.

A "Selector" in LibHTML is now a { Vector<ComplexSelector> }, which is
a { Relation, CompoundSelector }. A CompoundSelector is really just
a Vector<SimpleSelector>, and SimpleSelector is "Component" renamed.

This makes a lot more selectors actually match on the Ubuntu Apache2
default homepage. :^)
This commit is contained in:
Andreas Kling 2019-11-27 20:37:36 +01:00
parent 449ebbddb6
commit d19d4da14a
5 changed files with 194 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

32
Libraries/LibHTML/CSS/Selector.cpp
View file

@ -1,7 +1,7 @@
#include <LibHTML/CSS/Selector.h> #include <LibHTML/CSS/Selector.h>
Selector::Selector(Vector<Component>&& components) Selector::Selector(Vector<ComplexSelector>&& component_lists)
: m_components(move(components)) : m_complex_selectors(move(component_lists))
{ {
} }
@ -15,19 +15,21 @@ Specificity Selector::specificity() const
unsigned tag_names = 0; unsigned tag_names = 0;
unsigned classes = 0; unsigned classes = 0;
for (auto& component : m_components) { for (auto& list : m_complex_selectors) {
switch (component.type) { for (auto& simple_selector : list.compound_selector) {
case Component::Type::Id: switch (simple_selector.type) {
++ids; case SimpleSelector::Type::Id:
break; ++ids;
case Component::Type::Class: break;
++classes; case SimpleSelector::Type::Class:
break; ++classes;
case Component::Type::TagName: break;
++tag_names; case SimpleSelector::Type::TagName:
break; ++tag_names;
default: break;
break; default:
break;
}
} }
} }

31
Libraries/LibHTML/CSS/Selector.h
View file

@ -6,7 +6,7 @@
class Selector { class Selector {
public: public:
struct Component { struct SimpleSelector {
enum class Type { enum class Type {
Invalid, Invalid,
Universal, Universal,
@ -23,15 +23,6 @@ public:
}; };
PseudoClass pseudo_class { PseudoClass::None }; PseudoClass pseudo_class { PseudoClass::None };
enum class Relation {
None,
ImmediateChild,
Descendant,
AdjacentSibling,
GeneralSibling,
};
Relation relation { Relation::None };
String value; String value;
enum class AttributeMatchType { enum class AttributeMatchType {
@ -45,13 +36,27 @@ public:
String attribute_value; String attribute_value;
}; };
explicit Selector(Vector<Component>&&); struct ComplexSelector {
enum class Relation {
None,
ImmediateChild,
Descendant,
AdjacentSibling,
GeneralSibling,
};
Relation relation { Relation::None };
using CompoundSelector = Vector<SimpleSelector>;
CompoundSelector compound_selector;
};
explicit Selector(Vector<ComplexSelector>&&);
~Selector(); ~Selector();
const Vector<Component>& components() const { return m_components; } const Vector<ComplexSelector>& complex_selectors() const { return m_complex_selectors; }
Specificity specificity() const; Specificity specificity() const;
private: private:
Vector<Component> m_components; Vector<ComplexSelector> m_complex_selectors;
}; };

62
Libraries/LibHTML/CSS/SelectorEngine.cpp
View file

@ -14,27 +14,27 @@ static bool matches_hover_pseudo_class(const Element& element)
return element.is_ancestor_of(*hovered_node); return element.is_ancestor_of(*hovered_node);
} }
bool matches(const Selector::Component& component, const Element& element) bool matches(const Selector::SimpleSelector& component, const Element& element)
{ {
switch (component.pseudo_class) { switch (component.pseudo_class) {
case Selector::Component::PseudoClass::None: case Selector::SimpleSelector::PseudoClass::None:
break; break;
case Selector::Component::PseudoClass::Link: case Selector::SimpleSelector::PseudoClass::Link:
if (!element.is_link()) if (!element.is_link())
return false; return false;
break; break;
case Selector::Component::PseudoClass::Hover: case Selector::SimpleSelector::PseudoClass::Hover:
if (!matches_hover_pseudo_class(element)) if (!matches_hover_pseudo_class(element))
return false; return false;
break; break;
} }
switch (component.attribute_match_type) { switch (component.attribute_match_type) {
case Selector::Component::AttributeMatchType::HasAttribute: case Selector::SimpleSelector::AttributeMatchType::HasAttribute:
if (!element.has_attribute(component.attribute_name)) if (!element.has_attribute(component.attribute_name))
return false; return false;
break; break;
case Selector::Component::AttributeMatchType::ExactValueMatch: case Selector::SimpleSelector::AttributeMatchType::ExactValueMatch:
if (element.attribute(component.attribute_name) != component.attribute_value) if (element.attribute(component.attribute_name) != component.attribute_value)
return false; return false;
break; break;
@ -43,50 +43,52 @@ bool matches(const Selector::Component& component, const Element& element)
} }
switch (component.type) { switch (component.type) {
case Selector::Component::Type::Universal: case Selector::SimpleSelector::Type::Universal:
return true; return true;
case Selector::Component::Type::Id: case Selector::SimpleSelector::Type::Id:
return component.value == element.attribute("id"); return component.value == element.attribute("id");
case Selector::Component::Type::Class: case Selector::SimpleSelector::Type::Class:
return element.has_class(component.value); return element.has_class(component.value);
case Selector::Component::Type::TagName: case Selector::SimpleSelector::Type::TagName:
return component.value == element.tag_name(); return component.value == element.tag_name();
default: default:
ASSERT_NOT_REACHED(); ASSERT_NOT_REACHED();
} }
} }
bool matches(const Selector& selector, int component_index, const Element& element) bool matches(const Selector& selector, int component_list_index, const Element& element)
{ {
auto& component = selector.components()[component_index]; auto& component_list = selector.complex_selectors()[component_list_index];
if (!matches(component, element)) for (auto& component : component_list.compound_selector) {
return false; if (!matches(component, element))
switch (component.relation) { return false;
case Selector::Component::Relation::None: }
switch (component_list.relation) {
case Selector::ComplexSelector::Relation::None:
return true; return true;
case Selector::Component::Relation::Descendant: case Selector::ComplexSelector::Relation::Descendant:
ASSERT(component_index != 0); ASSERT(component_list_index != 0);
for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) { for (auto* ancestor = element.parent(); ancestor; ancestor = ancestor->parent()) {
if (!is<Element>(*ancestor)) if (!is<Element>(*ancestor))
continue; continue;
if (matches(selector, component_index - 1, to<Element>(*ancestor))) if (matches(selector, component_list_index - 1, to<Element>(*ancestor)))
return true; return true;
} }
return false; return false;
case Selector::Component::Relation::ImmediateChild: case Selector::ComplexSelector::Relation::ImmediateChild:
ASSERT(component_index != 0); ASSERT(component_list_index != 0);
if (!element.parent() || !is<Element>(*element.parent())) if (!element.parent() || !is<Element>(*element.parent()))
return false; return false;
return matches(selector, component_index - 1, to<Element>(*element.parent())); return matches(selector, component_list_index - 1, to<Element>(*element.parent()));
case Selector::Component::Relation::AdjacentSibling: case Selector::ComplexSelector::Relation::AdjacentSibling:
ASSERT(component_index != 0); ASSERT(component_list_index != 0);
if (auto* sibling = element.previous_element_sibling()) if (auto* sibling = element.previous_element_sibling())
return matches(selector, component_index - 1, *sibling); return matches(selector, component_list_index - 1, *sibling);
return false; return false;
case Selector::Component::Relation::GeneralSibling: case Selector::ComplexSelector::Relation::GeneralSibling:
ASSERT(component_index != 0); ASSERT(component_list_index != 0);
for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) { for (auto* sibling = element.previous_element_sibling(); sibling; sibling = sibling->previous_element_sibling()) {
if (matches(selector, component_index - 1, *sibling)) if (matches(selector, component_list_index - 1, *sibling))
return true; return true;
} }
return false; return false;
@ -96,8 +98,8 @@ bool matches(const Selector& selector, int component_index, const Element& eleme
bool matches(const Selector& selector, const Element& element) bool matches(const Selector& selector, const Element& element)
{ {
ASSERT(!selector.components().is_empty()); ASSERT(!selector.complex_selectors().is_empty());
return matches(selector, selector.components().size() - 1, element); return matches(selector, selector.complex_selectors().size() - 1, element);
} }
} }

99
Libraries/LibHTML/Dump.cpp
View file

@ -144,57 +144,70 @@ void dump_rule(const StyleRule& rule)
dbgprintf("Rule:\n"); dbgprintf("Rule:\n");
for (auto& selector : rule.selectors()) { for (auto& selector : rule.selectors()) {
dbgprintf(" Selector:\n"); dbgprintf(" Selector:\n");
for (auto& component : selector.components()) {
const char* type_description = "Unknown"; for (auto& complex_selector : selector.complex_selectors()) {
switch (component.type) { dbgprintf(" ");
case Selector::Component::Type::Invalid:
type_description = "Invalid";
break;
case Selector::Component::Type::Universal:
type_description = "Universal";
break;
case Selector::Component::Type::Id:
type_description = "Id";
break;
case Selector::Component::Type::Class:
type_description = "Class";
break;
case Selector::Component::Type::TagName:
type_description = "TagName";
break;
}
const char* relation_description = ""; const char* relation_description = "";
switch (component.relation) { switch (complex_selector.relation) {
case Selector::Component::Relation::None: case Selector::ComplexSelector::Relation::None:
break; break;
case Selector::Component::Relation::ImmediateChild: case Selector::ComplexSelector::Relation::ImmediateChild:
relation_description = "{ImmediateChild}"; relation_description = "ImmediateChild";
break; break;
case Selector::Component::Relation::Descendant: case Selector::ComplexSelector::Relation::Descendant:
relation_description = "{Descendant}"; relation_description = "Descendant";
break; break;
case Selector::Component::Relation::AdjacentSibling: case Selector::ComplexSelector::Relation::AdjacentSibling:
relation_description = "{AdjacentSibling}"; relation_description = "AdjacentSibling";
break; break;
case Selector::Component::Relation::GeneralSibling: case Selector::ComplexSelector::Relation::GeneralSibling:
relation_description = "{GeneralSibling}"; relation_description = "GeneralSibling";
break;
}
const char* attribute_match_type_description = "";
switch (component.attribute_match_type) {
case Selector::Component::AttributeMatchType::None:
break;
case Selector::Component::AttributeMatchType::HasAttribute:
attribute_match_type_description = "HasAttribute";
break;
case Selector::Component::AttributeMatchType::ExactValueMatch:
attribute_match_type_description = "ExactValueMatch";
break; break;
} }
dbgprintf(" %s:%s %s", type_description, component.value.characters(), relation_description); if (*relation_description)
if (component.attribute_match_type != Selector::Component::AttributeMatchType::None) { dbgprintf("{%s} ", relation_description);
dbgprintf(" [%s, name='%s', value='%s']", attribute_match_type_description, component.attribute_name.characters(), component.attribute_value.characters());
for (int i = 0; i < complex_selector.compound_selector.size(); ++i) {
auto& simple_selector = complex_selector.compound_selector[i];
const char* type_description = "Unknown";
switch (simple_selector.type) {
case Selector::SimpleSelector::Type::Invalid:
type_description = "Invalid";
break;
case Selector::SimpleSelector::Type::Universal:
type_description = "Universal";
break;
case Selector::SimpleSelector::Type::Id:
type_description = "Id";
break;
case Selector::SimpleSelector::Type::Class:
type_description = "Class";
break;
case Selector::SimpleSelector::Type::TagName:
type_description = "TagName";
break;
}
const char* attribute_match_type_description = "";
switch (simple_selector.attribute_match_type) {
case Selector::SimpleSelector::AttributeMatchType::None:
break;
case Selector::SimpleSelector::AttributeMatchType::HasAttribute:
attribute_match_type_description = "HasAttribute";
break;
case Selector::SimpleSelector::AttributeMatchType::ExactValueMatch:
attribute_match_type_description = "ExactValueMatch";
break;
}
dbgprintf("%s:%s", type_description, simple_selector.value.characters());
if (simple_selector.attribute_match_type != Selector::SimpleSelector::AttributeMatchType::None) {
dbgprintf(" [%s, name='%s', value='%s']", attribute_match_type_description, simple_selector.attribute_name.characters(), simple_selector.attribute_value.characters());
}
if (i != complex_selector.compound_selector.size() - 1)
dbgprintf(", ");
} }
dbgprintf("\n"); dbgprintf("\n");
} }

118
Libraries/LibHTML/Parser/CSSParser.cpp
View file

@ -4,6 +4,7 @@
#include <LibHTML/Parser/CSSParser.h> #include <LibHTML/Parser/CSSParser.h>
#include <ctype.h> #include <ctype.h>
#include <stdio.h> #include <stdio.h>
#include <stdlib.h>
#define PARSE_ASSERT(x) \ #define PARSE_ASSERT(x) \
if (!(x)) { \ if (!(x)) { \
@ -166,8 +167,9 @@ public:
return css[index++]; return css[index++];
}; };
void consume_whitespace_or_comments() bool consume_whitespace_or_comments()
{ {
int original_index = index;
bool in_comment = false; bool in_comment = false;
for (; index < css.length(); ++index) { for (; index < css.length(); ++index) {
char ch = peek(); char ch = peek();
@ -187,6 +189,7 @@ public:
continue; continue;
break; break;
} }
return original_index != index;
} }
bool is_valid_selector_char(char ch) const bool is_valid_selector_char(char ch) const
@ -199,76 +202,59 @@ public:
return ch == '~' || ch == '>' || ch == '+'; return ch == '~' || ch == '>' || ch == '+';
} }
Optional<Selector::Component> parse_selector_component() Optional<Selector::SimpleSelector> parse_selector_component()
{ {
consume_whitespace_or_comments(); if (consume_whitespace_or_comments())
Selector::Component::Type type;
Selector::Component::Relation relation = Selector::Component::Relation::Descendant;
if (peek() == '{')
return {}; return {};
if (is_combinator(peek())) { if (peek() == '{' || peek() == ',')
switch (peek()) { return {};
case '>':
relation = Selector::Component::Relation::ImmediateChild; Selector::SimpleSelector::Type type;
break;
case '+':
relation = Selector::Component::Relation::AdjacentSibling;
break;
case '~':
relation = Selector::Component::Relation::GeneralSibling;
break;
}
consume_one();
consume_whitespace_or_comments();
}
if (peek() == '*') { if (peek() == '*') {
type = Selector::Component::Type::Universal; type = Selector::SimpleSelector::Type::Universal;
consume_one(); consume_one();
return Selector::Component { return Selector::SimpleSelector {
type, type,
Selector::Component::PseudoClass::None, Selector::SimpleSelector::PseudoClass::None,
relation,
String(), String(),
Selector::Component::AttributeMatchType::None, Selector::SimpleSelector::AttributeMatchType::None,
String(), String(),
String() String()
}; };
} }
if (peek() == '.') { if (peek() == '.') {
type = Selector::Component::Type::Class; type = Selector::SimpleSelector::Type::Class;
consume_one(); consume_one();
} else if (peek() == '#') { } else if (peek() == '#') {
type = Selector::Component::Type::Id; type = Selector::SimpleSelector::Type::Id;
consume_one(); consume_one();
} else if (isalpha(peek())) { } else if (isalpha(peek())) {
type = Selector::Component::Type::TagName; type = Selector::SimpleSelector::Type::TagName;
} else { } else {
type = Selector::Component::Type::Universal; type = Selector::SimpleSelector::Type::Universal;
} }
if (type != Selector::Component::Type::Universal) { if (type != Selector::SimpleSelector::Type::Universal) {
while (is_valid_selector_char(peek())) while (is_valid_selector_char(peek()))
buffer.append(consume_one()); buffer.append(consume_one());
PARSE_ASSERT(!buffer.is_null()); PARSE_ASSERT(!buffer.is_null());
} }
Selector::Component component { Selector::SimpleSelector component {
type, type,
Selector::Component::PseudoClass::None, Selector::SimpleSelector::PseudoClass::None,
relation,
String::copy(buffer), String::copy(buffer),
Selector::Component::AttributeMatchType::None, Selector::SimpleSelector::AttributeMatchType::None,
String(), String(),
String() String()
}; };
buffer.clear(); buffer.clear();
if (peek() == '[') { if (peek() == '[') {
Selector::Component::AttributeMatchType attribute_match_type = Selector::Component::AttributeMatchType::HasAttribute; Selector::SimpleSelector::AttributeMatchType attribute_match_type = Selector::SimpleSelector::AttributeMatchType::HasAttribute;
String attribute_name; String attribute_name;
String attribute_value; String attribute_value;
bool in_value = false; bool in_value = false;
@ -277,7 +263,7 @@ public:
while (peek() != expected_end_of_attribute_selector) { while (peek() != expected_end_of_attribute_selector) {
char ch = consume_one(); char ch = consume_one();
if (ch == '=') { if (ch == '=') {
attribute_match_type = Selector::Component::AttributeMatchType::ExactValueMatch; attribute_match_type = Selector::SimpleSelector::AttributeMatchType::ExactValueMatch;
attribute_name = String::copy(buffer); attribute_name = String::copy(buffer);
buffer.clear(); buffer.clear();
in_value = true; in_value = true;
@ -322,32 +308,70 @@ public:
buffer.clear(); buffer.clear();
if (pseudo_name == "link") if (pseudo_name == "link")
component.pseudo_class = Selector::Component::PseudoClass::Link; component.pseudo_class = Selector::SimpleSelector::PseudoClass::Link;
else if (pseudo_name == "hover") else if (pseudo_name == "hover")
component.pseudo_class = Selector::Component::PseudoClass::Hover; component.pseudo_class = Selector::SimpleSelector::PseudoClass::Hover;
} }
return component; return component;
} }
Optional<Selector::ComplexSelector> parse_selector_component_list()
{
auto relation = Selector::ComplexSelector::Relation::Descendant;
if (peek() == '{' || peek() == ',')
return {};
if (is_combinator(peek())) {
switch (peek()) {
case '>':
relation = Selector::ComplexSelector::Relation::ImmediateChild;
break;
case '+':
relation = Selector::ComplexSelector::Relation::AdjacentSibling;
break;
case '~':
relation = Selector::ComplexSelector::Relation::GeneralSibling;
break;
}
consume_one();
consume_whitespace_or_comments();
}
consume_whitespace_or_comments();
Vector<Selector::SimpleSelector> components;
for (;;) {
dbg() << "calling parse_selector_component at index " << index << ", peek=" << peek();
auto component = parse_selector_component();
if (!component.has_value())
break;
components.append(component.value());
PARSE_ASSERT(components.size() < 10);
}
return Selector::ComplexSelector { relation, move(components) };
}
void parse_selector() void parse_selector()
{ {
Vector<Selector::Component> components; Vector<Selector::ComplexSelector> component_lists;
for (;;) { for (;;) {
auto component = parse_selector_component(); auto component_list = parse_selector_component_list();
if (component.has_value()) if (component_list.has_value())
components.append(component.value()); component_lists.append(component_list.value());
consume_whitespace_or_comments(); consume_whitespace_or_comments();
if (peek() == ',' || peek() == '{') if (peek() == ',' || peek() == '{')
break; break;
} }
if (components.is_empty()) if (component_lists.is_empty())
return; return;
components.first().relation = Selector::Component::Relation::None; component_lists.first().relation = Selector::ComplexSelector::Relation::None;
current_rule.selectors.append(Selector(move(components))); current_rule.selectors.append(Selector(move(component_lists)));
}; };
void parse_selector_list() void parse_selector_list()