Commit graph

447 commits

Author SHA1 Message Date
Sam Atkins
fdcece2e88 LibWeb/CSS: Implement legacy name aliases for properties
When a property is a "legacy name alias", any time it is used in CSS or
via the CSSOM its aliased name is used instead.
(See https://drafts.csswg.org/css-cascade-5/#legacy-name-alias)

This means we only care about the alias when parsing a string as a
PropertyID - and we can just return the PropertyID it is an alias for.
No need for a distinct PropertyID for it, and no need for LibWeb to
care about it at all.

Previously, we had a bunch of these properties, which misused our code
for "logical aliases", some of which I've discovered were not even
fully implemented. But with this change, all that code can go away, and
making a legacy alias is just a case of putting it in the JSON. This
also shrinks `StyleProperties` as it doesn't need to contain data for
these aliases, and removes a whole load of `-webkit-*` spam from the
style inspector.
2024-09-27 17:16:23 +01:00
Sam Atkins
dcf55dd492 LibWeb/CSS: Clarify comment about cascading presentational hints
The spec allows us to either treat them as part of the UA origin, or as
its own origin before author styles. This second behaviour turns out to
be what we are currently doing, which is nice!

Funnily enough this was clarified in the spec barely a month after this
original comment was written. :^)
2024-09-26 08:08:38 +02:00
Sam Atkins
bea47a2554 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-26 08:08:38 +02:00
Andreas Kling
9765a733d0 LibWeb: Don't extrapolate transition properties for unknown properties
If we don't recognize a given transition-property value as a known CSS
property (one that we know about, not necessarily an invalid one),
we should not extrapolate the other transition-foo values for it.

Fixes #1480
2024-09-24 21:53:43 +02:00
Aliaksandr Kalenik
74588a0a16 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 20:10:30 +02:00
Andreas Kling
8beb7c7700 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-22 18:42:40 +02:00
Andreas Kling
42a1a0bd73 LibWeb: Put CSS transitions debug spam behind CSS_TRANSITIONS_DEBUG 2024-09-22 10:46:54 +02:00
Sam Atkins
a1fca1a7f3 LibWeb: Start transitions when affected properties change
Co-authored-by: Matthew Olsson <matthewcolsson@gmail.com>
2024-09-22 06:41:55 +02:00
Sam Atkins
e544166977 LibWeb: Parse transition values and cache them on Animatable elements
Co-authored-by: Matthew Olsson <matthewcolsson@gmail.com>
2024-09-22 06:41:55 +02:00
Sam Atkins
70d99db992 LibWeb/CSS: Extract interpolation code into its own files
Apart from shrinking StyleComputer a little, we need the ability to get
the current value of a transition from outside of it.
2024-09-22 06:41:55 +02:00
Andreas Kling
32299e74cb 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 19:20:30 +02:00
Sam Atkins
76daba3069 LibWeb/CSS: Rename CalculatedStyleValue -> CSSMathValue
This matches the name in the CSS Typed OM spec. There's quite a lot
still to do to make it match the spec behavior, but this is the first
step.
2024-09-18 20:38:41 +01:00
Annya
bea7eec518 LibWeb/CSS: Implement revert-layer
With the introduction of the cascade layer, the 5th CSS-wide keyword,
`revert-layer`, has been added.
2024-09-11 22:30:20 +01:00
Andreas Kling
87056ee0d2 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 16:54:40 +02:00
Andreas Kling
d22228ab93 LibWeb: Bail early from doomed pseudo-element style computation
Once we know the final value of the `content` property for a
pseudo-element, we can bail early if the value is `none` or `normal`
(note that `normal` only applies to ::before and ::after).

In those cases, no pseudo-element will be generated, so everything
that follows in StyleComputer would be wasted work.

This noticeably improves performance on many pages, such as
https://tailwindcss.com/ where style updates go from 360ms -> 250ms.
2024-09-10 15:19:55 +02:00
Andreas Kling
e399b472e9 LibWeb: Make CSS::StyleProperties copy-on-write internally
This makes the way we've implemented the CSS `revert` keyword a lot less
expensive.

