Bug 1611814 [wpt PR 21438] - Implement commitStyles for web animations., a=testonly

Automatic update from web-platform-tests
Implement commitStyles for web animations.

CommitStyles provides a convenient way to update the style of an
element, avoiding the need to keep finished animations persistent
in order to stack effects.

A typical use case is:

const anim = elem.animate(keyframes, {..., fill: 'forward'});
anim.finished.then(() => {
  anim.commitStyles();
  anim.cancel();
});

Spec:
https://drafts.csswg.org/web-animations-1/#dom-animation-commitstyles

Intent:
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/H5sz_dg6fKc/1X7K7U4XCgAJ

Bug: 981905
Change-Id: I37f61960480517e0a8f3427938cf799de4c6e9c8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2017673
Commit-Queue: Kevin Ellis <kevers@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735948}

--

wpt-commits: 44e7759ce47e1b16994aac592202939db85e2750
wpt-pr: 21438

testing/web-platform/tests/web-animations/interfaces/Animation/commitStyles.html

@@ -128,7 +128,23 @@ test(t => {
   div.style.setProperty('--target', '1');
 
   assert_numeric_style_equals(getComputedStyle(div).opacity, 0.5);
-}, 'Commits variables as their computed values');
+}, 'Commits variable references as their computed values');
+
+
+test(t => {
+  const div = createDiv(t);
+  div.style.setProperty('--target', '0.5');
+  div.style.opacity = 'var(--target)';
+  const animation = div.animate(
+    { '--target': 0.8 },
+    { duration: 1, fill: 'forwards' }
+  );
+  animation.finish();
+  animation.commitStyles();
+  animation.cancel();
+
+  assert_numeric_style_equals(getComputedStyle(div).opacity, 0.8);
+}, 'Commits custom variables');
 
 test(t => {
   const div = createDiv(t);