Unlike DOM mutations, CSS animations don't affect the style of the
entire subtree of the element being animated. This means we only have to
recompute style for the animating element, which is significantly
faster than doing the whole subtree.
This takes idle CPU usage on https://shopify.com/ from 100% to 30% on my
(not massively powerful) laptop. :^)
This commit makes the StyleComputer avoid restarting finished animations
(e.g. animations with finite iteration counts that have run to
completion).
As a bonus, it also disables the animation timer when all animations
have finished running.
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>
This allows us to figure out where a specific CSS property comes from,
which is going to be used in a future commit to uniquely identify
running animations.
The comment mentions that zero is let through, but then immediately
errors out if it sees any number outside quirks mode.
This commit makes that check let zeros through.
Fixes the bug that currently we always consider tracks with percentage
size as ones with "fixed" length even when available size is not
definite. With this change tracks with percentage size when available
size is not definite will be considered as "intrinsic" sized.
...and use it for `margin` and `padding`.
So now, if all four margins are 12px, we output "12px" instead of "12px
12px 12px 12px". This matches the spec's requirement to use the smallest
non-ambiguous representation.
Although we translate e.g `block` to `block flow` for internal use in
the engine, CSS-DISPLAY-3 tells us to use the short form in
serializations for compatibility reasons.
This adds 9 points to our score on https://html5test.com/ :^)
Specifically, stop letting NumericStyleValues holding `0` from
pretending to hold a Length. The parser is now smart enough that we
don't have to do this. :^)
We're about to stop letting 0 NumericStyleValues pretend to be Lengths,
so this will break. As noted, the flex-basis property accepts
`<length>` not `<number>` so this is actually correct.
Only NumericStyleValue holds integers.
I'm not sure our current distinction between NumericStyleValue holding
an integer or non-integer is useful given it always returns a float.
:thonk:
Introduces incomplete parsing of grid shorthand property. Only
<grid-template> part of syntax is supported for now but it is enough
to significantly improve rendering of websites that use this shorthand
to define grid :)
If CSS requests a font that we have loaded, but we didn't associate it
with a specific weight and/or slope, let's still use it if it matches
the family name.
This is a hack until we implement proper CSS font selection.