Until now, we were making a deep copy of all property values at the
start of each cascade origin. (Those are the values that `revert` would
bring us back to if encountered.)

With this patch, the revert property set becomes a shallow copy, and we
only clone the property set if the cascade ends up writing something.

This knocks a 5% profile item down to 1.3% on https://tailwindcss.com
2024-09-10 13:51:28 +02:00
Aliaksandr Kalenik
2aa07e0e65 LibWeb: Do not try to load a font if format detection has failed
Skia is more permissive when it comes to font loading, compared to our
own OpenType implementation, which it has superseded, parsing an invalid
TTF does not result in an error but rather produces a font that is
incorrectly displayed. This change updates the FontLoader to address
this behavior and to stop attempting to parse a font as a last resort
when format detection has failed.

Fixes regression on x.com when text is not displayed introduced in
a9d5a99568
2024-09-10 07:40:25 +02:00
Andreas Kling
ef4f5ac8fb 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 20:12:07 +02:00
Andreas Kling
5bb0f43b90 LibWeb: Bucket :is/where() selectors by tag name and ID as well
Instead of only bucketing these by class name, let's also bucket by
tag name and ID.

Reduces the number of selectors evaluated on https://tailwindcss.com/
from 2.9% to 1.9%.
2024-09-09 20:12:07 +02:00
Andreas Kling
49d2b11085 LibWeb: Remove MatchingRule::contains_root_pseudo_class member
This can be a local variable while building a rule cache, no need to
take up space in MatchingRule.
2024-09-09 20:12:07 +02:00
Andreas Kling
c8f22f65d9 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 20:12:07 +02:00
Andreas Kling
b365a5c42f LibWeb: Bucket div.foo and div#foo as class/ID rather than tag(div)
By bucketing these seletors by class or ID, we can avoid running them
in more cases.

Before, we were only avoiding them if the context element wasn't a div.
Now we avoid them for any element that doesn't have that specific class
or ID.

This reduces the number of selectors ran on https://vercel.com by a bit
more, from 1.90% to 1.65%.
2024-09-09 12:46:55 +02:00
Andreas Kling
ad37c8cd26 LibWeb: Treat :is(.foo) & :where(.foo) as class selectors when bucketing
These are just roundabout ways of writing .foo, so we can still put them
in the rules-by-class bucket and skip running them when the element
doesn't have that class.

Note that :is(.foo .bar) is also bucketed as a class rule, since the
context element must have the `bar` class for the selector to match.

This is a massive speedup on https://vercel.com/ as it cuts the number
of selectors we actually evaluate from 7.0% to 1.9%.
2024-09-09 12:46:55 +02:00
Andreas Kling
ddbfac38b0 LibWeb: Note what's causing a style invalidation to happen
You can now build with STYLE_INVALIDATION_DEBUG and get a debug stream
of reasons why style invalidations are happening and where.

I've rewritten this code many times, so instead of throwing it away once
again, I figured we should at least have it behind a flag.
2024-09-08 09:45:31 +02:00
Andreas Kling
95bd0602ba LibWeb: Keep custom properties from all cascade layers
Before this change, we were cascading custom properties for each layer,
and then replacing any previously cascaded properties for the element
with only the set from this latest layer.

