Commit graph

370 commits

Author SHA1 Message Date
Matthew Olsson
ebfc6c33a6 LibWeb: Remove "resolved" from the name of Keyframe's property map
These will need to store unresolved styles as well, since they may be
built during parsing of a @keyframes rule. In that case there is no
target element or pseudo-element, and thus the value cannot be resolved.
2024-03-20 09:17:33 +01:00
Andreas Kling
ce2bfb4a12 LibWeb: Make CSSStyleRule::declaration() return a more specific type
This removes the need for some hot verify_casts in StyleComputer.
2024-03-19 16:48:22 +01:00
Andreas Kling
3c3e591f03 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 16:48:22 +01:00
Andreas Kling
08a956f544 LibWeb: Ignore all pseudo element rules when matching non-pseudo element 2024-03-19 09:44:25 +01:00
Andreas Kling
4679dbc9df LibWeb: Make Element::inline_style() return specific declaration type
This removes a bunch of RTTI checks in StyleComputer.
2024-03-19 09:44:25 +01:00
Andreas Kling
25c22bb5e5 LibWeb: Reorder MatchingRule members to make it smaller
By packing the members more efficiently, it goes from 64 to 56 bytes.
2024-03-19 09:44:25 +01:00
Andreas Kling
963aa213c5 LibWeb: Avoid two calls to Selector::specificity() when sorting rules 2024-03-19 09:44:25 +01:00
Shannon Booth
e800605ad3 AK+LibURL: Move AK::URL into a new URL library
This URL library ends up being a relatively fundamental base library of
the system, as LibCore depends on LibURL.

This change has two main benefits:
 * Moving AK back more towards being an agnostic library that can
   be used between the kernel and userspace. URL has never really fit
   that description - and is not used in the kernel.
 * URL _should_ depend on LibUnicode, as it needs punnycode support.
   However, it's not really possible to do this inside of AK as it can't
   depend on any external library. This change brings us a little closer
   to being able to do that, but unfortunately we aren't there quite
   yet, as the code generators depend on LibCore.
2024-03-18 14:06:28 -04:00
Andreas Kling
21bfa001b1 LibWeb: Make StyleProperties::m_property_values a bit smaller
Instead of wrapping every entry in Optional, use the null state of the
style pointer for the same purpose.

This shrinks StyleProperties by 1752 bytes per instance.
2024-03-18 13:42:16 +01:00
Andreas Kling
77d98b5697 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 14:27:59 +01:00
Andreas Kling
038e0ceee7 LibWeb: Avoid copying the CSS @namespace every time we run a selector 2024-03-16 14:27:59 +01:00
Andreas Kling
a378303629 LibWeb: Use unchecked_append in StyleComputer::collect_matching_rules()
We already grow the "rules to run" vector before appending to it, so we
can actually use unchecked_append() here and avoid the "needs to grow"
checks every time we append to it.

This takes appending from 3% to <1% when loading our GitHub repo.
2024-03-16 14:27:59 +01:00
Andreas Kling
7da3b0dd7b LibWeb: Avoid a FlyString->String->FlyString round-trip in StyleComputer 2024-03-16 14:27:59 +01:00
Aliaksandr Kalenik
a9b8840a82 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 09:49:40 +01:00
Andreas Kling
bbf67faa95 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-14 12:42:08 +01:00
Andreas Kling
c6e37d0c44 LibWeb: Give Vector<MatchingRule> some inline capacity in StyleComputer
We frequently end up matching hundreds or even thousands of rules. By
giving this vector some inline capacity, we avoid a lot of the
repetitive churn from dynamically growing it all the way from 0
capacity.
2024-03-14 12:42:08 +01:00
Aliaksandr Kalenik
33294aea86 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>
2024-03-09 16:13:32 +01:00
implicitfield
18fe86adc3 LibWeb: Add support for the inline-size CSS property 2024-03-09 16:02:17 +01:00
Aliaksandr Kalenik
7c322ec710 LibWeb: Implement adoptedStyleSheets attribute for Document
https://drafts.csswg.org/cssom/#dom-documentorshadowroot-adoptedstylesheets

