[composite-bgcolor-animation] Composite no-op animations
Please refer to the discussions here:
https://docs.google.com/document/d/1HtnP6oNFvcYIn91tHPhQR5n_8zhWLHfG_eXi4HG8Pzc/edit
On the above notes, we have reached conclusions that:
1. It is OK to run a no-op animation on the compositor thread. In
this CL, we let a no-op background-color animation run on the
compositor, which is consistent with transform and opacity.
2. For background-color animation cases, when we try to create a
compositor animation + we found that the layout object doesn't
have a UniqueId, this implies that it is a no-op animation and
we give a special ElementId to the CompositorKeyframeModel. Then
when we tick the animation on the compositor side, we can short
circuit it such that we don't need to update the animated property
value because it is a no-op animation.
Bug: 1193757
Change-Id: I1a6b4d91c106ae830550e54f451d0cdf5dea9721
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2795243
Reviewed-by: Philip Rogers <pdr@chromium.org>
Commit-Queue: Xida Chen <xidachen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#873969}
diff --git a/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html b/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html
new file mode 100644
index 0000000..e47a83e
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<style>
+.box {
+ width: 100px;
+ height: 10000px;
+}
+.container {
+ width: 50px;
+ height: 50px;
+ background-color: rgb(100, 100, 0);
+}
+</style>
+<body>
+ <div class='box'></div>
+ <div class='container'></div>
+</body>
diff --git a/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport.html b/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport.html
new file mode 100644
index 0000000..db212e3
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-element-not-visible-at-current-viewport.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<link rel="match" href="background-color-animation-element-not-visible-at-current-viewport-ref.html">
+<style>
+.box {
+ width: 100px;
+ height: 10000px;
+}
+.container {
+ width: 50px;
+ height: 50px;
+ animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s;
+}
+@keyframes bgcolor {
+ 0% { background-color: rgb(0, 200, 0); }
+ 100% { background-color: rgb(200, 0, 0); }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<body>
+<div class="box"></div>
+<div class="container"></div>
+
+<script>
+takeScreenshot();
+</script>
+</body>
+</html>
diff --git a/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero-ref.html b/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero-ref.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero-ref.html
diff --git a/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero.html b/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero.html
new file mode 100644
index 0000000..6ba25c8
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-non-zero-size-element-change-to-zero.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<link rel="match" href="background-color-animation-non-zero-size-element-change-to-zero-ref.html">
+<style>
+.container {
+ width: 100px;
+ height: 100px;
+ animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s;
+}
+@keyframes bgcolor {
+ 0% { background-color: rgb(0, 200, 0); }
+ 100% { background-color: rgb(200, 0, 0); }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<body>
+<div class="container" id="target"></div>
+
+<script>
+requestAnimationFrame(() => {
+ var target = document.getElementById("target");
+ target.style.width = '0px';
+ target.style.height = '0px';
+ requestAnimationFrame(() => {
+ takeScreenshot();
+ });
+});
+</script>
+</body>
+</html>
diff --git a/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero-ref.html b/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero-ref.html
new file mode 100644
index 0000000..26882bd
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero-ref.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+.box {
+ width: 100px;
+ height: 100px;
+ background-color: rgb(100, 100, 0);
+}
+</style>
+<body>
+ <div class='box'></div>
+</body>
diff --git a/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero.html b/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero.html
new file mode 100644
index 0000000..f62380f
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-zero-size-element-change-to-non-zero.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<link rel="match" href="background-color-animation-zero-size-element-change-to-non-zero-ref.html">
+<style>
+.container {
+ animation: bgcolor 1000000s cubic-bezier(0,1,1,0) -500000s;
+}
+@keyframes bgcolor {
+ 0% { background-color: rgb(0, 200, 0); }
+ 100% { background-color: rgb(200, 0, 0); }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<body>
+<div class="container" id="target"></div>
+
+<script>
+requestAnimationFrame(() => {
+ var target = document.getElementById("target");
+ target.style.width = '100px';
+ target.style.height = '100px';
+ requestAnimationFrame(() => {
+ takeScreenshot();
+ });
+});
+</script>
+</body>
+</html>
diff --git a/css/css-backgrounds/animations/background-color-animation-zero-size-element-ref.html b/css/css-backgrounds/animations/background-color-animation-zero-size-element-ref.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-zero-size-element-ref.html
diff --git a/css/css-backgrounds/animations/background-color-animation-zero-size-element.html b/css/css-backgrounds/animations/background-color-animation-zero-size-element.html
new file mode 100644
index 0000000..008b78a
--- /dev/null
+++ b/css/css-backgrounds/animations/background-color-animation-zero-size-element.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<link rel="match" href="background-color-animation-zero-size-element-ref.html">
+<style>
+.container {
+ animation: bgcolor 1s;
+}
+@keyframes bgcolor {
+ 0% { background-color: rgb(0, 200, 0); }
+ 100% { background-color: rgb(200, 0, 0); }
+}
+</style>
+<script src="/common/reftest-wait.js"></script>
+<body>
+<div class="container"></div>
+
+<script>
+// Pass if there is no crash, nothing shows on the screen
+takeScreenshot();
+</script>
+</body>
+</html>
