Bug 223568 - CSS transitions on object-position don't work
Summary: CSS transitions on object-position don't work
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Safari 14
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Tim Nguyen (:ntim)
URL:
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:


Attachments
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
<rdar://problem/75699374>
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]
Patch
Comment 4 Tim Nguyen (:ntim) 2021-03-26 08:35:17 PDT
Created attachment 424358 [details]
Patch
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]
Patch
Comment 7 Tim Nguyen (:ntim) 2021-03-26 09:56:41 PDT
https://github.com/web-platform-tests/wpt/pull/28262
Comment 8 Antoine Quint 2021-03-26 09:58:22 PDT
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.
Comment 9 Tim Nguyen (:ntim) 2021-03-26 10:17:07 PDT
Created attachment 424371 [details]
Patch
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].