[CSS transition] can't use CSS logical properties in transition syntax

• Component: Animations
• Status: RESOLVED FIXED

[Paul Li]

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>

[Radar WebKit Bug Importer]

<rdar://problem/84958347>

[Antoine Quint]

That's correct, I don't think we support animating logical properties (yet).

[Antoine Quint]

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]

Created attachment 450989 [details]
Patch

[EWS]

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].