Call CheckCanStartAnimationOnCompositor at paint

Note: this is for background-color animation only, not for other properties. When composite background-color animation, the paint stage collect some parameters such as animated colors for the animation. If this step is successful, then we will paint the element off the main thread. After that, we can have CheckCanStartAnimationOnCompositor returning false and refuse to run the background-color animation on the compositor thread. In this case, the paint of the element off the main thread won't work. So in this CL, we call CheckCanStartAnimationOnCompositor during the paint step. This ensures the consistency of the paint and compositor animation. Bug: 1178987 Change-Id: I737b1e290730637977bc6fcff65cab9b4651aa8a Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2713344 Commit-Queue: Xida Chen <xidachen@chromium.org> Reviewed-by: Kevin Ellis <kevers@chromium.org> Cr-Commit-Position: refs/heads/master@{#858271}
web-platform-tests · Feb 26, 2021 · 4dc7016 · 4dc7016
1 parent 4f24e1d
commit 4dc7016
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git a/css/css-backgrounds/animations/two-animation-diff-length-ref.html b/css/css-backgrounds/animations/two-animation-diff-length-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<body>
+  <canvas id="canvas" width="100" height="100"></canvas>
+</body>
+<script>
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  ctx.fillStyle = 'rgb(0, 0, 199)';
+  ctx.fillRect(0, 0, 100, 100);
+</script>
diff --git a/css/css-backgrounds/animations/two-animation-diff-length.html b/css/css-backgrounds/animations/two-animation-diff-length.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<link rel="match" href="two-animation-diff-length-ref.html">
+<style>
+.container {
+  width: 100px;
+  height: 100px;
+  background-color: green;
+  animation: bgcolor2 10s, bgcolor1 0.001s;
+}
+@keyframes bgcolor1 {
+  0% { background-color: rgb(0, 200, 0); }
+  100% { background-color: rgb(200, 0, 0); }
+}
+@keyframes bgcolor2 {
+  0% { background-color: rgb(0, 0, 199); }
+  100% { background-color: rgb(0, 0, 200); }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<script src="../../../web-animations/testcommon.js"></script>
+<body>
+<div class="container"></div>
+
+<script>
+// This test ensures that if we have two different-length animation, when the
+// one with higher compositing order finishes, the other one would still run
+// normally.
+const animations = document.getAnimations();
+Promise.all([animations[0].ready, animations[1].ready]).then(() => {
+  waitForAnimationFrames(3).then(() => {
+    takeScreenshot();
+  });
+});
+</script>
+</body>
+</html>