The patch fixes the issue by making each pass of the custom property
cascade add to the same set, and then finally assigning that set of
properties to the element.
2024-09-07 12:37:15 +02:00
Aliaksandr Kalenik
22b8380e37 LibWeb: Include system emoji font in a font cascade list
Adds emoji rendering support on macOS and linux (if it has "Noto Color
Emoji" font).
2024-09-06 08:30:30 -04:00
Aliaksandr Kalenik
67fe8d66b2 LibWeb: Skip font if it doesn't contain needed glyph in FontCascadeList
Before this change, we were only checking for actual glyph containment
in a font if unicode ranges were specified. However that is not
sufficient for emoji support, where we want to continue searching for
a font until one containing emojis is found.
2024-09-06 08:30:30 -04:00
Sam Atkins
a50da405e9 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-06 07:49:55 +02:00
Aliaksandr Kalenik
a9d5a99568 LibGfx+LibWeb: Replace remaining OpenType implementation with Skia
This change should move us forward toward emoji support, as we are no
longer limited by our own OpenType implementation, which was failing
to parse the TrueType Collection format used to store emoji fonts
(at least on macOS).
2024-09-05 19:21:52 +02:00
Aliaksandr Kalenik
db74244fb2 LibWeb: Read header to check if a blob without mime type is WOFF/WOFF2
Currently we rely on parser returning an error if encoded data cannot be
parsed into a valid WOFF or WOFF2 font, which is not going to be true
after switching to Skia that sometimes does not fail even if a data does
not represent a valid font.
2024-09-05 19:21:52 +02:00
Sam Atkins
49b2eb5f51 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-09-03 10:12:07 +01:00
Sam Atkins
8cbc211616 Meta: Make embed_as_string_view.py produce Strings instead
This is only used for CSS style sheets. One case wants it as a String,
and the others don't care, but will in future also want to have the
source as a String.
2024-09-03 10:12:07 +01:00
Sam Atkins
c29f4f69ef LibWeb: Rename Document::for_each_css_style_sheet for clarity
This only iterates style sheets that are in use, so make this clear by
renaming it to `for_each_active_css_style_sheet()`.
2024-09-03 10:12:07 +01:00
Sam Atkins
3af6a69f1e LibWeb: Introduce color-function-specific style values
Instead of CSSColorValue holding a Gfx::Color, make it an abstract class
with subclasses for each different color function, to match the Typed-OM
spec. This means moving the color calculations from the parsing code to
the `to_color()` method on the style value.

This lets us have calc() inside a color function, instead of having to
fully resolve the color at parse time. The canvas fillStyle tests have
been updated to reflect this.

The other test change is Screenshot/css-color-functions.html: previously
we produced slightly different colors for an alpha of 0.5 and one of
50%, and this incorrect behavior was baked into the test. So now it's
more correct. :^)
2024-08-21 10:51:48 +01:00
Sam Atkins
37ea4e3b5f LibWeb: Rename CSSColorValue::create() to create_from_color()
Soon, CSSColorValue will be an abstract class, and we'll instead create
a CSSRGB, CSSHSL, or other specific color type from the Typed-OM spec.
However, it's still useful to have an easy "just give me a style value
for this color" method. So change the name to distinguish this from the
usual StyleValue::create() methods.
2024-08-21 10:51:48 +01:00
Sam Atkins
4e48afd9a7 LibWeb: Store ShadowStyleValue's color as a StyleValue
Colors can be specified in a way that `Gfx::Color` can't represent, such
as named system colors, `currentColor`, or functions involving `calc()`.
2024-08-21 10:51:48 +01:00
Sam Atkins
581d00293c LibWeb: Rename ColorStyleValue -> CSSColorValue
This matches the name in the CSS Typed OM spec.
https://drafts.css-houdini.org/css-typed-om-1/#csscolorvalue

This is not (yet) the same as the CSSColorValue, but one step at a time.
2024-08-21 10:51:48 +01:00
Sam Atkins
f518811f73 LibWeb: Use CSSKeywordValue for CSS-wide keywords
We previously had 4 single-instance StyleValues for these keywords.
CSS-Typed-OM expects them keywords to be exposed as CSSKeywordValue, so
it's simpler to treat them the same. The single-instance behaviour is
kept by having StyleValue::create() use a cached instance for each of
these.
2024-08-15 13:58:38 +01:00
Sam Atkins
6a74b01644 LibWeb: Rename "identifier" and "ValueID" to "Keyword" where correct
For a long time, we've used two terms, inconsistently:
- "Identifier" is a spec term, but refers to a sequence of alphanumeric
  characters, which may or may not be a keyword. (Keywords are a
  subset of all identifiers.)
