Deflake virtual/threaded/animations/filter-responsive-neutral-keyframe.html

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

Index: third_party/WebKit/LayoutTests/animations/filter-responsive-neutral-keyframe.html
diff --git a/third_party/WebKit/LayoutTests/animations/filter-responsive-neutral-keyframe.html b/third_party/WebKit/LayoutTests/animations/filter-responsive-neutral-keyframe.html
index 849866b9a6e3dd101ac2c2f1e5aec87d43c5787a..782192b0f1c81aea0b87d19c3954592b67750fd4 100644
--- a/third_party/WebKit/LayoutTests/animations/filter-responsive-neutral-keyframe.html
+++ b/third_party/WebKit/LayoutTests/animations/filter-responsive-neutral-keyframe.html
@@ -14,7 +14,7 @@ div {
   background: green;
 }
 @keyframes test {
-  to { -webkit-filter: opacity(0.5); }
+  to { -webkit-filter: opacity(0); }
 }
 </style>
 <div id="green"></div>
@@ -23,13 +23,14 @@ div {
 if (window.testRunner)
   testRunner.waitUntilDone();
 
-requestAnimationFrame(() => {
-  requestAnimationFrame(() => {
-    target.style.webkitFilter = 'opacity(0)';
-    requestAnimationFrame(() => {
-      if (window.testRunner)
-        testRunner.notifyDone();
-    });
-  });
+function waitForCompositor() {
+  return target.animate({transform: ['none', 'none']}, 1).ready;
+}
+
+waitForCompositor().then(() => {
+  target.style.webkitFilter = 'opacity(0)';
+}).then(() => waitForCompositor()).then(() => {
+  if (window.testRunner)
+    testRunner.notifyDone();
 });
 </script>