Bug 223568 - CSS transitions on object-position don't work
Summary: CSS transitions on object-position don't work
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 14
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Tim Nguyen (:ntim)
Keywords: InRadar
Depends on:
Blocks: 122811
  Show dependency treegraph
Reported: 2021-03-22 02:05 PDT by Tim Nguyen (:ntim)
Modified: 2021-03-26 10:58 PDT (History)
9 users (show)

See Also:

Patch (4.22 KB, patch)
2021-03-26 06:11 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff
Patch (7.38 KB, patch)
2021-03-26 08:35 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff
Patch (20.59 KB, patch)
2021-03-26 09:52 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff
Patch (20.16 KB, patch)
2021-03-26 10:17 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Tim Nguyen (:ntim) 2021-03-22 02:05:43 PDT
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.
Comment 1 Radar WebKit Bug Importer 2021-03-22 11:09:01 PDT
Comment 2 Antoine Quint 2021-03-25 02:52:05 PDT
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.
Comment 3 Tim Nguyen (:ntim) 2021-03-26 06:11:01 PDT
Created attachment 424344 [details]
Comment 4 Tim Nguyen (:ntim) 2021-03-26 08:35:17 PDT
Created attachment 424358 [details]
Comment 5 EWS Watchlist 2021-03-26 08:36:34 PDT
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
Comment 6 Tim Nguyen (:ntim) 2021-03-26 09:52:19 PDT
Created attachment 424367 [details]
Comment 7 Tim Nguyen (:ntim) 2021-03-26 09:56:41 PDT
Comment 8 Antoine Quint 2021-03-26 09:58:22 PDT
Comment on attachment 424367 [details]

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.
Comment 9 Tim Nguyen (:ntim) 2021-03-26 10:17:07 PDT
Created attachment 424371 [details]
Comment 10 EWS 2021-03-26 10:58:37 PDT
Committed r275104: <https://commits.webkit.org/r275104>

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