[Webkit-unassigned] [Bug 150328] New: Multiple-keyframe animations not honouring ' forwards' fill-mode

[bugzilla-daemon at webkit.org]

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

            Bug ID: 150328
           Summary: Multiple-keyframe animations not honouring ' forwards'
                    fill-mode
    Classification: Unclassified
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Unspecified
                OS: All
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Animations
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: mario at webkit.org
                CC: cgarcia at igalia.com, dino at apple.com, hyatt at apple.com,
                    mrobinson at webkit.org

Created attachment 263477
  --> https://bugs.webkit.org/attachment.cgi?id=263477&action=review
Reduced test case

DESCRIPTION

In recent versions of WebKit, if a CSS animation is defined with animation-fill-mode = forwards AND at least 3 or more different keyframes **where at least one falls in the [51% - 100%] range**, the end result is some random state that does not match the values of neither the 0% nor the 100% keyframe.

Curiously enough, if all the keyframes but the 100% fall in the [0% - 50%] interval, then the animation is finished correctly, and the final result after it's ended is that the values of the 100% keyframe are kept.

I initially found this in WebKitGTK 2.10.1, but then I've tried in my Mac Mini with OS X Yosemite and I could reproduce it in the latest WebKit nightly, so it looks like a cross platform regression.

More specifically, in OS X:
  * Works OK with Safari 9.0 (10601.1.56.2)
  * FAILS with WebKit Nightly r191175

I'm attaching a test case I wrote, so that the bug can be easily reproduceable.


STEPS TO REPRODUCE

  1. Uncompress the contents of the attached file and load index.html in MiniBrowser / Safari + WebKit Nightly 
  2. You should a block of text with a blue-ish background moving around the horizontal axis:
    + Start at coordinates (400, 0), moving towards the left until reaching (0, 0) at the 25% keyframe
    + Move towards the right until reaching (250, 0) at the 51% keyframe
    + Move towards the left until reaching (100,0) at the 100% keyframe
    + Stay at (100, 0) once the animation has finished


EXPECTED OUTCOME

After the animation has finished, the moving block remains quiet at (100, 0) as per the 'forwards' value of animation-fill-mode, which ensures the values of the 100% keyframe are brought out of the animation.


ACTUAL OUTCOME

After the animation has finished, the moving block moves to some (apparently) random spot in the horizontal axis, which does not seem to much neither the 0% nor the 100% keyframes.

Also, note that if you modify the test case so that the definition of the 51% keyframe because the 50% keyframe, then the animation is processed correctly and the moving block is left at its right position once it's finished.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.webkit.org/pipermail/webkit-unassigned/attachments/20151019/d6499899/attachment.html>