Deflake virtual/threaded/animations/{opacity,transform}-responsive-neutral-keyframe.html

third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html

Index: third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html
diff --git a/third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html b/third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html
index b3bb292a8753f734f23abddf4807a4e5466a204f..eeed42e44ea4d7d5374144e4a9bf23dc8a40f20a 100644
--- a/third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html
+++ b/third_party/WebKit/LayoutTests/animations/transform-responsive-neutral-keyframe.html
@@ -7,15 +7,15 @@ div {
 }
 #target {
   background: red;
-  transform: translateY(100px);
+  transform: translateX(100px);
   animation: test 1e8s;
 }
 #expected {
   background: green;
-  transform: translateY(50px);
+  transform: translateX(50px);
 }
 @keyframes test {
-  to { transform: translateX(100px); }
+  to { transform: translateX(50px); }

[Eric Willigers, 2016/09/19 04:50:55]

Can this be completely different, like translateX(200px);

[alancutter (OOO until 2018), 2016/09/19 05:14:00]

Making it different just increases the chance of this test being flaky, I don't
see any gain in doing so.

 }
 </style>
 <div id="target"></div>
@@ -24,13 +24,14 @@ div {
 if (window.testRunner)
   testRunner.waitUntilDone();
 
-requestAnimationFrame(() => {
-  requestAnimationFrame(() => {
-    target.style.transform = 'translateY(50px)';
-    requestAnimationFrame(() => {
-      if (window.testRunner)
-        testRunner.notifyDone();
-    });
-  });
+function waitForCompositor() {
+  return target.animate({opacity: ['1', '1']}, 1).ready;
+}
+
+waitForCompositor().then(() => {
+  target.style.transform = 'translateX(50px)';
+}).then(() => waitForCompositor()).then(() => {
+  if (window.testRunner)
+    testRunner.notifyDone();
 });
 </script>