1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-27 00:27:45 +00:00

LibWeb: Start implementing the CSS cascade

The 'C' in "CSS" is for Cascade, so let's actually implement the cascade
in LibWeb. :^)

StyleResolver::resolve_style() now begins by collecting all the matching
CSS rules for the given DOM::Element. Rules are then processed in the
spec's cascade order (instead of in the order we encounter them.)

With this, "!important" is now honored on CSS properties.

After performing the cascade, we do another pass of what the spec calls
"defaulting" where we resolve "inherit" and "initial" values.
I've left a FIXME about supporting correct "initial" values for every
property, since we're currently lacking some coverage there.

Note that this mechanism now resolves every known CSS property. This is
*not* space-efficient and we'll eventually need to come up with some
strategies to reduce memory usage around this. However, this will do
fine until we have more of the engine working correctly. :^)
This commit is contained in:
Andreas Kling 2021-09-21 11:38:18 +02:00
parent c55909f175
commit d965a9552f
4 changed files with 150 additions and 77 deletions

View file

@ -32,7 +32,17 @@ public:
NonnullRefPtr<StyleProperties> resolve_style(DOM::Element&) const;
Vector<MatchingRule> collect_matching_rules(DOM::Element const&) const;
// https://www.w3.org/TR/css-cascade/#origin
enum class CascadeOrigin {
Any, // FIXME: This is not part of the spec. Get rid of it.
Author,
User,
UserAgent,
Animation,
Transition,
};
Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin = CascadeOrigin::Any) const;
void sort_matching_rules(Vector<MatchingRule>&) const;
struct CustomPropertyResolutionTuple {
Optional<StyleProperty> style {};
@ -42,8 +52,18 @@ public:
Optional<StyleProperty> resolve_custom_property(DOM::Element&, String const&) const;
private:
void compute_cascaded_values(StyleProperties&, DOM::Element&) const;
void compute_defaulted_values(StyleProperties&, DOM::Element const&) const;
template<typename Callback>
void for_each_stylesheet(Callback) const;
void for_each_stylesheet(CascadeOrigin, Callback) const;
struct MatchingRuleSet {
Vector<MatchingRule> user_agent_rules;
Vector<MatchingRule> author_rules;
};
void cascade_declarations(StyleProperties&, DOM::Element&, Vector<MatchingRule> const&, CascadeOrigin, bool important) const;
DOM::Document& m_document;
};