Commit graph

106 commits

Author SHA1 Message Date
Callum Law
cfc8d3031b LibWeb: Map logical aliases at cascade time
Previously we would incorrectly map these in
`CSSStyleProperties::convert_declarations_to_specified_order`, aside
from being too early (as it meant we didn't maintain them as distinct
from their physical counterparts in CSSStyleProperties), this meant
that we didn't yet have the required context to map them correctly.

We now map them as part of the cascade process. To compute the mapping
context we do a cascade without mapping, and extract the relevant
properties (writing-direction and direction).
2025-06-23 15:19:07 +01:00
Callum Law
4e87f85458 LibWeb: Convert logical property shorthands to full-fledged shorthands
No functionality changes. This is just prep work for later commits
around moving logical alias mapping to cascade time
2025-06-23 15:19:07 +01:00
Callum Law
12581fa995 LibWeb: Resolve conflicts in compute_keyframe_values correctly
As conflict resolution depends on whether the property was set directly
or via a shorthand, we have to store the non-expanded values in the
resolved keyframe properties.
2025-06-23 15:19:07 +01:00
Gingeh
e96338dd63 LibWeb: Don't play initially-paused animations
Some checks are pending
CI / macOS, arm64, Sanitizer_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Fuzzers_CI, Clang (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, GNU (push) Waiting to run
CI / Linux, x86_64, Sanitizer_CI, Clang (push) Waiting to run
Package the js repl as a binary artifact / macOS, arm64 (push) Waiting to run
Package the js repl as a binary artifact / Linux, x86_64 (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
2025-06-18 17:17:29 +02:00
Tim Ledbetter
28b24b72bc LibWeb: Don't resolve flow-relative values for float too early
This allows `getComputedStyle()` to return the correct value if `float`
is set to `inline-start` or `inline-end`
2025-06-17 09:26:26 +02:00
Callum Law
3c6b8d5a2c LibWeb: Propagate CSS-wide keyword to transition longhands
Previously we would treat CSS-wide keywords as equivalent to "none"
2025-06-16 12:37:40 +01:00
Callum Law
64d79d4c3f LibWeb: Avoid overwriting resolved values in compute_keyframe_values
When we have an unresolved value for a shorthand (e.g. `border-style:
var(--border-style)`, `keyframe_values` will contain an
`UnresolvedStyleValue` for the shorthand and
`PendingSubstitutionStyleValue`s for each of it's longhands.

When we come across the shorthand's `UnresolvedStyleValue` we will
resolve the value and set all of the relevant longhands.

If the longhand's `PendingSubstitutionStyleValue` was processed after
(which isn't always the case as the iteration order depends on a
HashMap) would overwrite the correctly resolved longhand.

To avoid this we just skip any `PendingSubstitutionStyleValue`s we come
across and rely on the resolution of the shorthand to set those
properties.

Resolves a crash @tcl3 was experiencing when adding a new
"border-image-repeat" property.
2025-06-13 17:06:00 +02:00
Callum Law
d31a58a7d6 LibWeb: Add support for the 'all' CSS property
The "longhands" array is populated in the code generator to avoid the
overhead of manually maintaining the list in Properties.json

There is one subtest that still fails in
'cssstyledeclaration-csstext-all-shorthand', this is related to
us not maintaining the relative order of CSS declarations for custom vs
non-custom properties.
2025-06-12 15:25:35 +01:00
Andreas Kling
ea0bfda1b9 LibWeb: Cache the font in StyleComputer::initial_font()
This function is bogus, but it's still getting called a lot during media
query evaluation, so let's at least cache the font instead of recreating
it every single time.
2025-06-11 16:25:42 +02:00
Aliaksandr Kalenik
4b4d960cba LibWeb: Cancel previous animation if new animation-name is "none"
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macOS, macos-15, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, Linux, blacksmith-16vcpu-ubuntu-2404, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, Linux, blacksmith-16vcpu-ubuntu-2404, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, Linux, blacksmith-16vcpu-ubuntu-2404, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macOS, macOS-arm64, macos-15) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, Linux, Linux-x86_64, blacksmith-8vcpu-ubuntu-2404) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
"none" value should be interpreted as "no animation" to trigger the path
that cancels previous animation if it exists.
2025-06-01 05:02:12 +02:00
Aliaksandr Kalenik
3178679f0b LibWeb: Implement CSS transitions support for pseudo elements
We already had all necessary things for pseudo elements support in place
except ability to save transition properties in Animatable. This commit
adds the missing part.
2025-05-30 15:48:16 +02:00
Aliaksandr Kalenik
36a255eedd LibWeb: Fix glitchy CSS transitions
`start_needed_transitions()` decides which animations need to be started
based on previous and current style property values. Before this change,
we were using the style value without animations applied as the
"current" value. This caused issues such as starting a new transition
from the animation’s end value when an ongoing animation was
interrupted.
2025-05-28 17:35:59 +01:00
Tim Ledbetter
b16f34767e LibWeb: Ensure discrete interpolated properties are non-transitionable
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macOS, macos-15, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, Linux, blacksmith-16vcpu-ubuntu-2404, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, Linux, blacksmith-16vcpu-ubuntu-2404, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, Linux, blacksmith-16vcpu-ubuntu-2404, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macOS, macOS-universal2, macos-15) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, Linux, Linux-x86_64, blacksmith-8vcpu-ubuntu-2404) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
If a property is uses discrete interpolation and TransitionBehavior is
not set to `AllowDiscrete` that property should be non-transitionable.

