RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-25 22:17:45 +00:00
Code Issues Activity Actions

LibWeb: Match styles for pseudo-elements

Browse source 
Since each selector can only have zero or one pseudo-element, we match
against it as a separate step, before matching the rest of the
selector. This should be faster, but mostly I did this because I could
not figure out how else to stop selectors without a pseudo-element from
matching the pseudo-element, eg so `.foo` styles don't affect
`.foo::before`.
This commit is contained in:
Sam Atkins 2022-02-24 15:54:12 +00:00 • committed by Andreas Kling
parent caef4ec157
commit 7eb7396f8b
6 changed files with 86 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Userland/Libraries/LibWeb/CSS/Selector.cpp
View file

@ -1,5 +1,6 @@
/* /*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org> * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
* *
* SPDX-License-Identifier: BSD-2-Clause * SPDX-License-Identifier: BSD-2-Clause
*/ */
@ -18,6 +19,19 @@ Selector::~Selector()
{ {
} }
Optional<Selector::PseudoElement> Selector::pseudo_element() const
{
// Note: This assumes that only one pseudo-element is allowed in a selector, and that it appears at the end.
// This is true currently, and there are no current proposals to change this, but you never know!
if (compound_selectors().is_empty())
return {};
for (auto const& simple_selector : compound_selectors().last().simple_selectors) {
if (simple_selector.type == SimpleSelector::Type::PseudoElement)
return simple_selector.pseudo_element;
}
return {};
}
u32 Selector::specificity() const u32 Selector::specificity() const
{ {
if (m_specificity.has_value()) if (m_specificity.has_value())

4
Userland/Libraries/LibWeb/CSS/Selector.h
View file

@ -1,6 +1,6 @@
/* /*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org> * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org> * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
* *
* SPDX-License-Identifier: BSD-2-Clause * SPDX-License-Identifier: BSD-2-Clause
*/ */
@ -131,7 +131,7 @@ public:
~Selector(); ~Selector();
Vector<CompoundSelector> const& compound_selectors() const { return m_compound_selectors; } Vector<CompoundSelector> const& compound_selectors() const { return m_compound_selectors; }
Optional<PseudoElement> pseudo_element() const;
u32 specificity() const; u32 specificity() const;
String serialize() const; String serialize() const;

10
Userland/Libraries/LibWeb/CSS/SelectorEngine.cpp
View file

@ -192,8 +192,8 @@ static inline bool matches(CSS::Selector::SimpleSelector const& component, DOM::
case CSS::Selector::SimpleSelector::Type::PseudoClass: case CSS::Selector::SimpleSelector::Type::PseudoClass:
return matches_pseudo_class(component.pseudo_class, element); return matches_pseudo_class(component.pseudo_class, element);
case CSS::Selector::SimpleSelector::Type::PseudoElement: case CSS::Selector::SimpleSelector::Type::PseudoElement:
// FIXME: Implement pseudo-elements. // Pseudo-element matching/not-matching is handled in the top level matches().
return false; return true;
default: default:
VERIFY_NOT_REACHED(); VERIFY_NOT_REACHED();
} }
@ -241,9 +241,13 @@ static inline bool matches(CSS::Selector const& selector, int component_list_ind
VERIFY_NOT_REACHED(); VERIFY_NOT_REACHED();
} }
bool matches(CSS::Selector const& selector, DOM::Element const& element) bool matches(CSS::Selector const& selector, DOM::Element const& element, Optional<CSS::Selector::PseudoElement> pseudo_element)
{ {
VERIFY(!selector.compound_selectors().is_empty()); VERIFY(!selector.compound_selectors().is_empty());
if (pseudo_element.has_value() && selector.pseudo_element() != pseudo_element)
return false;
if (!pseudo_element.has_value() && selector.pseudo_element().has_value())
return false;
return matches(selector, selector.compound_selectors().size() - 1, element); return matches(selector, selector.compound_selectors().size() - 1, element);
} }

2
Userland/Libraries/LibWeb/CSS/SelectorEngine.h
View file

