beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-29 02:50:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6
ladybird/Libraries/LibWeb/CSS/StyleComputer.h

292 lines
12 KiB
C
Raw Normal View History

Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 08:38:21 +00:00
/*
Meta: Update my e-mail address everywhere
2024-10-04 11:19:50 +00:00
* Copyright (c) 2018-2024, Andreas Kling <andreas@ladybird.org>
LibWeb: Add Document::get_style_sheet_source() This returns the source text of the specified style sheet. StyleComputer now exposes user agent style sheets so that these can also be requested.
2024-08-23 10:03:05 +00:00
* Copyright (c) 2021-2024, Sam Atkins <sam@ladybird.org>
Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 08:38:21 +00:00
*
Everything: Move to SPDX license identifiers in all files. SPDX License Identifiers are a more compact / standardized way of representing file license information. See: https://spdx.dev/resources/use/#identifiers This was done with the `ambr` search and replace tool. ambr --no-parent-ignore --key-from-file --rep-from-file key.txt rep.txt *
2021-04-22 08:24:48 +00:00
* SPDX-License-Identifier: BSD-2-Clause
Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 08:38:21 +00:00
*/
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
#pragma once
LibWeb: Handle dependency cycles in CSS var()s :^) We now detect situations like this, where variables infinitely recur, without crashing: ```css div { --a: var(--b); --b: var(--a); background: var(--a); } p { --foo: var(--foo); background: var(--foo); } ```
2021-12-03 20:00:31 +00:00
#include <AK/HashMap.h>
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`.
2022-02-24 15:54:12 +00:00
#include <AK/Optional.h>
LibHTML: Get rid of the style tree We now create a layout tree directly from the DOM tree. This way we don't actually lose text nodes ^)
2019-09-21 12:32:17 +00:00
#include <AK/OwnPtr.h>
LibGfx+LibWeb: Rename Gfx::VectorFont to Gfx::Typeface Typeface is a more widely used name for the data represented by class previously named VectorFont. Now: - Typeface represents decoded font that is not ready for rendering - ScaledFont represents the combination of typeface and size for rendering
2024-06-28 18:27:00 +00:00
#include <LibGfx/Font/Typeface.h>
LibWeb: Transition StyleComputer to Web Animations With this commit, we are finally running animations off of the web animations spec! A lot of the work StyleComputer is doing is now done elsewhere. For example, fill-forward animations are handled by Animation::is_relevant() returning true in the after phase, meaning the "active_state_if_fill_forward" map is no longer needed.
2024-02-22 13:56:15 +00:00
#include <LibWeb/Animations/KeyframeEffect.h>
LibWeb: Load and use fonts described by @font-face rules :^) When encountering a @font-face rule, StyleComputer will now fire off a resource request and download the first source URL specified. Once downloaded, we try to parse it as a TrueType font file, and if it works, it's added to a cache in StyleComputer. This effectively makes fonts per-document since every document has its own StyleComputer. This is very unoptimized and could definitely use some caching, etc. But it does work on Acid3. :^)
2022-03-29 00:14:20 +00:00
#include <LibWeb/CSS/CSSFontFaceRule.h>
LibWeb: Add preliminary support for CSS animations This partially implements CSS-Animations-1 (though there are references to CSS-Animations-2). Current limitations: - Multi-selector keyframes are not supported. - Most animation properties are ignored. - Timing functions are not applied. - Non-absolute values are not interpolated unless the target is also of the same non-absolute type (e.g. 10% -> 25%, but not 10% -> 20px). - The JavaScript interface is left as an exercise for the next poor soul looking at this code. With those said, this commit implements: - Interpolation for most common types - Proper keyframe resolution (including the synthetic from-keyframe containing the initial state) - Properly driven animations, and proper style invalidation Co-Authored-By: Andreas Kling <kling@serenityos.org>
2023-05-26 20:00:54 +00:00
#include <LibWeb/CSS/CSSKeyframesRule.h>
LibWeb: Resolve custom properties The way to get the custom properties is pretty weird and this code is as far from optimized as it gets but somehow it works :^)
2021-05-24 21:02:58 +00:00
#include <LibWeb/CSS/CSSStyleDeclaration.h>
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`.
2022-02-24 15:54:12 +00:00
#include <LibWeb/CSS/Selector.h>
LibWeb: Rename directory LibHTML => LibWeb Let's rename this to LibWeb since it aims to provide more parts of the web platform than just HTML. :^)
2020-03-07 09:32:51 +00:00
#include <LibWeb/CSS/StyleProperties.h>
LibWeb: Move DOM classes into the Web::DOM namespace LibWeb keeps growing and the Web namespace is filling up fast. Let's put DOM stuff into Web::DOM, just like we already started doing with SVG stuff in Web::SVG.
2020-07-26 17:37:56 +00:00
#include <LibWeb/Forward.h>
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
#include <LibWeb/Loader/ResourceLoader.h>
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
LibWeb: Move CSS classes into the Web::CSS namespace
2020-07-26 18:01:35 +00:00
namespace Web::CSS {
LibWeb: Move everything into the Web namespace
2020-03-07 09:27:02 +00:00
LibWeb: Use an ancestor filter to quickly reject many CSS selectors Given a selector like `.foo .bar #baz`, we know that elements with the class names `foo` and `bar` must be present in the ancestor chain of the candidate element, or the selector cannot match. By keeping track of the current ancestor chain during style computation, and which strings are used in tag names and attribute names, we can do a quick check before evaluating the selector itself, to see if all the required ancestors are present. The way this works: 1. CSS::Selector now has a cache of up to 8 strings that must be present in the ancestor chain of a matching element. Note that we actually store string *hashes*, not the strings themselves. 2. When Document performs a recursive style update, we now push and pop elements to the ancestor chain stack as they are entered and exited. 3. When entering/exiting an ancestor, StyleComputer collects all the relevant string hashes from that ancestor element and updates a counting bloom filter. 4. Before evaluating a selector, we first check if any of the hashes required by the selector are definitely missing from the ancestor filter. If so, it cannot be a match, and we reject it immediately. 5. Otherwise, we carry on and evaluate the selector as usual. I originally tried doing this with a HashMap, but we ended up losing a huge chunk of the time saved to HashMap instead. As it turns out, a simple counting bloom filter is way better at handling this. The cost is a flat 8KB per StyleComputer, and since it's a bloom filter, false positives are a thing. This is extremely efficient, and allows us to quickly reject the majority of selectors on many huge websites. Some example rejection rates: - https://amazon.com: 77% - https://github.com/SerenityOS/serenity: 61% - https://nytimes.com: 57% - https://store.steampowered.com: 55% - https://en.wikipedia.org: 45% - https://youtube.com: 32% - https://shopify.com: 25% This also yields a chunky 37% speedup on StyleBench. :^)
2024-03-22 12:50:33 +00:00
// A counting bloom filter with 2 hash functions.
// NOTE: If a counter overflows, it's kept maxed-out until the whole filter is cleared.
template<typename CounterType, size_t key_bits>
class CountingBloomFilter {
public:
CountingBloomFilter() { }
void clear() { __builtin_memset(m_buckets, 0, sizeof(m_buckets)); }
void increment(u32 key)
{
auto& first = bucket1(key);
if (first < NumericLimits<CounterType>::max())
++first;
auto& second = bucket2(key);
if (second < NumericLimits<CounterType>::max())
++second;
}
void decrement(u32 key)
{
auto& first = bucket1(key);
if (first < NumericLimits<CounterType>::max())
--first;
auto& second = bucket2(key);
if (second < NumericLimits<CounterType>::max())
--second;
}
[[nodiscard]] bool may_contain(u32 hash) const
{
return bucket1(hash) && bucket2(hash);
}
private:
static constexpr u32 bucket_count = 1 << key_bits;
static constexpr u32 key_mask = bucket_count - 1;
[[nodiscard]] u32 hash1(u32 key) const { return key & key_mask; }
[[nodiscard]] u32 hash2(u32 key) const { return (key >> 16) & key_mask; }
[[nodiscard]] CounterType& bucket1(u32 key) { return m_buckets[hash1(key)]; }
[[nodiscard]] CounterType& bucket2(u32 key) { return m_buckets[hash2(key)]; }
[[nodiscard]] CounterType bucket1(u32 key) const { return m_buckets[hash1(key)]; }
[[nodiscard]] CounterType bucket2(u32 key) const { return m_buckets[hash2(key)]; }
CounterType m_buckets[bucket_count];
};
LibWeb: Apply shadow root style sheets in StyleComputer Now, if an element belongs to a shadow tree, we use only the style sheets from the corresponding shadow root during style computation, instead of using all available style sheets as was the case previously. The only exception is the user agent style sheets, which are still taken into account for all elements. Tests/LibWeb/Layout/input/input-element-with-display-inline.html is affected because style of document no longer affects shadow tree of input element, like it is supposed to be. Co-authored-by: Simon Wanner <simon+git@skyrising.xyz>
2023-03-19 16:01:26 +00:00
// https://www.w3.org/TR/css-cascade/#origin
LibWeb: Reorder MatchingRule members to make it smaller By packing the members more efficiently, it goes from 64 to 56 bytes.
2024-03-18 15:01:47 +00:00
enum class CascadeOrigin : u8 {
LibWeb: Apply shadow root style sheets in StyleComputer Now, if an element belongs to a shadow tree, we use only the style sheets from the corresponding shadow root during style computation, instead of using all available style sheets as was the case previously. The only exception is the user agent style sheets, which are still taken into account for all elements. Tests/LibWeb/Layout/input/input-element-with-display-inline.html is affected because style of document no longer affects shadow tree of input element, like it is supposed to be. Co-authored-by: Simon Wanner <simon+git@skyrising.xyz>
2023-03-19 16:01:26 +00:00
Author,
User,
UserAgent,
Animation,
Transition,
};
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-12 22:44:26 +00:00
struct MatchingRule {
LibGC+Everywhere: Factor out a LibGC from LibJS Resulting in a massive rename across almost everywhere! Alongside the namespace change, we now have the following names: * JS::NonnullGCPtr -> GC::Ref * JS::GCPtr -> GC::Ptr * JS::HeapFunction -> GC::Function * JS::CellImpl -> GC::Cell * JS::Handle -> GC::Root
2024-11-14 15:01:23 +00:00
GC::Ptr<DOM::ShadowRoot const> shadow_root;
GC::Ptr<CSSRule const> rule; // Either CSSStyleRule or CSSNestedDeclarations
GC::Ptr<CSSStyleSheet const> sheet;
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-12 22:44:26 +00:00
size_t style_sheet_index { 0 };
size_t rule_index { 0 };
size_t selector_index { 0 };
LibWeb: Add CSS rule buckets for pseudo elements, and for :root If a selector must match a pseudo element, or must match the root element, we now cache that information in the MatchingRule struct. We also introduce separate buckets for these rules, so we can avoid running them altogether if the current element can't possibly match. This cuts the number of selectors evaluated by 32% when loading our GitHub repo page https://github.com/SerenityOS/serenity
2024-03-13 10:47:25 +00:00
LibWeb: StyleResolver: Keep track of specificity of matched selector This way it gets easier to compare matches.
2021-05-24 21:01:24 +00:00
u32 specificity { 0 };
LibWeb: Reorder MatchingRule members to make it smaller By packing the members more efficiently, it goes from 64 to 56 bytes.
2024-03-18 15:01:47 +00:00
CascadeOrigin cascade_origin;
LibWeb: Make CSS rule cache smarter about pseudo elements Instead of putting every rule that matches a pseudo element in the same bucket, let them go in the best ID/class/tag name bucket instead. Then, add a flag to MatchingRule that says whether it contains a pseudo element in the rightmost compound selector. When deciding which selectors to run for an element, we can now simply filter in/out pseudo element selectors as appropriate depending on what we're trying to match. This fixes an issue where pages using Font Awesome had 1700+ rules in the pseudo-element rule cache. (This meant all those rules had to run against every element twice or more while instantiating pseudo elements.)
2023-03-09 18:27:23 +00:00
bool contains_pseudo_element { false };
LibWeb: Add a fast (iterative) selector matcher for trivial selectors If we determine that a selector is simple enough, we now run it using a special matching loop that traverses up the DOM ancestor chain without recursion. The criteria for this fast path are: - All combinators involved must be either descendant or child. - Only tag name, class, ID and attribute selectors allowed. It's definitely possible to increase the coverage of this fast path, but this first version already provides a substantial reduction in time spent evaluating selectors. 48% of the selectors evaluated when loading our GitHub repo are now using this fast path. 18% speed-up on the "Descendant and child combinators" subtest of StyleBench. :^)
2024-03-19 09:36:08 +00:00
bool can_use_fast_matches { false };
LibWeb: Filter :hover selectors early for elements that aren't hovered Some websites (like vercel.com...) have a *lot* of :hover selectors that we can simply skip for any element that isn't currently hovered.
2024-09-09 13:37:17 +00:00
bool must_be_hovered { false };
LibWeb: Filter rules to run before allocating vector of matches By filtering first, we end up allocating much less vector space most of the time. This is mostly helpful in pathological cases where there's a huge number of rules present, but most of them get rejected early.
2024-09-09 11:44:35 +00:00
bool skip { false };
LibWeb/CSS: Process style properties from CSSNestedDeclarations rules These are created when a style rule has properties listed after another rule. For example: ```css .test { --a: 1; --b: 1; --c: 1; .thing { /* ... */ } /* These are after a rule (.thing) so they're wrapped in a CSSNestedDeclarations: */ --d: 1; --e: 1; --f: 1; } ``` They're treated like a nested style rule with the exact same selectors as their containing style rule.
2024-10-17 12:48:00 +00:00
// Helpers to deal with the fact that `rule` might be a CSSStyleRule or a CSSNestedDeclarations
PropertyOwningCSSStyleDeclaration const& declaration() const;
SelectorList const& absolutized_selectors() const;
FlyString const& qualified_layer_name() const;
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-12 22:44:26 +00:00
};
LibWeb: Honor font-weight and font-style when using downloaded fonts Instead of keying downloaded @font-face fonts on just the family name, we now key them on a tuple of the family name, weight and slope.
2023-05-24 13:35:30 +00:00
struct FontFaceKey {
FlyString family_name;
int weight { 0 };
int slope { 0 };
[[nodiscard]] u32 hash() const { return pair_int_hash(family_name.hash(), pair_int_hash(weight, slope)); }
[[nodiscard]] bool operator==(FontFaceKey const&) const = default;
};
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
class FontLoader;
LibWeb: Rename CSS::StyleResolver => StyleComputer Resolved style is a spec concept that refers to the weird mix of computed style and used style reflected by getComputedStyle(). The purpose of this class is to produce the *computed* style for a given element, so let's call it StyleComputer.
2021-09-24 11:49:57 +00:00
class StyleComputer {
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
public:
LibWeb: Allow ignoring unresolved style values when iterating properties When iterating through a @keyframes rule, it isn't possible to resolve unresolved style properties since there are no elements. This change allows those properties to simply pass through this helper function.
2024-03-18 00:29:31 +00:00
enum class AllowUnresolved {
Yes,
No,
};
LibWeb: Rename StyleValue -> CSSStyleValue This matches the name in the CSS Typed OM spec. https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue No behaviour changes.
2024-08-14 10:10:54 +00:00
static void for_each_property_expanding_shorthands(PropertyID, CSSStyleValue const&, AllowUnresolved, Function<void(PropertyID, CSSStyleValue const&)> const& set_longhand_property);
LibWeb/CSS: Correct behavior of `revert` inside a `@layer` `revert` is supposed to revert to the previous cascade origin, but we previously had it reverting to the previous layer. To support both, track them separately during the cascade. As part of this, we make `set_property_expanding_shorthands()` fall back to `initial` if it can't find a previous value to revert to. Previously we would just shrug and do nothing if that happened, which only works if the value you want to revert to is whatever is currently in `style`. That's no longer the case, because `revert` should skip over any layer styles that have been applied since the previous origin.
2024-09-25 13:22:50 +00:00
static void set_property_expanding_shorthands(StyleProperties&, PropertyID, CSSStyleValue const&, CSS::CSSStyleDeclaration const*, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer, Important = Important::No);
LibWeb: Rename StyleValue -> CSSStyleValue This matches the name in the CSS Typed OM spec. https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue No behaviour changes.
2024-08-14 10:10:54 +00:00
static NonnullRefPtr<CSSStyleValue const> get_inherit_value(JS::Realm& initial_value_context_realm, CSS::PropertyID, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type> = {});
LibWeb: Expose CSS shorthand -> longhand conversion This conversion needs to be done by KeyframEffect as well
2024-02-24 15:36:24 +00:00
LibWeb: Add Document::get_style_sheet_source() This returns the source text of the specified style sheet. StyleComputer now exposes user agent style sheets so that these can also be requested.
2024-08-23 10:03:05 +00:00
static Optional<String> user_agent_style_sheet_source(StringView name);
LibWeb: Rename CSS::StyleResolver => StyleComputer Resolved style is a spec concept that refers to the weird mix of computed style and used style reflected by getComputedStyle(). The purpose of this class is to produce the *computed* style for a given element, so let's call it StyleComputer.
2021-09-24 11:49:57 +00:00
explicit StyleComputer(DOM::Document&);
LibWeb: Load and use fonts described by @font-face rules :^) When encountering a @font-face rule, StyleComputer will now fire off a resource request and download the first source URL specified. Once downloaded, we try to parse it as a TrueType font file, and if it works, it's added to a cache in StyleComputer. This effectively makes fonts per-document since every document has its own StyleComputer. This is very unoptimized and could definitely use some caching, etc. But it does work on Acid3. :^)
2022-03-29 00:14:20 +00:00
~StyleComputer();
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
LibWeb: Move DOM classes into the Web::DOM namespace LibWeb keeps growing and the Web namespace is filling up fast. Let's put DOM stuff into Web::DOM, just like we already started doing with SVG stuff in Web::SVG.
2020-07-26 17:37:56 +00:00
DOM::Document& document() { return m_document; }
LibWeb: Convert StyleResolver.{h,cpp} to east const
2021-07-14 15:56:11 +00:00
DOM::Document const& document() const { return m_document; }
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
LibWeb: Use an ancestor filter to quickly reject many CSS selectors Given a selector like `.foo .bar #baz`, we know that elements with the class names `foo` and `bar` must be present in the ancestor chain of the candidate element, or the selector cannot match. By keeping track of the current ancestor chain during style computation, and which strings are used in tag names and attribute names, we can do a quick check before evaluating the selector itself, to see if all the required ancestors are present. The way this works: 1. CSS::Selector now has a cache of up to 8 strings that must be present in the ancestor chain of a matching element. Note that we actually store string *hashes*, not the strings themselves. 2. When Document performs a recursive style update, we now push and pop elements to the ancestor chain stack as they are entered and exited. 3. When entering/exiting an ancestor, StyleComputer collects all the relevant string hashes from that ancestor element and updates a counting bloom filter. 4. Before evaluating a selector, we first check if any of the hashes required by the selector are definitely missing from the ancestor filter. If so, it cannot be a match, and we reject it immediately. 5. Otherwise, we carry on and evaluate the selector as usual. I originally tried doing this with a HashMap, but we ended up losing a huge chunk of the time saved to HashMap instead. As it turns out, a simple counting bloom filter is way better at handling this. The cost is a flat 8KB per StyleComputer, and since it's a bloom filter, false positives are a thing. This is extremely efficient, and allows us to quickly reject the majority of selectors on many huge websites. Some example rejection rates: - https://amazon.com: 77% - https://github.com/SerenityOS/serenity: 61% - https://nytimes.com: 57% - https://store.steampowered.com: 55% - https://en.wikipedia.org: 45% - https://youtube.com: 32% - https://shopify.com: 25% This also yields a chunky 37% speedup on StyleBench. :^)
2024-03-22 12:50:33 +00:00
void reset_ancestor_filter();
void push_ancestor(DOM::Element const&);
void pop_ancestor(DOM::Element const&);
LibWeb: Remove reference counting for `CSS::StyleProperties` `AK::CopyOnWrite` already does reference counting, so there is no need to do it again.
2024-10-26 15:42:27 +00:00
StyleProperties create_document_style() const;
LibWeb: Don't compute full style for ::before/::after unless matched Before this patch, we would build full computed style for these pseudo elements, for every DOM element, even if no ::before/::after selector actually matched. This was a colossal waste of time, and we can also just not do that. Instead, just abort pseudo element style resolution early if no relevant selectors matched. :^)
2023-03-14 15:36:20 +00:00
LibWeb: Remove reference counting for `CSS::StyleProperties` `AK::CopyOnWrite` already does reference counting, so there is no need to do it again.
2024-10-26 15:42:27 +00:00
StyleProperties compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type> = {}) const;
Optional<StyleProperties> compute_pseudo_element_style_if_needed(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>) const;
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
LibWeb/CSS: Implement cascade layers (aka `@layer`) This is done quite simply for now, there are certainly optimizations that can and should be made later. With this we now pass: - http://wpt.live/css/css-cascade/layer-basic.html - http://wpt.live/css/css-cascade/layer-important.html - http://wpt.live/css/css-cascade/layer-statement-copy-crash.html - http://wpt.live/css/css-cascade/layer-stylesheet-sharing-important.html - http://wpt.live/css/css-cascade/layer-stylesheet-sharing.html - http://wpt.live/css/css-cascade/layer-vs-inline-style.html
2024-09-04 16:43:18 +00:00
Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin, Optional<CSS::Selector::PseudoElement::Type>, FlyString const& qualified_layer_name = {}) const;
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 18:40:21 +00:00
LibWeb: Cache CSS rules in buckets to reduce number of rules checked This patch introduces the StyleComputer::RuleCache, which divides all of our (author) CSS rules into buckets. Currently, there are two buckets: - Rules where a specific class must be present. - All other rules. This allows us to check a significantly smaller set of rules for each element, since we can skip over any rule that requires a class attribute not present on the element. This takes the typical numer of rules tested per element on Discord from ~16000 to ~550. :^) We can definitely improve the cache invalidation. It currently happens too often due to media queries. And we also need to make sure we invalidate when mutating style through CSSOM APIs.
2022-02-10 16:49:50 +00:00
void invalidate_rule_cache();
LibWeb: Stub getting the initial font instead of the root one Previously this queried the root layout-node's font, which was both wrong and could crash if the layout wasn't ready yet. Now, it's just wrong. But at least all the font-related wrongness is grouped together in StyleComputer. :^)
2022-03-11 12:53:32 +00:00
Gfx::Font const& initial_font() const;
LibWeb: Port FontCache to new Strings
2023-02-17 14:06:55 +00:00
void did_load_font(FlyString const& family_name);
LibWeb: Load and use fonts described by @font-face rules :^) When encountering a @font-face rule, StyleComputer will now fire off a resource request and download the first source URL specified. Once downloaded, we try to parse it as a TrueType font file, and if it works, it's added to a cache in StyleComputer. This effectively makes fonts per-document since every document has its own StyleComputer. This is very unoptimized and could definitely use some caching, etc. But it does work on Acid3. :^)
2022-03-29 00:14:20 +00:00
Userland: Add ESCAPING annotations to a bunch of places This isn't comprehensive; just a result of a simple grep search.
2024-05-18 00:14:06 +00:00
Optional<FontLoader&> load_font_face(ParsedFontFace const&, ESCAPING Function<void(FontLoader const&)> on_load = {}, ESCAPING Function<void()> on_fail = {});
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
LibWeb: Remove all font loaders linked to a StyleSheet when it's deleted When a style sheet is removed, all font loaders created from that style sheet should also be removed.
2024-09-22 16:10:46 +00:00
void load_fonts_from_sheet(CSSStyleSheet&);
void unload_fonts_from_sheet(CSSStyleSheet&);
LibWeb: Load fonts from style sheet once when sheet is added Previously, we were running the "load fonts if needed" machine at the start of every style computation. That was a lot of unnecessary work, especially on sites with lots of style rules, since we had to traverse every style sheet to see if any @font-face rules needed loading. With this patch, we now load fonts once per sheet, right after adding it to a document's style sheet list.
2022-04-08 19:27:35 +00:00
LibWeb: Rename StyleValue -> CSSStyleValue This matches the name in the CSS Typed OM spec. https://drafts.css-houdini.org/css-typed-om-1/#cssstylevalue No behaviour changes.
2024-08-14 10:10:54 +00:00
RefPtr<Gfx::FontCascadeList const> compute_font_for_style_values(DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, CSSStyleValue const& font_family, CSSStyleValue const& font_size, CSSStyleValue const& font_style, CSSStyleValue const& font_weight, CSSStyleValue const& font_stretch, int math_depth = 0) const;
LibWeb: Split of compute font logic in StyleComputer
2023-08-07 19:48:18 +00:00
LibWeb: Cache the viewport rect across all of style computation Fetching the viewport rect is currently somewhat expensive, since it requires finding the navigable the document is active in. We can avoid the cost of repeated calls by simply allowing StyleComputer to cache the viewport rect at the start of style computation.
2024-01-11 13:04:18 +00:00
void set_viewport_rect(Badge<DOM::Document>, CSSPixelRect const& viewport_rect) { m_viewport_rect = viewport_rect; }
LibWeb: Add fast path for animated style properties update Patch up existing style properties instead of using the regular style invalidation path, which requires rule matching for each element in the invalidated subtree. - !important properties: this change introduces a flag used to skip the update of animated properties overridden by !important. - inherited animated properties: for now, these are invalidated by traversing animated element's subtree to propagate the update. - StyleProperties has a separate array for animated properties that allows the removal animated properties after animation has ended, without requiring full style invalidation.
2024-03-16 06:44:48 +00:00
enum class AnimationRefresh {
No,
Yes,
};
LibGC+Everywhere: Factor out a LibGC from LibJS Resulting in a massive rename across almost everywhere! Alongside the namespace change, we now have the following names: * JS::NonnullGCPtr -> GC::Ref * JS::GCPtr -> GC::Ptr * JS::HeapFunction -> GC::Function * JS::CellImpl -> GC::Cell * JS::Handle -> GC::Root
2024-11-14 15:01:23 +00:00
void collect_animation_into(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, GC::Ref<Animations::KeyframeEffect> animation, StyleProperties& style_properties, AnimationRefresh = AnimationRefresh::No) const;
LibWeb: Add fast path for animated style properties update Patch up existing style properties instead of using the regular style invalidation path, which requires rule matching for each element in the invalidated subtree. - !important properties: this change introduces a flag used to skip the update of animated properties overridden by !important. - inherited animated properties: for now, these are invalidated by traversing animated element's subtree to propagate the update. - StyleProperties has a separate array for animated properties that allows the removal animated properties after animation has ended, without requiring full style invalidation.
2024-03-16 06:44:48 +00:00
LibWeb: Cache whether there are any :has() selectors present As useful as they may be to web developers, :has() selectors complicate the style invalidation process quite a lot. Let's have StyleComputer keep track of whether they are present at all in the current set of active style sheets. This will allow us to implement fast-path optimizations when there are no :has() selectors.
2024-09-19 11:27:37 +00:00
[[nodiscard]] bool has_has_selectors() const { return m_has_has_selectors; }
LibWeb: Resolve document.fonts.ready() after fonts defined in CSS loaded This is an ad-hoc implementation that resolves the ready() promise once the document and all fonts collected by the style computer are done loading. A spec-compliant implementation would include creating a proxy CSS::FontFace for each @font-face and correctly implementing the specification steps for font fetching, but we are far from there yet. This hackish implementation should yield good WPT progress because it will actually start waiting for the Ahem font to load before capturing layout measurements. For example, it makes https://wpt.live/css/css-grid/abspos/positioned-grid-descendants-001.html go from 0/100 to 36/100 passing subtests.
2024-09-29 21:38:49 +00:00
size_t number_of_css_font_faces_with_loading_in_progress() const;
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
private:
LibWeb: Don't compute full style for ::before/::after unless matched Before this patch, we would build full computed style for these pseudo elements, for every DOM element, even if no ::before/::after selector actually matched. This was a colossal waste of time, and we can also just not do that. Instead, just abort pseudo element style resolution early if no relevant selectors matched. :^)
2023-03-14 15:36:20 +00:00
enum class ComputeStyleMode {
Normal,
CreatePseudoElementStyleIfNeeded,
};
LibWeb: Consider system fonts when looking for inexact weight match Previously, we only considered loaded (web) fonts.
2023-08-17 16:45:06 +00:00
struct MatchingFontCandidate;
LibWeb: Make font selection closer to specification Add matching on family name, style and weight. This improves the fonts used by the MDN examples.
2023-05-29 02:16:16 +00:00
LibWeb: Use an ancestor filter to quickly reject many CSS selectors Given a selector like `.foo .bar #baz`, we know that elements with the class names `foo` and `bar` must be present in the ancestor chain of the candidate element, or the selector cannot match. By keeping track of the current ancestor chain during style computation, and which strings are used in tag names and attribute names, we can do a quick check before evaluating the selector itself, to see if all the required ancestors are present. The way this works: 1. CSS::Selector now has a cache of up to 8 strings that must be present in the ancestor chain of a matching element. Note that we actually store string *hashes*, not the strings themselves. 2. When Document performs a recursive style update, we now push and pop elements to the ancestor chain stack as they are entered and exited. 3. When entering/exiting an ancestor, StyleComputer collects all the relevant string hashes from that ancestor element and updates a counting bloom filter. 4. Before evaluating a selector, we first check if any of the hashes required by the selector are definitely missing from the ancestor filter. If so, it cannot be a match, and we reject it immediately. 5. Otherwise, we carry on and evaluate the selector as usual. I originally tried doing this with a HashMap, but we ended up losing a huge chunk of the time saved to HashMap instead. As it turns out, a simple counting bloom filter is way better at handling this. The cost is a flat 8KB per StyleComputer, and since it's a bloom filter, false positives are a thing. This is extremely efficient, and allows us to quickly reject the majority of selectors on many huge websites. Some example rejection rates: - https://amazon.com: 77% - https://github.com/SerenityOS/serenity: 61% - https://nytimes.com: 57% - https://store.steampowered.com: 55% - https://en.wikipedia.org: 45% - https://youtube.com: 32% - https://shopify.com: 25% This also yields a chunky 37% speedup on StyleBench. :^)
2024-03-22 12:50:33 +00:00
[[nodiscard]] bool should_reject_with_ancestor_filter(Selector const&) const;
LibWeb: Remove reference counting for `CSS::StyleProperties` `AK::CopyOnWrite` already does reference counting, so there is no need to do it again.
2024-10-26 15:42:27 +00:00
Optional<StyleProperties> compute_style_impl(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, ComputeStyleMode) const;
LibWeb: Remove unnecessary ErrorOr<> from StyleComputer All of this error propogation came from a single call to HashMap::try_ensure_capacity! As part of the ongoing effort to ignore small allocation failures, lets just assert this works. This has the nice side-effect of propogating out to a few other classes.
2024-03-06 01:10:02 +00:00
void compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, bool& did_match_any_pseudo_element_rules, ComputeStyleMode) const;
LibGfx+LibWeb: Produce font cascade list in CSS font matching algorithm According to the CSS font matching algorithm specification, it is supposed to be executed for each glyph instead of each text run, as is currently done. This change partially implements this by having the font matching algorithm produce a list of fonts against which each glyph will be tested to find its suitable font. Now, it becomes possible to have per-glyph fallback fonts: if the needed glyph is not present in a font, we can check the subsequent fonts in the list.
2023-12-09 22:42:02 +00:00
static RefPtr<Gfx::FontCascadeList const> find_matching_font_weight_ascending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
static RefPtr<Gfx::FontCascadeList const> find_matching_font_weight_descending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
RefPtr<Gfx::FontCascadeList const> font_matching_algorithm(FontFaceKey const& key, float font_size_in_pt) const;
LibWeb: Wrap PseudoElements stored in SimpleSelector in a class No functional impact intended. This is just a more complicated way of writing what we have now. The goal of this commit is so that we are able to store the 'name' of a pseudo element for use in serializing 'unknown -webkit- pseudo-elements', see: https://www.w3.org/TR/selectors-4/#compat This is quite awkward, as in pretty much all cases just the selector type enum is enough, but we will need to cache the name for serializing these unknown selectors. I can't figure out any reason why we would need this name anywhere else in the engine, so pretty much everywhere is still just passing around this raw enum. But this change will allow us to easily store the name inside of this new struct for when it is needed for serialization, once those webkit unknown elements are supported by our engine.
2023-12-10 08:00:03 +00:00
void compute_font(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
void compute_math_depth(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
void compute_defaulted_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>) const;
LibWeb: Start transitions when affected properties change Co-authored-by: Matthew Olsson <matthewcolsson@gmail.com>
2024-09-19 13:13:20 +00:00
void start_needed_transitions(StyleProperties const& old_style, StyleProperties& new_style, DOM::Element&, Optional<Selector::PseudoElement::Type>) const;
LibWeb: Bring CSS `line-height` closer to other engines This patch makes a few changes to the way we calculate line-height: - `line-height: normal` is now resolved using metrics from the used font (specifically, round(A + D + lineGap)). - `line-height: calc(...)` is now resolved at style compute time. - `line-height` values are now absolutized at style compute time. As a consequence of the above, we no longer need to walk the DOM ancestor chain looking for line-heights during style computation. Instead, values are inherited, resolved and absolutized locally. This is not only much faster, but also makes our line-height metrics match those of other engines like Gecko and Blink.
2024-01-12 11:39:40 +00:00
void absolutize_values(StyleProperties&) const;
LibWeb: Resolve effective overflow-x and overflow-y according to spec Implements following rule from CSS Overflow Module Level 3: "The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip."
2024-02-04 14:27:04 +00:00
void resolve_effective_overflow_values(StyleProperties&) const;
LibWeb: Wrap PseudoElements stored in SimpleSelector in a class No functional impact intended. This is just a more complicated way of writing what we have now. The goal of this commit is so that we are able to store the 'name' of a pseudo element for use in serializing 'unknown -webkit- pseudo-elements', see: https://www.w3.org/TR/selectors-4/#compat This is quite awkward, as in pretty much all cases just the selector type enum is enough, but we will need to cache the name for serializing these unknown selectors. I can't figure out any reason why we would need this name anywhere else in the engine, so pretty much everywhere is still just passing around this raw enum. But this change will allow us to easily store the name inside of this new struct for when it is needed for serialization, once those webkit unknown elements are supported by our engine.
2023-12-10 08:00:03 +00:00
void transform_box_type_if_needed(StyleProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement::Type>) const;
LibWeb: Start absolutizing lengths after performing the CSS cascade Once we've performed the cascade on a set of values for an element, we should have enough information to resolve/absolutize some lengths. Basically, any CSS length that isn't "auto" or a percentage can be turned into an absolute length (in pixels) as long as we have the following information: - The viewport rect - The parent element's font - The document element's font - The element's own font To ensure that we can absolutize lengths relative to the element's own font, we now do a separate first pass where font-related properties are defaulted (in the cascade spec sense of the word) and become usable. There's a lot more work to do here, but this should open up a lot of simplification in layout code, since it will no longer need to care about relative lengths. Layout still needs to resolve percentages, since we can't do that for some properties until the containing block dimensions are known.
2021-09-23 11:13:51 +00:00
LibWeb: Wrap PseudoElements stored in SimpleSelector in a class No functional impact intended. This is just a more complicated way of writing what we have now. The goal of this commit is so that we are able to store the 'name' of a pseudo element for use in serializing 'unknown -webkit- pseudo-elements', see: https://www.w3.org/TR/selectors-4/#compat This is quite awkward, as in pretty much all cases just the selector type enum is enough, but we will need to cache the name for serializing these unknown selectors. I can't figure out any reason why we would need this name anywhere else in the engine, so pretty much everywhere is still just passing around this raw enum. But this change will allow us to easily store the name inside of this new struct for when it is needed for serialization, once those webkit unknown elements are supported by our engine.
2023-12-10 08:00:03 +00:00
void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement::Type>) const;
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. :^)
2021-09-21 09:38:18 +00:00
LibWeb/CSS: Correct behavior of `revert` inside a `@layer` `revert` is supposed to revert to the previous cascade origin, but we previously had it reverting to the previous layer. To support both, track them separately during the cascade. As part of this, we make `set_property_expanding_shorthands()` fall back to `initial` if it can't find a previous value to revert to. Previously we would just shrug and do nothing if that happened, which only works if the value you want to revert to is whatever is currently in `style`. That's no longer the case, because `revert` should skip over any layer styles that have been applied since the previous origin.
2024-09-25 13:22:50 +00:00
void set_all_properties(DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, StyleProperties&, CSSStyleValue const&, DOM::Document&, CSS::CSSStyleDeclaration const*, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer, Important = Important::No) const;
LibWeb: Implement the CSS `all` property This sets all longhand values to one of initial, inherit, unset or revert. Note that revert is not supported yet, but will be soon.
2023-07-29 08:53:24 +00:00
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 07:01:12 +00:00
template<typename Callback>
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. :^)
2021-09-21 09:38:18 +00:00
void for_each_stylesheet(CascadeOrigin, Callback) const;
LibWeb: Cache the viewport rect across all of style computation Fetching the viewport rect is currently somewhat expensive, since it requires finding the navigable the document is active in. We can avoid the cost of repeated calls by simply allowing StyleComputer to cache the viewport rect at the start of style computation.
2024-01-11 13:04:18 +00:00
[[nodiscard]] CSSPixelRect viewport_rect() const { return m_viewport_rect; }
LibWeb: Cache the root element font metrics when calculating them The root element font metrics were getting queried again and again during style computation. Before this change we would do some work to recalculate them each time. This patch simply caches them in a StyleComputer member. Since style updates always start with the root element, we know that it'll be up-to-date by the time we look at any other element. Before this change, we were spending ~5% of CPU time on Google Groups in root_element_font_metrics().
2023-05-08 08:28:21 +00:00
[[nodiscard]] Length::FontMetrics calculate_root_element_font_metrics(StyleProperties const&) const;
LibWeb: Give StyleComputer a helper for getting the current viewport
2022-03-19 17:08:52 +00:00
LibWeb/CSS: Implement cascade layers (aka `@layer`) This is done quite simply for now, there are certainly optimizations that can and should be made later. With this we now pass: - http://wpt.live/css/css-cascade/layer-basic.html - http://wpt.live/css/css-cascade/layer-important.html - http://wpt.live/css/css-cascade/layer-statement-copy-crash.html - http://wpt.live/css/css-cascade/layer-stylesheet-sharing-important.html - http://wpt.live/css/css-cascade/layer-stylesheet-sharing.html - http://wpt.live/css/css-cascade/layer-vs-inline-style.html
2024-09-04 16:43:18 +00:00
Vector<FlyString> m_qualified_layer_names_in_order;
void build_qualified_layer_names_cache();
struct LayerMatchingRules {
FlyString qualified_layer_name;
Vector<MatchingRule> rules;
};
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. :^)
2021-09-21 09:38:18 +00:00
struct MatchingRuleSet {
Vector<MatchingRule> user_agent_rules;
LibWeb: Add support for "User" CascadeOrigin User styles are applied after the UserAgent's built-in styles, and before the Author styles that are part of the web page. Because they're neither part of the page, but can still be modified while the page is open, caching is a little tricky. The approach here is to piggy-back on the StyleComputer's rule caches, which already get rebuilt whenever the styles change. This is not the smartest approach, since it means re-parsing the style sheet more often than is necessary, but it's simple and works. :^)
2023-08-21 14:50:01 +00:00
Vector<MatchingRule> user_rules;
LibWeb/CSS: Implement cascade layers (aka `@layer`) This is done quite simply for now, there are certainly optimizations that can and should be made later. With this we now pass: - http://wpt.live/css/css-cascade/layer-basic.html - http://wpt.live/css/css-cascade/layer-important.html - http://wpt.live/css/css-cascade/layer-statement-copy-crash.html - http://wpt.live/css/css-cascade/layer-stylesheet-sharing-important.html - http://wpt.live/css/css-cascade/layer-stylesheet-sharing.html - http://wpt.live/css/css-cascade/layer-vs-inline-style.html
2024-09-04 16:43:18 +00:00
Vector<LayerMatchingRules> author_rules;
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. :^)
2021-09-21 09:38:18 +00:00
};
LibWeb/CSS: Correct behavior of `revert` inside a `@layer` `revert` is supposed to revert to the previous cascade origin, but we previously had it reverting to the previous layer. To support both, track them separately during the cascade. As part of this, we make `set_property_expanding_shorthands()` fall back to `initial` if it can't find a previous value to revert to. Previously we would just shrug and do nothing if that happened, which only works if the value you want to revert to is whatever is currently in `style`. That's no longer the case, because `revert` should skip over any layer styles that have been applied since the previous origin.
2024-09-25 13:22:50 +00:00
void cascade_declarations(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement::Type>, Vector<MatchingRule> const&, CascadeOrigin, Important, StyleProperties const& style_for_revert, StyleProperties const& style_for_revert_layer) const;
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 07:01:12 +00:00
LibWeb: Cache CSS rules in buckets to reduce number of rules checked This patch introduces the StyleComputer::RuleCache, which divides all of our (author) CSS rules into buckets. Currently, there are two buckets: - Rules where a specific class must be present. - All other rules. This allows us to check a significantly smaller set of rules for each element, since we can skip over any rule that requires a class attribute not present on the element. This takes the typical numer of rules tested per element on Discord from ~16000 to ~550. :^) We can definitely improve the cache invalidation. It currently happens too often due to media queries. And we also need to make sure we invalidate when mutating style through CSSOM APIs.
2022-02-10 16:49:50 +00:00
void build_rule_cache();
void build_rule_cache_if_needed() const;
LibGC+Everywhere: Factor out a LibGC from LibJS Resulting in a massive rename across almost everywhere! Alongside the namespace change, we now have the following names: * JS::NonnullGCPtr -> GC::Ref * JS::GCPtr -> GC::Ptr * JS::HeapFunction -> GC::Function * JS::CellImpl -> GC::Cell * JS::Handle -> GC::Root
2024-11-14 15:01:23 +00:00
GC::Ref<DOM::Document> m_document;
LibWeb: Cache CSS rules in buckets to reduce number of rules checked This patch introduces the StyleComputer::RuleCache, which divides all of our (author) CSS rules into buckets. Currently, there are two buckets: - Rules where a specific class must be present. - All other rules. This allows us to check a significantly smaller set of rules for each element, since we can skip over any rule that requires a class attribute not present on the element. This takes the typical numer of rules tested per element on Discord from ~16000 to ~550. :^) We can definitely improve the cache invalidation. It currently happens too often due to media queries. And we also need to make sure we invalidate when mutating style through CSSOM APIs.
2022-02-10 16:49:50 +00:00
struct RuleCache {
LibWeb: Port StyleComputer to new Strings
2023-02-17 14:19:16 +00:00
HashMap<FlyString, Vector<MatchingRule>> rules_by_id;
HashMap<FlyString, Vector<MatchingRule>> rules_by_class;
HashMap<FlyString, Vector<MatchingRule>> rules_by_tag_name;
LibWeb: Add per-attribute-name CSS rule buckets This allows us to skip evaluating selectors like "[foo=bar]" for any element that doesn't have a "foo" attribute. Note that the bucket is case-insensitively keyed on the attribute name since case sensitivity is depending on evaluation context. This ensures we may get some false positives but no false negatives. Reduces the number of selectors evaluated by 36% when loading our GitHub repo at https://github.com/SerenityOS/serenity
2024-03-16 07:46:54 +00:00
HashMap<FlyString, Vector<MatchingRule>, AK::ASCIICaseInsensitiveFlyStringTraits> rules_by_attribute_name;
LibWeb: Bucket CSS rules by pseudo-element Instead of throwing all pseudo-element rules in one bucket, let's have one bucket per pseudo-element. This means we only run ::before rules for ::before pseudo-elements, only ::after rules for ::after, etc. Average style update time on https://tailwindcss.com/ 250ms -> 215ms.
2024-09-10 13:18:29 +00:00
Array<Vector<MatchingRule>, to_underlying(CSS::Selector::PseudoElement::Type::KnownPseudoElementCount)> rules_by_pseudo_element;
LibWeb: Add CSS rule buckets for pseudo elements, and for :root If a selector must match a pseudo element, or must match the root element, we now cache that information in the MatchingRule struct. We also introduce separate buckets for these rules, so we can avoid running them altogether if the current element can't possibly match. This cuts the number of selectors evaluated by 32% when loading our GitHub repo page https://github.com/SerenityOS/serenity
2024-03-13 10:47:25 +00:00
Vector<MatchingRule> root_rules;
LibWeb: Cache CSS rules in buckets to reduce number of rules checked This patch introduces the StyleComputer::RuleCache, which divides all of our (author) CSS rules into buckets. Currently, there are two buckets: - Rules where a specific class must be present. - All other rules. This allows us to check a significantly smaller set of rules for each element, since we can skip over any rule that requires a class attribute not present on the element. This takes the typical numer of rules tested per element on Discord from ~16000 to ~550. :^) We can definitely improve the cache invalidation. It currently happens too often due to media queries. And we also need to make sure we invalidate when mutating style through CSSOM APIs.
2022-02-10 16:49:50 +00:00
Vector<MatchingRule> other_rules;
LibWeb: Add preliminary support for CSS animations This partially implements CSS-Animations-1 (though there are references to CSS-Animations-2). Current limitations: - Multi-selector keyframes are not supported. - Most animation properties are ignored. - Timing functions are not applied. - Non-absolute values are not interpolated unless the target is also of the same non-absolute type (e.g. 10% -> 25%, but not 10% -> 20px). - The JavaScript interface is left as an exercise for the next poor soul looking at this code. With those said, this commit implements: - Interpolation for most common types - Proper keyframe resolution (including the synthetic from-keyframe containing the initial state) - Properly driven animations, and proper style invalidation Co-Authored-By: Andreas Kling <kling@serenityos.org>
2023-05-26 20:00:54 +00:00
LibWeb: Transition StyleComputer to Web Animations With this commit, we are finally running animations off of the web animations spec! A lot of the work StyleComputer is doing is now done elsewhere. For example, fill-forward animations are handled by Animation::is_relevant() returning true in the after phase, meaning the "active_state_if_fill_forward" map is no longer needed.
2024-02-22 13:56:15 +00:00
HashMap<FlyString, NonnullRefPtr<Animations::KeyframeEffect::KeyFrameSet>> rules_by_animation_keyframes;
LibWeb: Cache whether there are any :has() selectors present As useful as they may be to web developers, :has() selectors complicate the style invalidation process quite a lot. Let's have StyleComputer keep track of whether they are present at all in the current set of active style sheets. This will allow us to implement fast-path optimizations when there are no :has() selectors.
2024-09-19 11:27:37 +00:00
bool has_has_selectors { false };
LibWeb: Cache CSS rules in buckets to reduce number of rules checked This patch introduces the StyleComputer::RuleCache, which divides all of our (author) CSS rules into buckets. Currently, there are two buckets: - Rules where a specific class must be present. - All other rules. This allows us to check a significantly smaller set of rules for each element, since we can skip over any rule that requires a class attribute not present on the element. This takes the typical numer of rules tested per element on Discord from ~16000 to ~550. :^) We can definitely improve the cache invalidation. It currently happens too often due to media queries. And we also need to make sure we invalidate when mutating style through CSSOM APIs.
2022-02-10 16:49:50 +00:00
};
LibWeb: Implement the CSS rule cache optimization for UA style as well We were already sorting the author style selectors into buckets. Now we do it for the built-in UA style as well. This means less work for the selector engine everywhere :^)
2023-03-07 19:13:13 +00:00
NonnullOwnPtr<RuleCache> make_rule_cache_for_cascade_origin(CascadeOrigin);
RuleCache const& rule_cache_for_cascade_origin(CascadeOrigin) const;
LibWeb: Cache whether there are any :has() selectors present As useful as they may be to web developers, :has() selectors complicate the style invalidation process quite a lot. Let's have StyleComputer keep track of whether they are present at all in the current set of active style sheets. This will allow us to implement fast-path optimizations when there are no :has() selectors.
2024-09-19 11:27:37 +00:00
bool m_has_has_selectors { false };
LibWeb: Implement the CSS rule cache optimization for UA style as well We were already sorting the author style selectors into buckets. Now we do it for the built-in UA style as well. This means less work for the selector engine everywhere :^)
2023-03-07 19:13:13 +00:00
OwnPtr<RuleCache> m_author_rule_cache;
LibWeb: Add support for "User" CascadeOrigin User styles are applied after the UserAgent's built-in styles, and before the Author styles that are part of the web page. Because they're neither part of the page, but can still be modified while the page is open, caching is a little tricky. The approach here is to piggy-back on the StyleComputer's rule caches, which already get rebuilt whenever the styles change. This is not the smartest approach, since it means re-parsing the style sheet more often than is necessary, but it's simple and works. :^)
2023-08-21 14:50:01 +00:00
OwnPtr<RuleCache> m_user_rule_cache;
LibWeb: Implement the CSS rule cache optimization for UA style as well We were already sorting the author style selectors into buckets. Now we do it for the built-in UA style as well. This means less work for the selector engine everywhere :^)
2023-03-07 19:13:13 +00:00
OwnPtr<RuleCache> m_user_agent_rule_cache;
LibGC+Everywhere: Factor out a LibGC from LibJS Resulting in a massive rename across almost everywhere! Alongside the namespace change, we now have the following names: * JS::NonnullGCPtr -> GC::Ref * JS::GCPtr -> GC::Ptr * JS::HeapFunction -> GC::Function * JS::CellImpl -> GC::Cell * JS::Handle -> GC::Root
2024-11-14 15:01:23 +00:00
GC::Root<CSSStyleSheet> m_user_style_sheet;
LibWeb: Load and use fonts described by @font-face rules :^) When encountering a @font-face rule, StyleComputer will now fire off a resource request and download the first source URL specified. Once downloaded, we try to parse it as a TrueType font file, and if it works, it's added to a cache in StyleComputer. This effectively makes fonts per-document since every document has its own StyleComputer. This is very unoptimized and could definitely use some caching, etc. But it does work on Acid3. :^)
2022-03-29 00:14:20 +00:00
LibGfx+LibWeb: Produce font cascade list in CSS font matching algorithm According to the CSS font matching algorithm specification, it is supposed to be executed for each glyph instead of each text run, as is currently done. This change partially implements this by having the font matching algorithm produce a list of fonts against which each glyph will be tested to find its suitable font. Now, it becomes possible to have per-glyph fallback fonts: if the needed glyph is not present in a font, we can check the subsequent fonts in the list.
2023-12-09 22:42:02 +00:00
using FontLoaderList = Vector<NonnullOwnPtr<FontLoader>>;
HashMap<FontFaceKey, FontLoaderList> m_loaded_fonts;
LibWeb: Cache the root element font metrics when calculating them The root element font metrics were getting queried again and again during style computation. Before this change we would do some work to recalculate them each time. This patch simply caches them in a StyleComputer member. Since style updates always start with the root element, we know that it'll be up-to-date by the time we look at any other element. Before this change, we were spending ~5% of CPU time on Google Groups in root_element_font_metrics().
2023-05-08 08:28:21 +00:00
Length::FontMetrics m_default_font_metrics;
Length::FontMetrics m_root_element_font_metrics;
LibWeb: Add preliminary support for CSS animations This partially implements CSS-Animations-1 (though there are references to CSS-Animations-2). Current limitations: - Multi-selector keyframes are not supported. - Most animation properties are ignored. - Timing functions are not applied. - Non-absolute values are not interpolated unless the target is also of the same non-absolute type (e.g. 10% -> 25%, but not 10% -> 20px). - The JavaScript interface is left as an exercise for the next poor soul looking at this code. With those said, this commit implements: - Interpolation for most common types - Proper keyframe resolution (including the synthetic from-keyframe containing the initial state) - Properly driven animations, and proper style invalidation Co-Authored-By: Andreas Kling <kling@serenityos.org>
2023-05-26 20:00:54 +00:00
LibWeb: Cache the viewport rect across all of style computation Fetching the viewport rect is currently somewhat expensive, since it requires finding the navigable the document is active in. We can avoid the cost of repeated calls by simply allowing StyleComputer to cache the viewport rect at the start of style computation.
2024-01-11 13:04:18 +00:00
CSSPixelRect m_viewport_rect;
LibWeb: Use an ancestor filter to quickly reject many CSS selectors Given a selector like `.foo .bar #baz`, we know that elements with the class names `foo` and `bar` must be present in the ancestor chain of the candidate element, or the selector cannot match. By keeping track of the current ancestor chain during style computation, and which strings are used in tag names and attribute names, we can do a quick check before evaluating the selector itself, to see if all the required ancestors are present. The way this works: 1. CSS::Selector now has a cache of up to 8 strings that must be present in the ancestor chain of a matching element. Note that we actually store string *hashes*, not the strings themselves. 2. When Document performs a recursive style update, we now push and pop elements to the ancestor chain stack as they are entered and exited. 3. When entering/exiting an ancestor, StyleComputer collects all the relevant string hashes from that ancestor element and updates a counting bloom filter. 4. Before evaluating a selector, we first check if any of the hashes required by the selector are definitely missing from the ancestor filter. If so, it cannot be a match, and we reject it immediately. 5. Otherwise, we carry on and evaluate the selector as usual. I originally tried doing this with a HashMap, but we ended up losing a huge chunk of the time saved to HashMap instead. As it turns out, a simple counting bloom filter is way better at handling this. The cost is a flat 8KB per StyleComputer, and since it's a bloom filter, false positives are a thing. This is extremely efficient, and allows us to quickly reject the majority of selectors on many huge websites. Some example rejection rates: - https://amazon.com: 77% - https://github.com/SerenityOS/serenity: 61% - https://nytimes.com: 57% - https://store.steampowered.com: 55% - https://en.wikipedia.org: 45% - https://youtube.com: 32% - https://shopify.com: 25% This also yields a chunky 37% speedup on StyleBench. :^)
2024-03-22 12:50:33 +00:00
CountingBloomFilter<u8, 14> m_ancestor_filter;
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 15:47:59 +00:00
};
LibWeb: Move everything into the Web namespace
2020-03-07 09:27:02 +00:00
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
class FontLoader : public ResourceClient {
public:
Userland: Add ESCAPING annotations to a bunch of places This isn't comprehensive; just a result of a simple grep search.
2024-05-18 00:14:06 +00:00
FontLoader(StyleComputer& style_computer, FlyString family_name, Vector<Gfx::UnicodeRange> unicode_ranges, Vector<URL::URL> urls, ESCAPING Function<void(FontLoader const&)> on_load = {}, ESCAPING Function<void()> on_fail = {});
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
virtual ~FontLoader() override;
Vector<Gfx::UnicodeRange> const& unicode_ranges() const { return m_unicode_ranges; }
LibGfx+LibWeb: Rename Gfx::VectorFont to Gfx::Typeface Typeface is a more widely used name for the data represented by class previously named VectorFont. Now: - Typeface represents decoded font that is not ready for rendering - ScaledFont represents the combination of typeface and size for rendering
2024-06-28 18:27:00 +00:00
RefPtr<Gfx::Typeface> vector_font() const { return m_vector_font; }
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
RefPtr<Gfx::Font> font_with_point_size(float point_size);
void start_loading_next_url();
LibWeb: Resolve document.fonts.ready() after fonts defined in CSS loaded This is an ad-hoc implementation that resolves the ready() promise once the document and all fonts collected by the style computer are done loading. A spec-compliant implementation would include creating a proxy CSS::FontFace for each @font-face and correctly implementing the specification steps for font fetching, but we are far from there yet. This hackish implementation should yield good WPT progress because it will actually start waiting for the Ahem font to load before capturing layout measurements. For example, it makes https://wpt.live/css/css-grid/abspos/positioned-grid-descendants-001.html go from 0/100 to 36/100 passing subtests.
2024-09-29 21:38:49 +00:00
bool is_loading() const { return resource() && resource()->is_pending(); }
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
private:
LibWeb: Make CSS font loader tolerate WPT web server shenanigans The web server for WPT has a tendency to just disconnect after sending us a resource. This makes curl think an error occurred, but it's actually still recoverable and we have the data. So instead of just bailing, do what we already do for other kinds of resources and try to parse the data we got. If it works out, great! It would be nice to solve this in the networking layer instead, but I'll leave that as an exercise for our future selves.
2024-09-21 16:35:31 +00:00
// ^ResourceClient
virtual void resource_did_load() override;
virtual void resource_did_fail() override;
void resource_did_load_or_fail();
LibGfx+LibWeb: Rename Gfx::VectorFont to Gfx::Typeface Typeface is a more widely used name for the data represented by class previously named VectorFont. Now: - Typeface represents decoded font that is not ready for rendering - ScaledFont represents the combination of typeface and size for rendering
2024-06-28 18:27:00 +00:00
ErrorOr<NonnullRefPtr<Gfx::Typeface>> try_load_font();
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
StyleComputer& m_style_computer;
FlyString m_family_name;
Vector<Gfx::UnicodeRange> m_unicode_ranges;
LibGfx+LibWeb: Rename Gfx::VectorFont to Gfx::Typeface Typeface is a more widely used name for the data represented by class previously named VectorFont. Now: - Typeface represents decoded font that is not ready for rendering - ScaledFont represents the combination of typeface and size for rendering
2024-06-28 18:27:00 +00:00
RefPtr<Gfx::Typeface> m_vector_font;
LibWeb: Expose StyleComputer's FontLoader class publicly We'll want to explicitly load fonts from FontFace and other Web APIs in the future. A future refactor should also move this completely away from StyleComputer and call it something like 'FontCache'.
2024-05-15 20:58:24 +00:00
Vector<URL::URL> m_urls;
Function<void(FontLoader const&)> m_on_load;
Function<void()> m_on_fail;
};
LibWeb: Move everything into the Web namespace
2020-03-07 09:27:02 +00:00
}
Reference in a new issue Copy permalink