Bug 223568

Summary: CSS transitions on object-position don't work
Product: WebKit Reporter: Tim Nguyen (:ntim) <ntim>
Component: AnimationsAssignee: Tim Nguyen (:ntim) <ntim>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, clopez, dino, ews-watchlist, graouts, graouts, simon.fraser, webkit-bug-importer, youennf
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 122811    
Attachments:
Description Flags
Patch
none
Patch
none
Patch
none
Patch none

Tim Nguyen (:ntim)
Reported 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.
Attachments
Patch (4.22 KB, patch)
2021-03-26 06:11 PDT, Tim Nguyen (:ntim) 		no flags
DetailsFormatted DiffDiff
Patch (7.38 KB, patch)
2021-03-26 08:35 PDT, Tim Nguyen (:ntim) 		no flags
DetailsFormatted DiffDiff
Patch (20.59 KB, patch)
2021-03-26 09:52 PDT, Tim Nguyen (:ntim) 		no flags
DetailsFormatted DiffDiff
Patch (20.16 KB, patch)
2021-03-26 10:17 PDT, Tim Nguyen (:ntim) 		no flags
DetailsFormatted DiffDiff
Show Obsolete (3) View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-03-22 11:09:01 PDT
<rdar://problem/75699374>
Antoine Quint
Comment 2 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.
Tim Nguyen (:ntim)
Comment 3 2021-03-26 06:11:01 PDT
Created attachment 424344 [details] Patch
Tim Nguyen (:ntim)
Comment 4 2021-03-26 08:35:17 PDT
Created attachment 424358 [details] Patch
EWS Watchlist
Comment 5 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
Tim Nguyen (:ntim)
Comment 6 2021-03-26 09:52:19 PDT
Created attachment 424367 [details] Patch
Tim Nguyen (:ntim)
Comment 7 2021-03-26 09:56:41 PDT
https://github.com/web-platform-tests/wpt/pull/28262
Antoine Quint
Comment 8 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.
Tim Nguyen (:ntim)
Comment 9 2021-03-26 10:17:07 PDT
Created attachment 424371 [details] Patch
EWS
Comment 10 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].
Note You need to log in before you can comment on or make changes to this bug.