- "ValueID" is entirely non-spec, and is directly called a "keyword" in
  the CSS specs.

So to avoid confusion as much as possible, let's align with the spec
terminology. I've attempted to change variable names as well, but
obviously we use Keywords in a lot of places in LibWeb and so I may
have missed some.

One exception is that I've not renamed "valid-identifiers" in
Properties.json... I'd like to combine that and the "valid-types" array
together eventually, so there's no benefit to doing an extra rename
now.
2024-08-15 13:58:38 +01:00
Sam Atkins
9559f0f123 LibWeb: Rename IdentifierStyleValue -> CSSKeywordValue
This matches the name in the CSS Typed OM spec.
https://drafts.css-houdini.org/css-typed-om-1/#csskeywordvalue
2024-08-15 13:58:38 +01:00
Sam Atkins
0e3487b9ab 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-15 13:58:38 +01:00
Andreas Kling
a10610a1ca LibWeb: Don't crash on CSS all: revert
Not every value in a StyleProperties will be non-null by the time we
perform `revert`, so let's make a specialized function for reverting a
property instead of using the path that requires the value to be
non-null.
2024-08-04 11:49:44 +02:00
Andreas Kling
b42b7c8dd0 LibWeb: Use bitmaps for important/inherited bits in StyleProperties
This avoids padding the style value array, shrinking StyleProperties
from 4368 bytes to 2288 bytes per instance.
2024-08-02 20:37:40 +02:00
Andreas Kling
c288bfb404 LibWeb: Only remember source CSSStyleDeclaration for animation-name
We were saving to source declarations for *every* property, even though
we only ever looked it up for animation-name.

This patch gets rid of the per-property source pointer and we now keep
a single pointer to the animation-name source only.

This shrinks StyleProperties from 6512 bytes to 4368 bytes per instance.
2024-08-02 20:37:40 +02:00
Aliaksandr Kalenik
4049cce40c LibWeb: Add slots for pseudo-elements animation cache in Animatable
Fixes the bug when animation does not run at all if an element has a
pseudo-element, because both of them use the same cache.
2024-08-02 08:05:31 +02:00
Andreas Kling
4c326fc5f6 LibWeb: Implement :host and :host(<compound-selector>) selector matching
The :host family of pseudo class selectors select the shadow host
element when matching against a rule from within the element's shadow
tree.

This is a bit convoluted due to the fact that the document-level
StyleComputer keeps track of *all* style rules, and not just the
document-level ones.

In the future, we should refactor style storage so that shadow roots
have their own style scope, and we can simplify a lot of this.
2024-07-23 18:03:46 +02:00
Aliaksandr Kalenik
2ead999f2b LibGfx+LibWeb: Remove typeface classes for WOFF fonts
This change removes wrappers inherited from Gfx::Typeface for WOFF and
WOFF2 fonts. The only purpose they served is owning of ttf ByteBuffer
produced by decoding a WOFF/WOFF2 font. Now new FontData class is
responsible for holding ByteBuffer when a font is constructed from
non-externally owned memory.
2024-07-22 15:05:04 +02:00
Sam Atkins
9fb44cb057 LibWeb/CSS: Make StringStyleValue hold a FlyString
We already have a FlyString of its value from parsing, and most users
also want a FlyString from it, so let's use that instead of converting
backwards and forwards.

The two users that did want a String are:
- Quotes, which make sense as FlyString instead, so I've converted that.
- Animation names, which should probably be FlyString too, but the code
  currently also allows for other kinds of StyleValue, and I don't want
  to dive into this right now to figure out if that's needed or not.
2024-07-17 15:08:44 +01:00
Colin Reeder
5c315b532e LibWeb: Add more legacy -webkit- aliases 2024-07-15 15:45:33 +01:00
Aliaksandr Kalenik
c09b5b8df0 LibGfx+LibWeb: Rename Gfx::WOFF2::Font to Gfx::WOFF2::Typeface
It's a leftover from VectorFont -> Typeface renaming
2024-07-13 09:31:02 +02:00