Bug 248145 – [web-animations] keyframes should be recomputed if used CSS variable changes

• Component: Animations
• Status: RESOLVED FIXED

[Antoine Quint]

We're failing a couple of tests in web-animations/animation-model/keyframe-effects/effect-value-context-filling.html because we fail to update keyframes when a used CSS variable changes. For instance:

test(t => {
  const div = createDiv(t);
  div.style.setProperty('--target', '100px');
  const animation = div.animate(
    [{ marginLeft: '0px' }, { marginLeft: 'var(--target)' }],
    { duration: 1000, fill: 'forwards' }
  );
  animation.finish();
  assert_equals(
    getComputedStyle(div).marginLeft,
    '100px',
    'Effect value before updating variable'
  );

  div.style.setProperty('--target', '200px');

  assert_equals(
    getComputedStyle(div).marginLeft,
    '200px',
    'Effect value after updating variable'
  );
}, 'Filling effect values reflect changes to variables on element');

In fact, after fixing bug 186490, the last two remaining failures in that test are due to this issue.

[Antoine Quint]

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

[Antoine Quint]

Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/37043

[EWS]

Committed 256893@main (5c0b3cb4b245): <https://commits.webkit.org/256893@main>

Reviewed commits have been landed. Closing PR #6682 and removing active labels.

[Radar WebKit Bug Importer]

<rdar://problem/102565326>

[Antoine Quint]

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