Propagate subpixel accumulation through translation-only animations
Previously we discard subpixel accumulation for all transform
animations in case that the transform animation may apply a transform
though which the subpixel accumulation can't be propagated, e.g. scale,
rotation. However, for a translation-only animation, this caused
different pixel-snapped offset of the element from the pixel-snapped
offset before the animation and maybe 1 pixel glitch at start/end of
the animation.
Now check if the transform animation is translation only, and if yes,
allow propagation of the subpixel accumulation.
Bug: 1155029
Change-Id: I0cf759721b6c121f22310a445b679c7283973889
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2578387
Reviewed-by: Robert Flack <flackr@chromium.org>
Reviewed-by: Chris Harrelson <chrishtr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#835038}
diff --git a/css/css-animations/translation-animation-subpixel-offset-ref.html b/css/css-animations/translation-animation-subpixel-offset-ref.html
new file mode 100644
index 0000000..5fc04d9
--- /dev/null
+++ b/css/css-animations/translation-animation-subpixel-offset-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<style>
+div {
+ position: absolute;
+ top: 11px;
+ left: 1px;
+ width: 100px;
+ height: 100px;
+ background: green;
+}
+</style>
+<div></div>
diff --git a/css/css-animations/translation-animation-subpixel-offset.html b/css/css-animations/translation-animation-subpixel-offset.html
new file mode 100644
index 0000000..5692a08
--- /dev/null
+++ b/css/css-animations/translation-animation-subpixel-offset.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<title>Translation-only transform animation with subpixel offset</title>
+<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org">
+<link rel="help" href="https://crbug.com/1155029">
+<link rel="match" href="translation-animation-subpixel-offset-ref.html">
+<style>
+@keyframes move {
+ 0% {transform: translateY(10px);}
+ 100% {transform: translateY(10px);}
+}
+#red {
+ position: absolute;
+ top: 11px;
+ left: 1px;
+ width: 100px;
+ height: 100px;
+ background: red;
+}
+#container {
+ position: absolute;
+ top: 0.4px;
+ left: 0.6px;
+}
+#target {
+ position: relative;
+ top: 0.4px;
+ left: 0.6px;
+ width: 100px;
+ height: 100px;
+ background: green;
+ animation: move 1s infinite alternate;
+}
+</style>
+<div id="red"></div>
+<div id="container">
+ <div id="target"></div>
+</div>
