CSS keyframed animations don't respect edges in 4 value background-position

• Component: Animations
• Status: RESOLVED FIXED

[Luca Casonato]

The following example behaves as expected in Chrome and FF, but behaves incorrectly in Safari:

In Firefox and Chrome the Deno logo moves from the top right to the middle. In Safari the logo moves from the top left to the middle.


```html
<style>
  div {
    background-image: url(https://deno.land/logo.svg);
    background-size: 10px;
    background-repeat: no-repeat;
    height: 100px;
    width: 100px;

    animation: move 1s;
  }

  @keyframes move {
    from {
      background-position: right 0 top 0px;
    }

    to {
      background-position: right 50px top 10px;
    }
  }
</style>
<div></div>
```

[Radar WebKit Bug Importer]

<rdar://problem/81807407>

[Simon Fraser (smfr)]

Created attachment 436541 [details]
Test case

[Simon Fraser (smfr)]

The issue here is that the style that results from the animation does not have m_backgroundXOrigin/m_backgroundYOrigin set in it.

[Simon Fraser (smfr)]

Created attachment 436581 [details]
Patch

[EWS]

Committed r281683 (241033@main): <https://commits.webkit.org/241033@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 436581 [details].

[Arcady Goldmints-Orlov]

It appears that the test added in this change is flaky, mostly failing (but sometimes passing) on GTK and WPE, and mostly passing (but sometimes failing) on Mac/iOS: https://results.webkit.org/?suite=layout-tests&test=animations%2Fbackground-position.html

[Carlos Alberto Lopez Perez]

(In reply to Arcady Goldmints-Orlov from comment #6)
> It appears that the test added in this change is flaky, mostly failing (but
> sometimes passing) on GTK and WPE, and mostly passing (but sometimes
> failing) on Mac/iOS:
> https://results.webkit.org/?suite=layout-tests&test=animations%2Fbackground-
> position.html

See bug 229764