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>
<rdar://problem/84958347>
That's correct, I don't think we support animating logical properties (yet).
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
Created attachment 450989 [details] Patch
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].