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>
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 :)
We don't yet have generic parsing support for `<filter-value-list>` or
`<paint>`, so listing them here confuses the new StyleValue parsing code
I'm working on. For now, let's skip `<filter-value-list>` since it's
only used in one pkace which manually parses it, and list the parts of
`<paint>` instead which are taken from here:
https://www.w3.org/TR/SVG2/painting.html#SpecifyingPaint
This implements the stop-opacity, fill-opacity, and stroke-opacity
properties (in CSS). This replaces the existing more ad-hoc
fill-opacity attribute handling.
Add functionality to begin parsing grid-template-columns and
grid-template-rows. There are still things to be added, like parsing
functions, but I would say a couple of the major points are already
adressed like length, percentage, and flexible-length.
I believe this is all of them, but I may have missed some.
Several properties technically do not allow negative numbers but the
description says to accept these as valid, and then clamp them
afterwards to the desired range. As such, we don't reject them during
parsing.
This is a change to CSS-TEXT-4, listed here:
https://www.w3.org/TR/2022/WD-css-text-4-20220318/#changes
We don't actually support these properties yet, but it doesn't hurt to
keep them up to date for when they get implemented in the future. :^)
I came across some websites that change an elements CSS "opacity" in
their :hover selectors. That caused us to relayout on hover, which we'd
like to avoid.
With this patch, we now check if a property only affects the stacking
context tree, and if nothing layout-affecting has changed, we only
invalidate the stacking context tree, causing it to be rebuilt on next
paint or hit test.
This makes :hover { opacity: ... } rules much faster. :^)
- background properties
- box-shadow
- cursor
- SVG fill/stroke properties
- image-rendering
- outline properties
- pointer-events
- user-select
This should be basically all of them. I skipped `opacity` and
`transform` since establishing a stacking context feels like a
layout-affecting thing, but I could be very wrong on that!
This patch adds CSS::property_affects_layout(PropertyID) which tells us
whether a CSS property would affect layout if it were changed.
This will be used to avoid unnecessary relayout work when something
changes that really only requires us to repaint the page.
To mark a property as not affecting layout, set "affects-layout" to
false in the corresponding Properties.json entry. Note that all
properties affect layout by default.