This is now true for properties whose animation type is not discrete,
but the animation type falls back to discrete.
2025-05-27 13:33:29 +02:00
Veeti Paananen
7c4fd9f624 LibWeb/CSS: Use case insensitive tag and attribute name in ancestor hash
Fixes #4793.
2025-05-21 08:54:40 -04:00
Sam Atkins
eec4365542 LibWeb/CSS: Extract SerializationMode into its own header
Prep for using this to serialize dimension types, and perhaps other
things in the future.
2025-05-17 07:53:24 +01:00
Sam Atkins
870f24f181 LibWeb/CSS: Add basic implementation of CSSMarginRule
This is a bit under-specced, specifically there's no definition of
CSSMarginDescriptors so I've gone with CSSStyleProperties for now. Gets
us 17 WPT subtests.
2025-05-16 11:01:39 +01:00
Sam Atkins
aaf07ae30d LibWeb: Add basic implementation of @page
This doesn't support selectors, and the only descriptors for now are for
margins.
2025-05-15 09:53:29 +01:00
Sam Atkins
73fa567e7a LibWeb/CSS: Remove now-unused AllowUnresolved enum
Some checks are pending
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (arm64, macos-15, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (x86_64, ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
This mechanism has been replaced with PendingSubstitutionValues.
2025-05-14 11:46:47 +01:00
Sam Atkins
4edafb35cd LibWeb/CSS: Use PendingSubstitutionValue for unresolved shorthands
Previously, we would just assign the UnresolvedStyleValue to each
longhand, which was completely wrong but happened to work if it was a
ShorthandStyleValue (because that's basically a list of "set property X
to Y", and doesn't care which property it's the value of).

For example, the included `var-in-margin-shorthand.html` test would:
1. Set `margin-top` to `var(--a) 10px`
2. Resolve it to `margin-top: 5px 10px`
3. Reject that as invalid

What now happens is:
1. Set `margin-top` to a PendingSubstitutionValue
2. Resolve `margin` to `5px 10px`
3. Expand that out into its longhands
4. `margin-top` is `5px` 🎉

In order to support this, `for_each_property_expanding_shorthands()` now
runs the callback for the shorthand too if it's an unresolved or
pending-substitution value. This is so that we can store those in the
CascadedProperties until they can be resolved - otherwise, by the time
we want to resolve them, we don't have them any more.

`cascade_declarations()` has an unfortunate hack: it tracks, for each
declaration, which properties have already been given values, so that
it can avoid overwriting an actual value with a pending one. This is
necessary because of the unfortunate way that CSSStyleProperties holds
expanded longhands, and not just the original declarations. The spec
disagrees with itself about this, but we do need to do that expansion
for `element.style` to work correctly. This HashTable is unfortunate
but it does solve the problem until a better solution can be found.
2025-05-14 11:46:47 +01:00
Sam Atkins
59e8a669de LibWeb/CSS: Unify code in StyleComputer::cascade_declarations() 2025-05-14 11:46:47 +01:00
Sam Atkins
804c1eeeed LibWeb/CSS: Remove double set_property_expanding_shorthands() call
If `value` was UnresolvedStyleValue, we'd attempt to `set_property...()`
with its resolved value, then call that again with the original
UnresolvedStyleValue. For any other kind of `value`, we'd simply call
call `set_property...()` twice with the same parameters.
2025-05-14 11:46:47 +01:00
Sam Atkins
475788732f LibWeb/CSS: Remove outdated FIXME
This method no longer sets anything to `initial`.
2025-05-14 11:46:47 +01:00
Timothy Flynn
7280ed6312 Meta: Enforce newlines around namespaces
This has come up several times during code review, so let's just enforce
it using a new clang-format 20 option.
2025-05-14 02:01:59 -06:00
Sam Atkins
9e2e796f2d LibWeb/CSS: Use CSS::URL for font-fetching
ParsedFontFace and FontLoader now both keep track of which
CSSStyleSheet (if any) was the source of the font-face, so the URLs can
be completed correctly.
2025-05-03 12:01:43 +01:00
Sam Atkins
ffc01626f7 LibWeb/CSS: Load fonts using fetch
Convert FontLoader to use fetch_a_style_resource(). ResourceLoader used
to keep its downloaded data around for us, but fetch doesn't, so we use
Gfx::Typeface::try_load_from_temporary_memory() so that the font has a
permanent copy of that data.
2025-05-03 12:01:43 +01:00
Sam Atkins
6b762331df LibGfx: Rename WOFF[2]::try_load_from_externally_owned_memory()
Typeface::try_load_from_externally_owned_memory() relies on that
external owner keeping the memory around. However, neither WOFF nor
WOFF2 do so - they both create separate ByteBuffers to hold the TTF
data. So, rename them to make it clearer that they don't have any
requirements on the byte owner.
2025-05-03 12:01:43 +01:00
Tim Ledbetter
542c3cbe51 LibWeb: Implement the transition-behavior CSS property
This specifies whether transitions should be started for transitions
whose animation behavior is discrete.
2025-05-02 11:07:19 +01:00
Tim Ledbetter
fc1026984c LibWeb: Don't crash when processing a transition with value none 2025-04-24 00:00:23 +02:00
Tim Ledbetter
7a391f419a LibWeb: Handle single value properties when normalizing transition lists
Previously, if a transition property was not wrapped in a list, it
would be replaced with the default value in
`StyleComputer::compute_transitioned_properties`.
2025-04-23 21:02:59 +01:00
Aliaksandr Kalenik
8e2d1559ec LibGfx: Join ScaledFont into Font
Since ScaledFont is the only class inherited from Font we could simply
merge them.
2025-04-21 09:51:16 +02:00
Shannon Booth
3e17b1c9ae LibWeb: Make Node::parent_element return GC::Ptr
This is useful for people like myself who run with debug mode to
more reliably get stacktraces without spinning up a debugger.
2025-04-18 10:49:02 +02:00
Andreas Kling
e1777f6e79 LibWeb: Make :hover invalidation logic reusable for all pseudo classes
We achieve this by keeping track of all checked pseudo class selectors
in the SelectorEngine code. We also give StyleComputer per-pseudo-class
rule caches.
2025-04-17 19:45:55 +02:00
Andreas Kling
ed35f9e7c2 LibWeb: Remove unused MatchingRule::must_be_hovered flag
This was a vestige from an earlier version of hover selector work
avoidance optimizations.
2025-04-17 19:45:55 +02:00
Andrew Kaster
be2dd91289 LibGfx+LibWeb: Store Typeface and Font-related types in RefPtr to const 2025-04-16 10:41:44 -06:00
Andrew Kaster
6d11414957 LibWeb: Make storage of CSS::StyleValues const-correct
Now we consistently use `RefPtr<StyleValue const>` for all StyleValues.
2025-04-16 10:41:44 -06:00
Sam Atkins
c82f4b46a2 LibWeb/CSS: Qualify uses of LibURL
To prepare for introducing a CSS::URL type, we need to qualify any use
of LibURL as `::URL::foo` instead of `URL::foo` so the compiler doesn't
get confused.

Many of these uses will be replaced, but I don't want to mix this in
with what will likely already be a large change.
2025-04-09 18:45:57 +01:00
Sam Atkins
9cce791424 LibWeb/CSS: Only attempt to load valid @font-face fonts
These must have a `font-family` and `src` set to be included in
font-matching. Otherwise they should be ignored, but still exist in the
CSSOM.
2025-04-04 10:40:32 +01:00
Andreas Kling
ba030f0363 LibWeb: Add an engine-internal CSS realm for internal style parsing
This is used for default UA style right now, and we'll expand its use in
the near future.

Note that this required teaching the CSS parser to handle url()
functions when there's no document URL to resolve them against. If we
don't handle that, namespace rules in UA style don't parse correctly.
2025-03-25 23:57:00 +00:00
Sam Atkins
9e65291ebd LibWeb/CSS: Discard unsupported style properties on pseudo-elements
Quite simply, ignore any declarations for properties we don't want,
while computing a pseudo-element's style.

I've imported a WPT test for this, which fails without this patch.
2025-03-24 09:49:50 +00:00
Sam Atkins
0ed2e71801 LibWeb/CSS: Move and rename PseudoElement types to prep for code gen
The upcoming generated types will match those for pseudo-classes: A
PseudoElementSelector type, that then holds a PseudoElement enum
defining what it is. That enum will be at the top level in the Web::CSS
namespace.

In order to keep the diffs clearer, this commit renames and moves the
types, and then a following one will replace the handwritten enum with
a generated one.
2025-03-24 09:49:50 +00:00
Sam Atkins
83bb92c4e0 LibWeb/CSS: Merge style declaration subclasses into CSSStyleProperties
We previously had PropertyOwningCSSStyleDeclaration and
ResolvedCSSStyleDeclaration, representing the current style properties
and resolved style respectively. Both of these were the
CSSStyleDeclaration type in the CSSOM. (We also had
ElementInlineCSSStyleDeclaration but I removed that in a previous
commit.)

In the meantime, the spec has changed so that these should now be a new
CSSStyleProperties type in the CSSOM. Also, we need to subclass
CSSStyleDeclaration for things like CSSFontFaceRule's list of
descriptors, which means it wouldn't hold style properties.

So, this commit does the fairly messy work of combining these two types
into a new CSSStyleProperties class. A lot of what previously was done
as separate methods in the two classes, now follows the spec steps of
"if the readonly flag is set, do X" instead, which is hopefully easier
to follow too.

There is still some functionality in CSSStyleDeclaration that belongs in
CSSStyleProperties, but I'll do that next. To avoid a huge diff for
"CSSStyleDeclaration-all-supported-properties-and-default-values.txt"
both here and in the following commit, we don't apply the (currently
empty) CSSStyleProperties prototype yet.
2025-03-19 13:53:00 +00:00
Tim Ledbetter
e011ddd368 LibWeb/CSS: Parse border-block-* properties
This doesn't currently honor `writing-mode`, `direction` and
`text-orientation`.
2025-03-14 16:09:10 +00:00
Tim Ledbetter
cd1bba353a LibWeb/CSS: Parse border-inline-* properties
This doesn't currently honor `writing-mode`, `direction` and
`text-orientation`.
2025-03-14 16:09:10 +00:00
Andreas Kling
02a642b87b LibWeb: Prevent infinitely growing font size due to rem units in root
A font-size with rem units need to resolve against the default font
metrics for the root element, otherwise every time we compute style,
the reference value for rem units grows.

This fixes an issue where text on some web pages would grow every time
there was a relayout. This was very noticeable on https://proton.me/

Fixes #339
2025-03-05 22:46:06 +01:00
Aliaksandr Kalenik
b92a8553c7 LibWeb: Cancel animations when element is moved in display none subtree
We already have logic to play or cancel animations in an element's
subtree when the display property changes to or from none. However,
this was not sufficient to cover the case when an element starts/stops
being nested in display none after insertion.
2025-03-04 18:06:46 +01:00
Andreas Kling
b4e47f198a LibWeb: Implement time-traveling inheritance for CSS font-size
Some checks are pending
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
When setting `font-family: monospace;` in CSS, we have to interpret
the keyword font sizes (small, medium, large, etc) as slightly smaller
for historical reasons. Normally the medium font size is 16px, but
for monospace it's 13px.

The way this needs to behave is extremely strange:
When encountering `font-family: monospace`, we have to go back and
replay the CSS cascade as if the medium font size had been 13px all
along. Otherwise relative values like 2em/200%/etc could have gotten
lost in the inheritance chain.

We implement this in a fairly naive way by explicitly checking for
`font-family: monospace` (note: it has to be *exactly* like that,
it can't be `font-family: monospace, Courier` or similar.)
When encountered, we simply walk the element ancestors and re-run the
cascade for the font-size property. This is clumsy and inefficient,
but it does work for the common cases.

Other browsers do more elaborate things that we should eventually care
about as well, such as user-configurable font settings, per-language
behavior, etc. For now, this is just something that allows us to handle
more WPT tests where things fall apart due to unexpected font sizes.

To learn more about the wonders of font-size, see this blog post:
https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/
2025-02-25 23:55:36 +01:00
Andreas Kling
263e58bbe9 LibWeb: Only calculate parent size once in compute_font_for_style_values 2025-02-25 23:55:36 +01:00
InvalidUsernameException
f7276bfab3 LibWeb: Reduced number of recompiled files for CSS property headers
Some checks are pending
CI / Lagom (x86_64, Sanitizer_CI, false, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (arm64, Sanitizer_CI, false, macos-15, macOS, Clang) (push) Waiting to run
CI / Lagom (x86_64, Fuzzers_CI, false, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (x86_64, Sanitizer_CI, true, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Label PRs with merge conflicts / auto-labeler (push) Waiting to run
Push notes / build (push) Waiting to run
This reduces the number of `.cpp` files that need to be recompiled when
one of the below header files changes as follows:

CSS/ComputedProperties.h: 1113 -> 49
CSS/ComputedValues.h: 1120 -> 209
2025-02-23 10:14:39 -05:00
Aliaksandr Kalenik
0ab61a94d7 LibWeb: Bucket hover rules using RuleCache
Analysis of selectors on modern websites shows that the `:hover`
pseudo-class is mostly used in the subject position within relatively
simple selectors like `.a:hover`. This suggests that we could greatly
benefit from segregating them by id/class/tag name, this way reducing
number of selectors tested during hover style invalidation.

With this change, hover invalidation on Discord goes down from 70ms to
3ms on my machine. I also tested GMail and GitHub where this change
shows nice 2x-3x speedup.
2025-02-22 10:12:24 +01:00
Aliaksandr Kalenik
ff8826d582 LibWeb: Prepare RuleCache for being reusable to store hover rules
Moves code that allows to add and iterate over rules in cache into
methods defined for RuleCache.
2025-02-22 10:12:24 +01:00