[Webkit-unassigned] [Bug 232361] New: [CSS transition] can't use CSS logical properties in transition syntax

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=232361

            Bug ID: 232361
           Summary: [CSS transition] can't use CSS logical properties in
                    transition syntax
           Product: WebKit
           Version: Safari 15
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: meistudioli at gmail.com

Created attachment 442557

  --> https://bugs.webkit.org/attachment.cgi?id=442557&action=review

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>

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20211027/f7ff565d/attachment-0001.htm>