CSS transitions on object-position don't work

• Component: Animations
• Status: RESOLVED FIXED

[Tim Nguyen (:ntim)]

Testcase URL:

data:text/html,<style>img { width: 100px; height: 100px; object-fit: cover; object-position: center; transition: all 0.3s;} img:hover {object-position: left }</style><img src="https://placekitten.com/g/600/300">

Latest Firefox & Chrome work properly.

[Radar WebKit Bug Importer]

<rdar://problem/75699374>

[Antoine Quint]

This would be an easy fix adding a new animation wrapper for CSSPropertyObjectPosition similar to the LengthVariantPropertyWrapper<LengthSize> wrappers but for LengthPoint.

I see there is no existing WPT test for interpolation of object-position, so we should add one similar to the background-position test at https://wpt.fyi/results/css/css-backgrounds/animations/background-position-interpolation.html.

[Tim Nguyen (:ntim)]

Created attachment 424344 [details]
Patch

[Tim Nguyen (:ntim)]

Created attachment 424358 [details]
Patch

[EWS Watchlist]

This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess

[Tim Nguyen (:ntim)]

Created attachment 424367 [details]
Patch

[Tim Nguyen (:ntim)]

https://github.com/web-platform-tests/wpt/pull/28262

[Antoine Quint]

Comment on attachment 424367 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=424367&action=review

> Source/WebCore/animation/CSSPropertyAnimation.cpp:773
> +static bool canInterpolateLengthPoints(const LengthPoint& from, const LengthPoint& to)
> +{
> +    bool isLengthPercentage = true;
> +    return canInterpolateLengths(from.x(), to.x(), isLengthPercentage)
> +        && canInterpolateLengths(from.y(), to.y(), isLengthPercentage);
> +}

I think you can put this logic straight in the canInterpolate() override. That said, maybe this can simply be ommitted, or are there cases where the values cannot be interpolated? The WPT test doesn't test any case where interpolation between two valid values doesn't happen.

[Tim Nguyen (:ntim)]

Created attachment 424371 [details]
Patch

[EWS]

Committed r275104: <https://commits.webkit.org/r275104>

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