@ -11,6 +11,6 @@
namespace Web::SelectorEngine { namespace Web::SelectorEngine {
bool matches(CSS::Selector const&, DOM::Element const&); bool matches(CSS::Selector const&, DOM::Element const&, Optional<CSS::Selector::PseudoElement> = {});
} }

87
Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
View file

@ -1,7 +1,7 @@
/* /*
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org> * Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
* Copyright (c) 2021, the SerenityOS developers. * Copyright (c) 2021, the SerenityOS developers.
* Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org> * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
* *
* SPDX-License-Identifier: BSD-2-Clause * SPDX-License-Identifier: BSD-2-Clause
*/ */
@ -70,9 +70,10 @@ void StyleComputer::for_each_stylesheet(CascadeOrigin cascade_origin, Callback c
} }
} }
Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& element, CascadeOrigin cascade_origin) const Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& element, CascadeOrigin cascade_origin, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{ {
if (cascade_origin == CascadeOrigin::Author) { if (cascade_origin == CascadeOrigin::Author) {
// FIXME: Cache pseudo-element rules and look at only those if pseudo_element is set.
Vector<MatchingRule> rules_to_run; Vector<MatchingRule> rules_to_run;
for (auto const& class_name : element.class_names()) { for (auto const& class_name : element.class_names()) {
if (auto it = m_rule_cache->rules_by_class.find(class_name); it != m_rule_cache->rules_by_class.end()) if (auto it = m_rule_cache->rules_by_class.find(class_name); it != m_rule_cache->rules_by_class.end())
@ -89,7 +90,7 @@ Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& e
Vector<MatchingRule> matching_rules; Vector<MatchingRule> matching_rules;
for (auto const& rule_to_run : rules_to_run) { for (auto const& rule_to_run : rules_to_run) {
auto const& selector = rule_to_run.rule->selectors()[rule_to_run.selector_index]; auto const& selector = rule_to_run.rule->selectors()[rule_to_run.selector_index];
if (SelectorEngine::matches(selector, element)) if (SelectorEngine::matches(selector, element, pseudo_element))
matching_rules.append(rule_to_run); matching_rules.append(rule_to_run);
} }
return matching_rules; return matching_rules;
@ -102,7 +103,7 @@ Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& e
static_cast<CSSStyleSheet const&>(sheet).for_each_effective_style_rule([&](auto const& rule) { static_cast<CSSStyleSheet const&>(sheet).for_each_effective_style_rule([&](auto const& rule) {
size_t selector_index = 0; size_t selector_index = 0;
for (auto& selector : rule.selectors()) { for (auto& selector : rule.selectors()) {
if (SelectorEngine::matches(selector, element)) { if (SelectorEngine::matches(selector, element, pseudo_element)) {
matching_rules.append({ rule, style_sheet_index, rule_index, selector_index, selector.specificity() }); matching_rules.append({ rule, style_sheet_index, rule_index, selector_index, selector.specificity() });
break; break;
} }
@ -593,13 +594,13 @@ static HashMap<String, StyleProperty const*> cascade_custom_properties(DOM::Elem
} }
// https://www.w3.org/TR/css-cascade/#cascading // https://www.w3.org/TR/css-cascade/#cascading
void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element) const void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{ {
// First, we collect all the CSS rules whose selectors match `element`: // First, we collect all the CSS rules whose selectors match `element`:
MatchingRuleSet matching_rule_set; MatchingRuleSet matching_rule_set;
matching_rule_set.user_agent_rules = collect_matching_rules(element, CascadeOrigin::UserAgent); matching_rule_set.user_agent_rules = collect_matching_rules(element, CascadeOrigin::UserAgent, pseudo_element);
sort_matching_rules(matching_rule_set.user_agent_rules); sort_matching_rules(matching_rule_set.user_agent_rules);
matching_rule_set.author_rules = collect_matching_rules(element, CascadeOrigin::Author); matching_rule_set.author_rules = collect_matching_rules(element, CascadeOrigin::Author, pseudo_element);
sort_matching_rules(matching_rule_set.author_rules); sort_matching_rules(matching_rule_set.author_rules);
// Then we resolve all the CSS custom properties ("variables") for this element: // Then we resolve all the CSS custom properties ("variables") for this element:
@ -631,21 +632,35 @@ void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element
// FIXME: Transition declarations [css-transitions-1] // FIXME: Transition declarations [css-transitions-1]
} }
static NonnullRefPtr<StyleValue> get_inherit_value(CSS::PropertyID property_id, DOM::Element const* element) static DOM::Element const* get_parent_element(DOM::Element const* element, Optional<CSS::Selector::PseudoElement> pseudo_element)
{ {
if (!element || !element->parent_element() || !element->parent_element()->specified_css_values()) // Pseudo-elements treat their originating element as their parent.
DOM::Element const* parent_element = nullptr;
if (pseudo_element.has_value()) {
parent_element = element;
} else if (element) {
parent_element = element->parent_element();
}
return parent_element;
}
static NonnullRefPtr<StyleValue> get_inherit_value(CSS::PropertyID property_id, DOM::Element const* element, Optional<CSS::Selector::PseudoElement> pseudo_element)
{
auto* parent_element = get_parent_element(element, pseudo_element);
if (!parent_element || !parent_element->specified_css_values())
return property_initial_value(property_id); return property_initial_value(property_id);
return element->parent_element()->specified_css_values()->property(property_id).release_value(); return parent_element->specified_css_values()->property(property_id).release_value();
}; };
void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM::Element const* element, CSS::PropertyID property_id) const void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM::Element const* element, CSS::PropertyID property_id, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{ {
// FIXME: If we don't know the correct initial value for a property, we fall back to InitialStyleValue. // FIXME: If we don't know the correct initial value for a property, we fall back to InitialStyleValue.
auto& value_slot = style.m_property_values[to_underlying(property_id)]; auto& value_slot = style.m_property_values[to_underlying(property_id)];
if (!value_slot) { if (!value_slot) {
if (is_inherited_property(property_id)) if (is_inherited_property(property_id))
style.m_property_values[to_underlying(property_id)] = get_inherit_value(property_id, element); style.m_property_values[to_underlying(property_id)] = get_inherit_value(property_id, element, pseudo_element);
else else
style.m_property_values[to_underlying(property_id)] = property_initial_value(property_id); style.m_property_values[to_underlying(property_id)] = property_initial_value(property_id);
return; return;
@ -657,31 +672,33 @@ void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM
} }
if (value_slot->is_inherit()) { if (value_slot->is_inherit()) {
value_slot = get_inherit_value(property_id, element); value_slot = get_inherit_value(property_id, element, pseudo_element);
return; return;
} }
} }
// https://www.w3.org/TR/css-cascade/#defaulting // https://www.w3.org/TR/css-cascade/#defaulting
void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Element const* element) const void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{ {
// Walk the list of all known CSS properties and: // Walk the list of all known CSS properties and:
// - Add them to `style` if they are missing. // - Add them to `style` if they are missing.
// - Resolve `inherit` and `initial` as needed. // - Resolve `inherit` and `initial` as needed.
for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) { for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
auto property_id = (CSS::PropertyID)i; auto property_id = (CSS::PropertyID)i;
compute_defaulted_property_value(style, element, property_id); compute_defaulted_property_value(style, element, property_id, pseudo_element);
} }
} }
void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* element) const void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{ {
// To compute the font, first ensure that we've defaulted the relevant CSS font properties. // To compute the font, first ensure that we've defaulted the relevant CSS font properties.
// FIXME: This should be more sophisticated. // FIXME: This should be more sophisticated.
compute_defaulted_property_value(style, element, CSS::PropertyID::FontFamily); compute_defaulted_property_value(style, element, CSS::PropertyID::FontFamily, pseudo_element);
compute_defaulted_property_value(style, element, CSS::PropertyID::FontSize); compute_defaulted_property_value(style, element, CSS::PropertyID::FontSize, pseudo_element);
compute_defaulted_property_value(style, element, CSS::PropertyID::FontStyle); compute_defaulted_property_value(style, element, CSS::PropertyID::FontStyle, pseudo_element);
compute_defaulted_property_value(style, element, CSS::PropertyID::FontWeight); compute_defaulted_property_value(style, element, CSS::PropertyID::FontWeight, pseudo_element);
auto* parent_element = get_parent_element(element, pseudo_element);
auto viewport_rect = document().browsing_context()->viewport_rect(); auto viewport_rect = document().browsing_context()->viewport_rect();
@ -755,8 +772,8 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
float root_font_size = 10; float root_font_size = 10;
Gfx::FontMetrics font_metrics; Gfx::FontMetrics font_metrics;
if (element && element->parent_element() && element->parent_element()->specified_css_values()) if (parent_element && parent_element->specified_css_values())
font_metrics = element->parent_element()->specified_css_values()->computed_font().metrics('M'); font_metrics = parent_element->specified_css_values()->computed_font().metrics('M');
else else
font_metrics = Gfx::FontDatabase::default_font().metrics('M'); font_metrics = Gfx::FontDatabase::default_font().metrics('M');
@ -765,8 +782,8 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
// Percentages refer to parent element's font size // Percentages refer to parent element's font size
auto percentage = font_size->as_percentage().percentage(); auto percentage = font_size->as_percentage().percentage();
auto parent_font_size = size; auto parent_font_size = size;
if (element && element->parent_element() && element->parent_element()->layout_node() && element->parent_element()->specified_css_values()) { if (parent_element && parent_element->layout_node() && parent_element->specified_css_values()) {
auto value = element->parent_element()->specified_css_values()->property(CSS::PropertyID::FontSize).value(); auto value = parent_element->specified_css_values()->property(CSS::PropertyID::FontSize).value();
if (value->is_length()) { if (value->is_length()) {
auto length = static_cast<LengthStyleValue const&>(*value).to_length(); auto length = static_cast<LengthStyleValue const&>(*value).to_length();
if (length.is_absolute() || length.is_relative()) if (length.is_absolute() || length.is_relative())
@ -880,7 +897,7 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
style.set_computed_font(found_font.release_nonnull()); style.set_computed_font(found_font.release_nonnull());
} }
void StyleComputer::absolutize_values(StyleProperties& style, DOM::Element const*) const void StyleComputer::absolutize_values(StyleProperties& style, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const
{ {
auto viewport_rect = document().browsing_context()->viewport_rect(); auto viewport_rect = document().browsing_context()->viewport_rect();
auto font_metrics = style.computed_font().metrics('M'); auto font_metrics = style.computed_font().metrics('M');
@ -903,7 +920,7 @@ void StyleComputer::absolutize_values(StyleProperties& style, DOM::Element const
} }
// https://drafts.csswg.org/css-display/#transformations // https://drafts.csswg.org/css-display/#transformations
void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::Element const&) const void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::Element const&, Optional<CSS::Selector::PseudoElement>) const
{ {
// 2.7. Automatic Box Type Transformations // 2.7. Automatic Box Type Transformations
@ -940,9 +957,9 @@ void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::El
NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
{ {
auto style = StyleProperties::create(); auto style = StyleProperties::create();
compute_font(style, nullptr); compute_font(style, nullptr, {});
compute_defaulted_values(style, nullptr); compute_defaulted_values(style, nullptr, {});
absolutize_values(style, nullptr); absolutize_values(style, nullptr, {});
if (auto* browsing_context = m_document.browsing_context()) { if (auto* browsing_context = m_document.browsing_context()) {
auto viewport_rect = browsing_context->viewport_rect(); auto viewport_rect = browsing_context->viewport_rect();
style->set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect.width()))); style->set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect.width())));
@ -951,25 +968,25 @@ NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
return style; return style;
} }
NonnullRefPtr<StyleProperties> StyleComputer::compute_style(DOM::Element& element) const NonnullRefPtr<StyleProperties> StyleComputer::compute_style(DOM::Element& element, Optional<CSS::Selector::PseudoElement> pseudo_element) const
{ {
build_rule_cache_if_needed(); build_rule_cache_if_needed();
auto style = StyleProperties::create(); auto style = StyleProperties::create();
// 1. Perform the cascade. This produces the "specified style" // 1. Perform the cascade. This produces the "specified style"
compute_cascaded_values(style, element); compute_cascaded_values(style, element, pseudo_element);
// 2. Compute the font, since that may be needed for font-relative CSS units // 2. Compute the font, since that may be needed for font-relative CSS units
compute_font(style, &element); compute_font(style, &element, pseudo_element);
// 3. Absolutize values, turning font/viewport relative lengths into absolute lengths // 3. Absolutize values, turning font/viewport relative lengths into absolute lengths
absolutize_values(style, &element); absolutize_values(style, &element, pseudo_element);
// 4. Default the values, applying inheritance and 'initial' as needed // 4. Default the values, applying inheritance and 'initial' as needed
compute_defaulted_values(style, &element); compute_defaulted_values(style, &element, pseudo_element);
// 5. Run automatic box type transformations // 5. Run automatic box type transformations
transform_box_type_if_needed(style, element); transform_box_type_if_needed(style, element, pseudo_element);
return style; return style;
} }

18
Userland/Libraries/LibWeb/CSS/StyleComputer.h
View file

@ -9,9 +9,11 @@
#include <AK/HashMap.h> #include <AK/HashMap.h>
#include <AK/NonnullRefPtrVector.h> #include <AK/NonnullRefPtrVector.h>
#include <AK/Optional.h>
#include <AK/OwnPtr.h> #include <AK/OwnPtr.h>
#include <LibWeb/CSS/CSSStyleDeclaration.h> #include <LibWeb/CSS/CSSStyleDeclaration.h>
#include <LibWeb/CSS/Parser/StyleComponentValueRule.h> #include <LibWeb/CSS/Parser/StyleComponentValueRule.h>
#include <LibWeb/CSS/Selector.h>
#include <LibWeb/CSS/StyleProperties.h> #include <LibWeb/CSS/StyleProperties.h>
#include <LibWeb/Forward.h> #include <LibWeb/Forward.h>
@ -52,7 +54,7 @@ public:
DOM::Document const& document() const { return m_document; } DOM::Document const& document() const { return m_document; }
NonnullRefPtr<StyleProperties> create_document_style() const; NonnullRefPtr<StyleProperties> create_document_style() const;
NonnullRefPtr<StyleProperties> compute_style(DOM::Element&) const; NonnullRefPtr<StyleProperties> compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement> = {}) const;
// https://www.w3.org/TR/css-cascade/#origin // https://www.w3.org/TR/css-cascade/#origin
enum class CascadeOrigin { enum class CascadeOrigin {
@ -63,18 +65,18 @@ public:
Transition, Transition,
}; };
Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin) const; Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin, Optional<CSS::Selector::PseudoElement>) const;
void invalidate_rule_cache(); void invalidate_rule_cache();
private: private:
void compute_cascaded_values(StyleProperties&, DOM::Element&) const; void compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>) const;
void compute_font(StyleProperties&, DOM::Element const*) const; void compute_font(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
void compute_defaulted_values(StyleProperties&, DOM::Element const*) const; void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
void absolutize_values(StyleProperties&, DOM::Element const*) const; void absolutize_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
void transform_box_type_if_needed(StyleProperties&, DOM::Element const&) const; void transform_box_type_if_needed(StyleProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement>) const;
void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID) const; void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement>) const;
RefPtr<StyleValue> resolve_unresolved_style_value(DOM::Element&, PropertyID, UnresolvedStyleValue const&, HashMap<String, StyleProperty const*> const&) const; RefPtr<StyleValue> resolve_unresolved_style_value(DOM::Element&, PropertyID, UnresolvedStyleValue const&, HashMap<String, StyleProperty const*> const&) const;
bool expand_unresolved_values(DOM::Element&, StringView property_name, HashMap<String, NonnullRefPtr<PropertyDependencyNode>>& dependencies, Vector<StyleComponentValueRule> const& source, Vector<StyleComponentValueRule>& dest, size_t source_start_index, HashMap<String, StyleProperty const*> const& custom_properties) const; bool expand_unresolved_values(DOM::Element&, StringView property_name, HashMap<String, NonnullRefPtr<PropertyDependencyNode>>& dependencies, Vector<StyleComponentValueRule> const& source, Vector<StyleComponentValueRule>& dest, size_t source_start_index, HashMap<String, StyleProperty const*> const& custom_properties) const;