When interpolating between transform lists partial prefix matches should not use matrix interpolation

• Component: CSS
• Status: RESOLVED FIXED

[Martin Robinson]

When interpolating between two transform lists that have a match prefix, for instance:

from transform: translateX(25px) rotate(25deg)
to tranform: translateX(100px)

The match prefix should blend together directly and the rest of the list should be blended using matrix interpolation. This especially comes into play when doing multiple rotations around an axis.

[Radar WebKit Bug Importer]

<rdar://problem/88477922>

[Martin Robinson]

The tricky thing here is mapping the CSS model onto CoreAnimation. For the TextureMapper there isn't an issue because animations are done by calling directly into TransformOperations::blend at each animation tick. On the CoreAnimation side, animations are constructed by stepping through the index of each transform function and constructing an animation for this function across all keyframes.

This will need to change, because the CSS specification only considers interpolation between any two frames. So for instance in this case:

Keyframe 1: translate(...) rotate(...) perspective(...)
Keyframe 2: translate(...) scale(...) translate(...)
Keyframe 3: translate(...) scale(...) rotate(...)

Between keyframe 1 and 2 the computed operations should use the following set of operations (with interpolated arguments):

translate(...) matrix(...)

where matrix is a matrix decomposition and interpolation of the remaining functions. Yet between keyframe 2 and 3 the computed operations are:

translate(...) scale(...) matrix(...)

An option is to only break out transform functions shared across all frames and then use matrix interpolation for the rest. The issue is that this still has the potential to lose full rotations where the specification says we shouldn't, also meaning the displayed contents will be different than the CSS computed values.

[Martin Robinson]

I've decided to split the easier part of this issue of into bug 222595 which only handles prefix matches with lists of different lengths and not suffixes that do not match.

[Simon Fraser (smfr)]

(In reply to Martin Robinson from comment #0)
> When interpolating between two transform lists that have a match prefix, for
> instance:
> 
> from transform: translateX(25px) rotate(25deg)
> to tranform: translateX(100px)
> 
> The match prefix should blend together directly and the rest of the list
> should be blended using matrix interpolation. This especially comes into
> play when doing multiple rotations around an axis.
 
I see this in the CSS Transforms 1 spec[1], but not the level 2 spec [2]. When does "blend the rest as a matrix" happen, and when does "blend with the equivalent identify function" happen?

[1] https://www.w3.org/TR/css-transforms-1/#interpolation-of-transforms
[2] https://www.w3.org/TR/css-transforms-2/#interpolation-of-transform-functions

[Martin Robinson]

(In reply to Simon Fraser (smfr) from comment #4)
> (In reply to Martin Robinson from comment #0)
> > When interpolating between two transform lists that have a match prefix, for
> > instance:
> > 
> > from transform: translateX(25px) rotate(25deg)
> > to tranform: translateX(100px)
> > 
> > The match prefix should blend together directly and the rest of the list
> > should be blended using matrix interpolation. This especially comes into
> > play when doing multiple rotations around an axis.
>  
> I see this in the CSS Transforms 1 spec[1], but not the level 2 spec [2].
> When does "blend the rest as a matrix" happen, and when does "blend with the
> equivalent identify function" happen?

It's true that the specification doesn't say this explicitly, but it's implied in the next section which discusses accumulation of transform lists:

"Accumulation of two transform lists Va and Vb follows the same steps as interpolation with regards to matching transform functions including padding lists with identity transform functions, converting none to an identity transform function, and converting both arguments to matrices as necessary (see CSS Transforms 1 § 11 Interpolation of Transforms)."

Perhaps this is a specification bug?

[Martin Robinson]

Created attachment 452723 [details]
Patch

[Martin Robinson]

Created attachment 452849 [details]
Patch

[EWS]

Committed r290667 (247939@main): <https://commits.webkit.org/247939@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 452849 [details].

[Antoine Quint]

*** Bug 235800 has been marked as a duplicate of this bug. ***

[Antoine Quint]

*** Bug 235780 has been marked as a duplicate of this bug. ***

[Antoine Quint]

*** Bug 235805 has been marked as a duplicate of this bug. ***