Bug 246913 – [web-animations] handle blending of layout-dependent <transform-list> values

• Component: Animations
• Status: NEW

[Antoine Quint]

We're failing a subtest in web-animations/interfaces/Animation/commitStyles.html:

test(t => {
  const div = createDiv(t);
  div.style.width = '200px';
  div.style.height = '200px';

  const animation = div.animate({ transform: ["translate(100%, 0%)", "scale(3)"] }, 1000);
  animation.currentTime = 500;
  animation.commitStyles();
  animation.cancel();

  assert_equals(getComputedStyle(div).transform, "matrix(2, 0, 0, 2, 100, 0)",
      "Resolved transform is correct after commit.");
}, 'Commits matrix-interpolated relative transforms');

Our current result is "matrix(2, 0, 0, 2, 0, 0)" because when we blend under commitStyles() layout has not happened yet for the div and the bounds passed to resolve the 100% translation value is 0,0.

[Antoine Quint]

Pull request: https://github.com/WebKit/WebKit/pull/5684

[Antoine Quint]

Performing a layout should not be required to pass this test, I wrote all the details in https://github.com/WebKit/WebKit/pull/5684#issuecomment-1288636644.

[Antoine Quint]

We'll need mix() support, I filed https://bugs.webkit.org/show_bug.cgi?id=246937. Retitling this bug to correctly identify the issue.

[Radar WebKit Bug Importer]

<rdar://problem/101725429>

[Ahmad Saleem]

Still failing sub-test: https://wpt.fyi/results/web-animations/interfaces/Animation/commitStyles.html?label=master&label=experimental&aligned=&q=safari%3Afail+firefox%3Apass+chrome%3Apass

Adding 'WPTImpact' and 'BrowserCompat' tags.

[Antoine Quint]

*** Bug 222096 has been marked as a duplicate of this bug. ***

[Antoine Quint]

Note that `mix()` is no longer a thing and in this instance `transform-mix()` would be the relevant CSS function: https://drafts.csswg.org/css-values-5/#transform-mix.