Bug 232361

Summary: [CSS transition] can't use CSS logical properties in transition syntax
Product: WebKit Reporter: Paul Li <meistudioli>
Component: AnimationsAssignee: Antoine Quint <graouts>
Status: RESOLVED FIXED    
Severity: Normal CC: dino, graouts, graouts, koivisto, ntim, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Mac (Intel)   
OS: macOS 11   
Bug Depends on:    
Bug Blocks: 236078    
Attachments:
Description Flags
sample code for this issue
none
Patch none

Paul Li
Reported 2021-10-26 19:45:48 PDT
Created attachment 442557 [details] sample code for this issue Steps to reproduce the problem 1. Set CSS logical properties > "inline-size" for element's size. 2. Add CSS transition syntax for logical properties. Such as "transition: inline-size 200ms ease;" What is the expected behavior? 1. element should have animation effect when "inline-size" changed. What went wrong? 1. element just "jump" to final "inline-size" value without animation effect. Sample code: <style> .test-target { inline-size: 300px; block-size: 300px; background-color: rgba(255,0,0,.3); outline: 0 none; transition: inline-size 200ms ease; } .test-target:focus { inline-size: 600px; } </style> <div class="test-target" tabindex="0"> </div>
Attachments
sample code for this issue (103.60 KB, image/png)
2021-10-26 19:45 PDT, Paul Li 		no flags
Details
Patch (8.53 KB, patch)
2022-02-05 10:00 PST, Antoine Quint 		no flags
DetailsFormatted DiffDiff
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-11-02 19:46:16 PDT
<rdar://problem/84958347>
Antoine Quint
Comment 2 2022-02-01 02:42:34 PST
That's correct, I don't think we support animating logical properties (yet).
Antoine Quint
Comment 3 2022-02-01 03:20:01 PST
That's right, we need to implement this part of the "Calculating computed keyframes" section of the Web Animation spec: For logical properties [CSS-LOGICAL-1], add the equivalent physical properties [CSS-WRITING-MODES-4] based on the computed value of writing-mode and/or direction for the effect target. https://drafts.csswg.org/web-animations-1/#calculating-computed-keyframes
Antoine Quint
Comment 4 2022-02-05 10:00:22 PST
Created attachment 450989 [details] Patch
EWS
Comment 5 2022-02-05 13:26:38 PST
Committed r289161 (246857@main): <https://commits.webkit.org/246857@main> All reviewed patches have been landed. Closing bug and clearing flags on attachment 450989 [details].
Note You need to log in before you can comment on or make changes to this bug.