Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-31 13:20:59 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Userland/Libraries/LibWeb/CSS/StyleComputer.h

283 lines
11 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 09:38:21 +01:00
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
LibWeb: Port FontCache to new Strings
2023-02-17 14:06:55 +00:00
* Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.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 09:38:21 +01: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 01:24:48 -07: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 09:38:21 +01: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 17:47:59 +02: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 15:32:17 +03:00
#include <AK/OwnPtr.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 23:30:54 +03:30
#include <AK/RedBlackTree.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 02:14:20 +02: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 23:30:54 +03:30
#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 23:02:58 +02:00
#include <LibWeb/CSS/CSSStyleDeclaration.h>
LibWeb: Rename StyleComponentValueRule -> ComponentValue "Component value" is the term used in the spec, and it doesn't conflict with any other types, so let's use the shorter name. :^) Also, this doesn't need to be friends with the Parser any more.
2022-03-31 11:43:07 +01:00
#include <LibWeb/CSS/Parser/ComponentValue.h>
LibWeb: Use TokenStreams when expanding unresolved CSS values This fixes a bug where any whitespace inside the `var()` or `attr()` functions would make the StyleComputer fail to resolve them.
2022-09-27 16:46:22 +01:00
#include <LibWeb/CSS/Parser/TokenStream.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 10:32:51 +01:00
#include <LibWeb/CSS/StyleProperties.h>
LibWeb: Make FontCache per-StyleComputer This effectively makes it per-Document, but we hang it off of StyleComputer since that's what it's used for. The purpose of this is to prevent downloaded fonts from escaping the context that loaded them. There's probably a more elegant solution where we still share caching of system fonts, but let's start here.
2023-08-17 18:51:32 +02:00
#include <LibWeb/FontCache.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 19:37:56 +02:00
#include <LibWeb/Forward.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 17:47:59 +02:00
LibWeb: Move CSS classes into the Web::CSS namespace
2020-07-26 20:01:35 +02:00
namespace Web::CSS {
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
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-13 00:44:26 +02:00
struct MatchingRule {
LibJS+LibWeb: Wrap raw JS::Cell*/& fields in GCPtr/NonnullGCPtr
2023-02-26 16:09:02 -07:00
JS::GCPtr<CSSStyleRule const> rule;
LibWeb: Rough implementation of CSS namespace rule This provides a rough implementation of the CSS @namespace rule. Currently we just support default namespaces, namespace prefixes are still to come.
2023-07-29 11:51:15 -05:00
JS::GCPtr<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-13 00:44:26 +02:00
size_t style_sheet_index { 0 };
size_t rule_index { 0 };
size_t selector_index { 0 };
LibWeb: StyleResolver: Keep track of specificity of matched selector This way it gets easier to compare matches.
2021-05-24 23:01:24 +02:00
u32 specificity { 0 };
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 19:27:23 +01:00
bool contains_pseudo_element { false };
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-13 00:44:26 +02:00
};
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
class PropertyDependencyNode : public RefCounted<PropertyDependencyNode> {
public:
LibWeb: Port StyleComputer to new Strings
2023-02-17 14:19:16 +00:00
static NonnullRefPtr<PropertyDependencyNode> create(String name)
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
{
return adopt_ref(*new PropertyDependencyNode(move(name)));
}
void add_child(NonnullRefPtr<PropertyDependencyNode>);
bool has_cycles();
private:
LibWeb: Port StyleComputer to new Strings
2023-02-17 14:19:16 +00:00
explicit PropertyDependencyNode(String name);
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
LibWeb: Port StyleComputer to new Strings
2023-02-17 14:19:16 +00:00
String m_name;
Everywhere: Stop using NonnullRefPtrVector This class had slightly confusing semantics and the added weirdness doesn't seem worth it just so we can say "." instead of "->" when iterating over a vector of NNRPs. This patch replaces NonnullRefPtrVector<T> with Vector<NNRP<T>>.
2023-03-06 14:17:01 +01:00
Vector<NonnullRefPtr<PropertyDependencyNode>> m_children;
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
bool m_marked { false };
};
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 15:35:30 +02: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: 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 13:49:57 +02: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 17:47:59 +02:00
public:
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 13:49:57 +02: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 02:14:20 +02: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 17:47:59 +02: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 19:37:56 +02:00
DOM::Document& document() { return m_document; }
LibWeb: Convert StyleResolver.{h,cpp} to east const
2021-07-14 16:56:11 +01: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 17:47:59 +02:00
LibWeb: Make FontCache per-StyleComputer This effectively makes it per-Document, but we hang it off of StyleComputer since that's what it's used for. The purpose of this is to prevent downloaded fonts from escaping the context that loaded them. There's probably a more elegant solution where we still share caching of system fonts, but let's start here.
2023-08-17 18:51:32 +02:00
FontCache& font_cache() const { return m_font_cache; }
LibWeb: Give DOM::Document some default style properties Add StyleResolver::create_document_style() to help in creating an "empty" style with nothing but default values.
2021-09-23 19:48:41 +02:00
NonnullRefPtr<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 16:36:20 +01:00
LibWeb: Use HashMap::try_ensure_capacity in StyleComputer
2022-12-06 03:08:20 -03:00
ErrorOr<NonnullRefPtr<StyleProperties>> compute_style(DOM::Element&, Optional<CSS::Selector::PseudoElement> = {}) 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 16:36:20 +01:00
ErrorOr<RefPtr<StyleProperties>> compute_pseudo_element_style_if_needed(DOM::Element&, Optional<CSS::Selector::PseudoElement>) 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 17:47:59 +02: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. :^)
2021-09-21 11:38:18 +02:00
// https://www.w3.org/TR/css-cascade/#origin
enum class CascadeOrigin {
Author,
User,
UserAgent,
Animation,
Transition,
};
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
Vector<MatchingRule> collect_matching_rules(DOM::Element const&, CascadeOrigin, Optional<CSS::Selector::PseudoElement>) 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 20:40:21 +02: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 17:49:50 +01: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 02:14:20 +02:00
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 21:27:35 +02:00
void load_fonts_from_sheet(CSSStyleSheet const&);
LibWeb: Split of compute font logic in StyleComputer
2023-08-07 21:48:18 +02:00
RefPtr<Gfx::Font const> compute_font_for_style_values(DOM::Element const* element, Optional<CSS::Selector::PseudoElement> pseudo_element, StyleValue const& font_family, StyleValue const& font_size, StyleValue const& font_style, StyleValue const& font_weight, StyleValue const& font_stretch) const;
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 23:30:54 +03:30
struct AnimationKey {
CSS::CSSStyleDeclaration const* source_declaration;
DOM::Element const* element;
};
LibWeb: Fully implement CSS animation-timing-function This implements all the timing functions, and hopefully all their quirks. Also changes the animation demo to use some funny cubic timing functions.
2023-07-06 16:56:25 +03:30
struct AnimationTiming {
struct Linear { };
struct CubicBezier {
// Regular parameters
double x1;
double y1;
double x2;
double y2;
struct CachedSample {
double x;
double y;
double t;
};
mutable Vector<CachedSample, 64> m_cached_x_samples = {};
CachedSample sample_around(double x) const;
bool operator==(CubicBezier const& other) const
{
return x1 == other.x1 && y1 == other.y1 && x2 == other.x2 && y2 == other.y2;
}
};
struct Steps {
size_t number_of_steps;
bool jump_at_start;
bool jump_at_end;
};
Variant<Linear, CubicBezier, Steps> timing_function;
};
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 17:47:59 +02: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 16:36:20 +01:00
enum class ComputeStyleMode {
Normal,
CreatePseudoElementStyleIfNeeded,
};
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
class FontLoader;
LibWeb: Consider system fonts when looking for inexact weight match Previously, we only considered loaded (web) fonts.
2023-08-17 18:45:06 +02: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: 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 16:36:20 +01:00
ErrorOr<RefPtr<StyleProperties>> compute_style_impl(DOM::Element&, Optional<CSS::Selector::PseudoElement>, ComputeStyleMode) const;
LibWeb: Actually instantiate ::before/::after pseudo elements when found Regressed in 3e970540b4a1663f3569ebe049b71c60100ee018. Thanks to Luke for noticing the issue on YouTube! :^)
2023-03-14 18:45:24 +01:00
ErrorOr<void> compute_cascaded_values(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>, bool& did_match_any_pseudo_element_rules, ComputeStyleMode) const;
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
static RefPtr<Gfx::Font const> find_matching_font_weight_ascending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
static RefPtr<Gfx::Font const> find_matching_font_weight_descending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive);
RefPtr<Gfx::Font const> font_matching_algorithm(FontFaceKey const& key, float font_size_in_pt) const;
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
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;
LibWeb: Make absolutizing StyleValues infallible
2023-08-19 15:33:21 +01:00
void absolutize_values(StyleProperties&, DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
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
void transform_box_type_if_needed(StyleProperties&, DOM::Element const&, Optional<CSS::Selector::PseudoElement>) 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 13:13:51 +02:00
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
void compute_defaulted_property_value(StyleProperties&, DOM::Element const*, CSS::PropertyID, Optional<CSS::Selector::PseudoElement>) 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 11:38:18 +02:00
LibWeb: Resolve CSS custom properties on pseudo elements The resolved property sets are stored with the element in a per-pseudo-element array (same as for pseudo element layout nodes). Longer term, we should stop storing this with elements entirely and make it temporary state in StyleComputer somehow, so we don't waste memory keeping all the resolved properties around. This makes various gradients show up on https://shopify.com/ :^)
2023-05-17 17:05:36 +02:00
RefPtr<StyleValue> resolve_unresolved_style_value(DOM::Element&, Optional<CSS::Selector::PseudoElement>, PropertyID, UnresolvedStyleValue const&) const;
bool expand_variables(DOM::Element&, Optional<CSS::Selector::PseudoElement>, StringView property_name, HashMap<FlyString, NonnullRefPtr<PropertyDependencyNode>>& dependencies, Parser::TokenStream<Parser::ComponentValue>& source, Vector<Parser::ComponentValue>& dest) const;
LibWeb: Do CSS var() expansion in a separate pass By expanding all the var() values first, we allow var() to occur anywhere, even as arguments to CSS functions.
2022-11-02 20:19:03 +01:00
bool expand_unresolved_values(DOM::Element&, StringView property_name, Parser::TokenStream<Parser::ComponentValue>& source, Vector<Parser::ComponentValue>& dest) const;
LibWeb: Parse and resolve UnresolvedStyleValues If a property is custom or contains a `var()` reference, it cannot be parsed into a proper StyleValue immediately, so we store it as an UnresolvedStyleValue until the property is compute. Then, at compute time, we resolve them by expanding out any `var()` references, and parsing the result. The implementation here is very naive, and involves copying the UnresolvedStyleValue's tree of StyleComponentValueRules while copying the contents of any `var()`s it finds along the way. This is quite an expensive operation to do every time that the style is computed.
2021-12-03 12:32:12 +00:00
LibWeb: Implement the CSS `revert` keyword This is a universal value like `initial` and `inherit` and works by reverting the current value to whatever we had at the start of the current cascade origin. The implementation is somewhat inefficient as we make a copy of all current values at the start of each origin. I'm sure we can come up with a way to make this faster eventually.
2023-07-29 17:14:18 +02:00
void set_all_properties(DOM::Element&, Optional<CSS::Selector::PseudoElement>, StyleProperties&, StyleValue const&, DOM::Document&, CSS::CSSStyleDeclaration const*, StyleProperties::PropertyValues const& properties_for_revert) 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 10:53:24 +02: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 09:01:12 +02: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 11:38:18 +02:00
void for_each_stylesheet(CascadeOrigin, Callback) const;
LibWeb: Use CSS Pixels for viewport rects
2022-11-09 12:32:20 +00:00
CSSPixelRect viewport_rect() const;
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 10:28:21 +02:00
[[nodiscard]] Length::FontMetrics calculate_root_element_font_metrics(StyleProperties const&) const;
LibWeb: Add support for the lh and rlh length units Resolving these units is somewhat tricky because of their interaction with both font-size and line-height, but this implementation seems to work as tested in http://wpt.live/css/css-values/lh-unit-001.html and http://wpt.live/css/css-values/lh-unit-002.html
2023-03-17 23:08:45 +01:00
CSSPixels parent_or_root_element_line_height(DOM::Element const*, Optional<CSS::Selector::PseudoElement>) const;
LibWeb: Give StyleComputer a helper for getting the current viewport
2022-03-19 18:08:52 +01: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. :^)
2021-09-21 11:38:18 +02: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 15:50:01 +01:00
Vector<MatchingRule> user_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 11:38:18 +02:00
Vector<MatchingRule> author_rules;
};
LibWeb: Don't apply element inline style to associated pseudo elements An element's inline style, if present, should not leak into any pseudo elements generated by that element.
2023-04-02 08:35:03 +02:00
void cascade_declarations(StyleProperties&, DOM::Element&, Optional<CSS::Selector::PseudoElement>, Vector<MatchingRule> const&, CascadeOrigin, Important) 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 09:01:12 +02: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 17:49:50 +01:00
void build_rule_cache();
void build_rule_cache_if_needed() const;
LibJS+LibWeb: Wrap raw JS::Cell*/& fields in GCPtr/NonnullGCPtr
2023-02-26 16:09:02 -07:00
JS::NonnullGCPtr<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 17:49:50 +01:00
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 23:30:54 +03:30
struct AnimationKeyFrameSet {
struct ResolvedKeyFrame {
struct UseInitial { };
Array<Variant<Empty, UseInitial, NonnullRefPtr<StyleValue const>>, to_underlying(last_property_id) + 1> resolved_properties {};
};
RedBlackTree<u64, ResolvedKeyFrame> keyframes_by_key;
};
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 17:49:50 +01: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: 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 17:49:50 +01: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 23:30:54 +03:30
HashMap<FlyString, NonnullOwnPtr<AnimationKeyFrameSet>> rules_by_animation_keyframes;
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 17:49:50 +01: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 20:13:13 +01:00
NonnullOwnPtr<RuleCache> make_rule_cache_for_cascade_origin(CascadeOrigin);
RuleCache const& rule_cache_for_cascade_origin(CascadeOrigin) const;
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 23:30:54 +03:30
void ensure_animation_timer() const;
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 20:13:13 +01: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 15:50:01 +01: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 20:13:13 +01:00
OwnPtr<RuleCache> m_user_agent_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 15:50:01 +01:00
JS::Handle<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 02:14:20 +02:00
LibWeb: Make FontCache per-StyleComputer This effectively makes it per-Document, but we hang it off of StyleComputer since that's what it's used for. The purpose of this is to prevent downloaded fonts from escaping the context that loaded them. There's probably a more elegant solution where we still share caching of system fonts, but let's start here.
2023-08-17 18:51:32 +02:00
mutable FontCache m_font_cache;
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 15:35:30 +02:00
HashMap<FontFaceKey, NonnullOwnPtr<FontLoader>> 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 10:28:21 +02: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 23:30:54 +03:30
constexpr static u64 AnimationKeyFrameKeyScaleFactor = 1000; // 0..100000
enum class AnimationStepTransition {
NoTransition,
IdleOrBeforeToActive,
IdleOrBeforeToAfter,
ActiveToBefore,
ActiveToActiveChangingTheIteration,
ActiveToAfter,
AfterToActive,
AfterToBefore,
Cancelled,
};
enum class AnimationState {
Before,
After,
Idle,
Active,
};
LibWeb: Respect the animation-fill-mode CSS property
2023-05-27 09:45:21 +03:30
struct AnimationStateSnapshot {
Array<RefPtr<StyleValue const>, to_underlying(last_property_id) + 1> state;
};
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 23:30:54 +03:30
struct Animation {
String name;
LibWeb: Allow `auto` as `animation-duration` and make that the default This is a spec change: https://github.com/w3c/csswg-drafts/commit/2a7cc4b58f903389926cb429af2f42307dced186
2023-06-09 14:25:32 +01:00
Optional<CSS::Time> duration; // "auto" if not set.
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 23:30:54 +03:30
CSS::Time delay;
Optional<size_t> iteration_count; // Infinite if not set.
LibWeb: Fully implement CSS animation-timing-function This implements all the timing functions, and hopefully all their quirks. Also changes the animation demo to use some funny cubic timing functions.
2023-07-06 16:56:25 +03:30
AnimationTiming timing_function;
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 23:30:54 +03:30
CSS::AnimationDirection direction;
CSS::AnimationFillMode fill_mode;
WeakPtr<DOM::Element> owning_element;
CSS::Percentage progress { 0 };
CSS::Time remaining_delay { 0, CSS::Time::Type::Ms };
AnimationState current_state { AnimationState::Before };
LibWeb: Respect the CSS animation-direction property for animations
2023-05-29 05:02:03 +03:30
size_t current_iteration { 1 };
LibWeb: Respect the animation-fill-mode CSS property
2023-05-27 09:45:21 +03:30
mutable AnimationStateSnapshot initial_state {};
mutable OwnPtr<AnimationStateSnapshot> active_state_if_fill_forward {};
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 23:30:54 +03:30
AnimationStepTransition step(CSS::Time const& time_step);
ErrorOr<void> collect_into(StyleProperties&, RuleCache const&) const;
bool is_done() const;
LibWeb: Respect the CSS animation-direction property for animations
2023-05-29 05:02:03 +03:30
private:
float compute_output_progress(float input_progress) const;
bool is_animating_backwards() const;
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 23:30:54 +03:30
};
mutable HashMap<AnimationKey, NonnullOwnPtr<Animation>> m_active_animations;
LibWeb: Respect the animation-fill-mode CSS property
2023-05-27 09:45:21 +03:30
mutable HashMap<AnimationKey, OwnPtr<AnimationStateSnapshot>> m_finished_animations; // If fill-mode is forward/both, this is non-null and contains the final state.
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 23:30:54 +03:30
mutable RefPtr<Platform::Timer> m_animation_driver_timer;
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 17:47:59 +02:00
};
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
}
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 23:30:54 +03:30
template<>
struct AK::Traits<Web::CSS::StyleComputer::AnimationKey> : public AK::GenericTraits<Web::CSS::StyleComputer::AnimationKey> {
static unsigned hash(Web::CSS::StyleComputer::AnimationKey const& k) { return pair_int_hash(ptr_hash(k.source_declaration), ptr_hash(k.element)); }
static bool equals(Web::CSS::StyleComputer::AnimationKey const& a, Web::CSS::StyleComputer::AnimationKey const& b)
{
return a.element == b.element && a.source_declaration == b.source_declaration;
}
};
Reference in a new issue Copy permalink