Add a commitStyles test which composites on top of underlying style.

The other commitStyles tests are not affected by the underlying style.
This test verifies that applying a partial composite: add stack
correctly applies to the underlying style.

Bug: 981905
Change-Id: Ia32a51a50e5c537b29c4848248ab94e7de56f19e
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2021741
Commit-Queue: Robert Flack <flackr@chromium.org>
Auto-Submit: Robert Flack <flackr@chromium.org>
Reviewed-by: Kevin Ellis <kevers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#735417}

third_party/blink/web_tests/external/wpt/web-animations/interfaces/Animation/commitStyles-expected.txt

@@ -7,6 +7,7 @@ FAIL Commits values calculated mid-interval animation.commitStyles is not a func
 FAIL Commits variables as their computed values animation.commitStyles is not a function
 FAIL Commits em units as pixel values animation.commitStyles is not a function
 FAIL Commits the intermediate value of an animation in the middle of stack promise_test: Unhandled rejection with value: object "TypeError: animB.commitStyles is not a function"
+FAIL Commit composites on top of the underlying value promise_test: Unhandled rejection with value: object "TypeError: animB.commitStyles is not a function"
 FAIL Triggers mutation observers when updating style promise_test: Unhandled rejection with value: object "TypeError: animation.commitStyles is not a function"
 FAIL Does NOT trigger mutation observers when the change to style is redundant promise_test: Unhandled rejection with value: object "TypeError: animation.commitStyles is not a function"
 FAIL Throws if the target element is a pseudo element assert_throws: function "() => {

third_party/blink/web_tests/external/wpt/web-animations/interfaces/Animation/commitStyles.html

@@ -207,6 +207,54 @@ promise_test(async t => {
   assert_numeric_style_equals(getComputedStyle(div).opacity, 0.4);
 }, 'Commits the intermediate value of an animation in the middle of stack');
 
+promise_test(async t => {
+  const div = createDiv(t);
+  div.style.opacity = '0.1';
+
+  const animA = div.animate(
+    { opacity: '0.2', composite: 'add' },
+    { duration: 1, fill: 'forwards' }
+  );
+  const animB = div.animate(
+    { opacity: '0.2', composite: 'add' },
+    { duration: 1, fill: 'forwards' }
+  );
+  const animC = div.animate(
+    { opacity: '0.3', composite: 'add' },
+    { duration: 1, fill: 'forwards' }
+  );
+
+  animA.persist();
+  animB.persist();
+  await animB.finished;
+
+  // The error cases are similar to the above test with one additional case;
+  // verifying that the animations composite on top of the correct underlying
+  // base style.
+  //
+  //  Expected result:
+  //
+  //  <underlying> + animA + animB = 0.5
+  //
+  //  Additional error results:
+  //
+  //    <underlying> + animA + animB + animC + animA + animB = 1.0 (saturates)
+  //    (Added to the computed value instead of underlying value when
+  //    resolving)
+  //
+  //    animA + animB = 0.4
+  //    Failed to composite on top of underlying value.
+  //
+
+  animB.commitStyles();
+
+  animA.cancel();
+  animB.cancel();
+  animC.cancel();
+
+  assert_numeric_style_equals(getComputedStyle(div).opacity, 0.5);
+}, 'Commit composites on top of the underlying value');
+
 promise_test(async t => {
   const div = createDiv(t);
   div.style.opacity = '0.1';

third_party/blink/web_tests/platform/mac-mac10.13/external/wpt/web-animations/interfaces/Animation/commitStyles-expected.txt

@@ -7,6 +7,7 @@ FAIL Commits values calculated mid-interval animation.commitStyles is not a func
 FAIL Commits variables as their computed values animation.commitStyles is not a function
 FAIL Commits em units as pixel values animation.commitStyles is not a function
 FAIL Commits the intermediate value of an animation in the middle of stack promise_test: Unhandled rejection with value: object "TypeError: animB.commitStyles is not a function"
+FAIL Commit composites on top of the underlying value promise_test: Unhandled rejection with value: object "TypeError: animB.commitStyles is not a function"
 FAIL Triggers mutation observers when updating style promise_test: Unhandled rejection with value: object "TypeError: animation.commitStyles is not a function"
 FAIL Does NOT trigger mutation observers when the change to style is redundant promise_test: Unhandled rejection with value: object "TypeError: animation.commitStyles is not a function"
 FAIL Throws if the target element is a pseudo element assert_throws_dom: function "() => {

third_party/blink/web_tests/platform/win/external/wpt/web-animations/interfaces/Animation/commitStyles-expected.txt

@@ -7,6 +7,7 @@ FAIL Commits values calculated mid-interval animation.commitStyles is not a func
 FAIL Commits variables as their computed values animation.commitStyles is not a function
 FAIL Commits em units as pixel values animation.commitStyles is not a function
 FAIL Commits the intermediate value of an animation in the middle of stack promise_test: Unhandled rejection with value: object "TypeError: animB.commitStyles is not a function"
+FAIL Commit composites on top of the underlying value promise_test: Unhandled rejection with value: object "TypeError: animB.commitStyles is not a function"
 FAIL Triggers mutation observers when updating style promise_test: Unhandled rejection with value: object "TypeError: animation.commitStyles is not a function"
 FAIL Does NOT trigger mutation observers when the change to style is redundant promise_test: Unhandled rejection with value: object "TypeError: animation.commitStyles is not a function"
 FAIL Throws if the target element is a pseudo element assert_throws_dom: function "() => {