The attribute implementation for ShadowRoot is currently missing
because we do not yet distinguish between the style sheets of
ShadowRoot and Document, and we need to address the issue first.
2024-03-08 16:31:21 +01:00
Bastiaan van der Plaat
69e4f924b7 LibWeb: Add element adjust_computed_style and move set_property() to it 2024-03-08 08:38:18 +01:00
Matthew Olsson
8f3b97e095 LibWeb: Don't render elements with invalid interpolated transform values 2024-03-06 07:45:56 +01:00
Matthew Olsson
e6aef49ef3 LibWeb: Consider fill state before calling Animation::play()
Animation::play_state() does not consider the fill state, and thus will
not return "Playing" for a fill-forward animation in the after phase.
It is still valid for paused, as pausing is not affected by the fill
mode.
2024-03-06 07:45:56 +01:00
Matthew Olsson
5dfe99e247 LibWeb: Do not assert the type of transformation style values
In this case, the StyleValue may be "unresolved", however let's just
avoid the assert altogether and treat all non-transform values as
"none".
2024-03-06 07:45:56 +01:00
Matthew Olsson
1ca31e0dc1 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 07:45:56 +01:00
Matthew Olsson
8bb635bd33 LibWeb: Prevent transform interpolations from failing
Style computation should never fail. Instead, we just ignore the
transformation that led to the invalid matrix.
2024-03-06 07:45:56 +01:00
Matthew Olsson
ae321b2cdf LibWeb: Add interpolation for shadow values 2024-03-03 19:50:25 +01:00
Matthew Olsson
3c21dd4d2b LibWeb: Move color interpolation into a helper function
This will be needed for other interpolations
2024-03-03 19:50:25 +01:00
Matthew Olsson
4d9f2bf5f1 LibWeb: Add interpolation for ratio values 2024-03-03 19:50:25 +01:00
Matthew Olsson
f02cd4d0b0 LibWeb: Add a spec comment for color interpolation 2024-03-03 19:50:25 +01:00
Matthew Olsson
1f88ca2a03 LibWeb: Remove transform interpolation optimization
The property values here will always be StyleValueLists and not
TransformationStyleValues. The handling of interpolation in this case
gets quite a bit more complex, so let's just remove the dead code for
now and attempt this optimization again in the future if it's needed.
2024-03-03 19:50:25 +01:00
Matthew Olsson
c1ab6ca6b4 LibWeb: Do not invalidate elements with animations in the CSS cascade
See the note added to Animation::cancel for more info
2024-03-02 19:58:12 +01:00
Matthew Olsson
ec766e8669 LibWeb: Correctly set @keyframe rule's effect target 2024-03-02 15:36:48 +01:00
Matthew Olsson
6d0672eec0 LibWeb: Implement complex transform interpolation
With this commit, we can interpolate between transforms whose functions
don't match. For example:
    translate(100px) -> scale(2) translateX(50px)
2024-03-02 12:25:53 +01:00
Matthew Olsson
892f407d75 LibWeb: Do not abort interpolation if the StyleValue types differ
This can be perfectly valid, and depends on the property being animated.
For example, interpolating between the StyleValue "none" (an identifier)
and a TransformationStyleValue is perfectly defined.
2024-03-02 12:25:53 +01:00
Matthew Olsson
15942b4262 LibWeb: Revert changing transform's animation-type to by-computed-value
In the upcoming commits where we properly handle transformation
interpolation, it actually becomes easier to change this back to custom,
so lets do that since its more correct anyways.
2024-03-02 12:25:53 +01:00
Matthew Olsson
aca32e298d LibWeb: Expand shorthand properties in CSS @keyframes 2024-02-28 08:05:41 +00:00
Matthew Olsson
0f54d797d2 LibWeb: Handle pre-existing animations when considering animation-name
If a DOM::Element has an animation-name property, then in addition to
remembering where it came from, it will also remember the
Animations::Animation object that was created for it. This allows
StyleComputer to cancel that animation if the animation-name property
changes as well as to apply any changes required (for example, if
animation-play-state changes from "running" to "paused", it needs to
call .pause() on the animation).
2024-02-25 21:12:42 +00:00
Matthew Olsson
b235620315 LibWeb: Pause keyframe animations during creation when necessary 2024-02-25 21:12:42 +00:00
Matthew Olsson
2ee022dead LibWeb: Set KeyframeEffect's pseudo-element if applicable 2024-02-25 21:12:42 +00:00
Shannon Booth
9ce8189f21 Everywhere: Use unqualified AK::URL
Now possible in LibWeb now that there is no longer a Web::URL.
2024-02-25 08:54:31 +01:00
Matthew Olsson
b33bb0997a LibWeb: Move easing parsing code out into a dedicated function
This will be used outside of StyleComputer
2024-02-25 08:51:50 +01:00
Matthew Olsson
c8b9c137a1 LibWeb: Handle discrete properties
This also changes transform's animation-type to by-computed-value. It is
far easier to handle since we switch on StyleValue::type(), and it might
be the case that this applies to all custom animated properties and we
don't need "custom" at all, but let's wait until we get to those
properties to make that decision.
2024-02-25 08:51:50 +01:00
Matthew Olsson
9e0ff9c140 LibWeb: Expose CSS shorthand -> longhand conversion
This conversion needs to be done by KeyframEffect as well
2024-02-25 08:51:50 +01:00
Matthew Olsson
af1f0c673e LibWeb: Remove old animation-direction handling from StyleComputer
This is now handled by Web Animations, so if the animation was ever
running backwards, this logic would re-reverse it so that it played
forwards again.
2024-02-25 08:51:50 +01:00
Matthew Olsson
70ded2ef42 LibGfx: Add Oklab support to Gfx::Color
Interpolation of color on the web is done via the oklab colorspace
2024-02-25 08:51:50 +01:00
Matthew Olsson
4e27d07ff2 LibWeb: Use initial value for animation start if it does not exist
This fixes an issue where a property could not be animated unless the
element had a specified value for that property somewhere in its
styling.
2024-02-23 20:52:37 +01:00
Matthew Olsson
ae3326a447 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-23 20:52:37 +01:00
Aliaksandr Kalenik
623ad94582 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-06 08:39:06 +01:00
Andreas Kling
e7de5cb4d2 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 15:04:06 +01:00
Andreas Kling
f0722671c3 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-12 14:12:04 +01:00