LibWeb: Match styles for pseudo-elements
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
Andreas Kling
parent
caef4ec157
commit
7eb7396f8b
Notes:
sideshowbarker
2024-07-17 18:17:54 +09:00
Author: https://github.com/AtkinsSJ Commit: https://github.com/SerenityOS/serenity/commit/7eb7396f8b Pull-request: https://github.com/SerenityOS/serenity/pull/12753
6 changed files with 86 additions and 49 deletions
|
|
@ -1,5 +1,6 @@
|
|||
/*
|
||||
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
|
||||
* Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
|
||||
*
|
||||
* 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
|
||||
{
|
||||
if (m_specificity.has_value())
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*
|
||||
* 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
|
||||
*/
|
||||
|
|
@ -131,7 +131,7 @@ public:
|
|||
~Selector();
|
||||
|
||||
Vector<CompoundSelector> const& compound_selectors() const { return m_compound_selectors; }
|
||||
|
||||
Optional<PseudoElement> pseudo_element() const;
|
||||
u32 specificity() const;
|
||||
String serialize() const;
|
||||
|
||||
|
|
|
|||
|
|
@ -192,8 +192,8 @@ static inline bool matches(CSS::Selector::SimpleSelector const& component, DOM::
|
|||
case CSS::Selector::SimpleSelector::Type::PseudoClass:
|
||||
return matches_pseudo_class(component.pseudo_class, element);
|
||||
case CSS::Selector::SimpleSelector::Type::PseudoElement:
|
||||
// FIXME: Implement pseudo-elements.
|
||||
return false;
|
||||
// Pseudo-element matching/not-matching is handled in the top level matches().
|
||||
return true;
|
||||
default:
|
||||
VERIFY_NOT_REACHED();
|
||||
}
|
||||
|
|
@ -241,9 +241,13 @@ static inline bool matches(CSS::Selector const& selector, int component_list_ind
|
|||
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());
|
||||
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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,6 @@
|
|||
|
||||
namespace Web::SelectorEngine {
|
||||
|
||||
bool matches(CSS::Selector const&, DOM::Element const&);
|
||||
bool matches(CSS::Selector const&, DOM::Element const&, Optional<CSS::Selector::PseudoElement> = {});
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/*
|
||||
* Copyright (c) 2018-2022, Andreas Kling <kling@serenityos.org>
|
||||
* 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
|
||||
*/
|
||||
|
|
@ -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) {
|
||||
// FIXME: Cache pseudo-element rules and look at only those if pseudo_element is set.
|
||||
Vector<MatchingRule> rules_to_run;
|
||||
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())
|
||||
|
|
@ -89,7 +90,7 @@ Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& e
|
|||
Vector<MatchingRule> matching_rules;
|
||||
for (auto const& rule_to_run : rules_to_run) {
|
||||
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);
|
||||
}
|
||||
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) {
|
||||
size_t selector_index = 0;
|
||||
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() });
|
||||
break;
|
||||
}
|
||||
|
|
@ -593,13 +594,13 @@ static HashMap<String, StyleProperty const*> cascade_custom_properties(DOM::Elem
|
|||
}
|
||||
|
||||
// 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`:
|
||||
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);
|
||||
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);
|
||||
|
||||
// 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]
|
||||
}
|
||||
|
||||
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 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.
|
||||
|
||||
auto& value_slot = style.m_property_values[to_underlying(property_id)];
|
||||
if (!value_slot) {
|
||||
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
|
||||
style.m_property_values[to_underlying(property_id)] = property_initial_value(property_id);
|
||||
return;
|
||||
|
|
@ -657,31 +672,33 @@ void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM
|
|||
}
|
||||
|
||||
if (value_slot->is_inherit()) {
|
||||
value_slot = get_inherit_value(property_id, element);
|
||||
value_slot = get_inherit_value(property_id, element, pseudo_element);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 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:
|
||||
// - Add them to `style` if they are missing.
|
||||
// - 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) {
|
||||
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.
|
||||
// FIXME: This should be more sophisticated.
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontFamily);
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontSize);
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontStyle);
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontWeight);
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontFamily, pseudo_element);
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontSize, pseudo_element);
|
||||
compute_defaulted_property_value(style, element, CSS::PropertyID::FontStyle, pseudo_element);
|
||||
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();
|
||||
|
||||
|
|
@ -755,8 +772,8 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
|
|||
float root_font_size = 10;
|
||||
|
||||
Gfx::FontMetrics font_metrics;
|
||||
if (element && element->parent_element() && element->parent_element()->specified_css_values())
|
||||
font_metrics = element->parent_element()->specified_css_values()->computed_font().metrics('M');
|
||||
if (parent_element && parent_element->specified_css_values())
|
||||
font_metrics = parent_element->specified_css_values()->computed_font().metrics('M');
|
||||
else
|
||||
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
|
||||
auto percentage = font_size->as_percentage().percentage();
|
||||
auto parent_font_size = size;
|
||||
if (element && element->parent_element() && element->parent_element()->layout_node() && element->parent_element()->specified_css_values()) {
|
||||
auto value = element->parent_element()->specified_css_values()->property(CSS::PropertyID::FontSize).value();
|
||||
if (parent_element && parent_element->layout_node() && parent_element->specified_css_values()) {
|
||||
auto value = parent_element->specified_css_values()->property(CSS::PropertyID::FontSize).value();
|
||||
if (value->is_length()) {
|
||||
auto length = static_cast<LengthStyleValue const&>(*value).to_length();
|
||||
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());
|
||||
}
|
||||
|
||||
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 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
|
||||
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
|
||||
|
||||
|
|
@ -940,9 +957,9 @@ void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::El
|
|||
NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
|
||||
{
|
||||
auto style = StyleProperties::create();
|
||||
compute_font(style, nullptr);
|
||||
compute_defaulted_values(style, nullptr);
|
||||
absolutize_values(style, nullptr);
|
||||
compute_font(style, nullptr, {});
|
||||
compute_defaulted_values(style, nullptr, {});
|
||||
absolutize_values(style, nullptr, {});
|
||||
if (auto* browsing_context = m_document.browsing_context()) {
|
||||
auto viewport_rect = browsing_context->viewport_rect();
|
||||
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;
|
||||
}
|
||||
|
||||
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();
|
||||
|
||||
auto style = StyleProperties::create();
|
||||
// 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
|
||||
compute_font(style, &element);
|
||||
compute_font(style, &element, pseudo_element);
|
||||
|
||||
// 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
|
||||
compute_defaulted_values(style, &element);
|
||||
compute_defaulted_values(style, &element, pseudo_element);
|
||||
|
||||
// 5. Run automatic box type transformations
|
||||
transform_box_type_if_needed(style, element);
|
||||
transform_box_type_if_needed(style, element, pseudo_element);
|
||||
|
||||
return style;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@
|
|||
|
||||
#include <AK/HashMap.h>
|
||||
#include <AK/NonnullRefPtrVector.h>
|
||||
#include <AK/Optional.h>
|
||||
#include <AK/OwnPtr.h>
|
||||
#include <LibWeb/CSS/CSSStyleDeclaration.h>
|
||||
#include <LibWeb/CSS/Parser/StyleComponentValueRule.h>
|
||||
#include <LibWeb/CSS/Selector.h>
|
||||
#include <LibWeb/CSS/StyleProperties.h>
|
||||
#include <LibWeb/Forward.h>
|
||||
|
||||
|
|
@ -52,7 +54,7 @@ public:
|
|||
DOM::Document const& document() const { return m_document; }
|
||||
|
||||
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
|
||||
enum class CascadeOrigin {
|
||||
|
|
@ -63,18 +65,18 @@ public:
|
|||
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();
|
||||
|
||||
private:
|
||||
void compute_cascaded_values(StyleProperties&, DOM::Element&) const;
|
||||
void compute_font(StyleProperties&, DOM::Element const*) const;
|
||||
void compute_defaulted_values(StyleProperties&, DOM::Element const*) const;
|
||||
void absolutize_values(StyleProperties&, DOM::Element const*) const;
|
||||
void transform_box_type_if_needed(StyleProperties&, DOM::Element const&) const;
|
||||
void compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>) const;
|
||||
void compute_font(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
|
||||
void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
|
||||
void absolutize_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) 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;
|
||||
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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue