CSS Transitions: avoid flakes in cancel-transition.html

third_party/WebKit/LayoutTests/transitions/cancel-transition.html

Index: third_party/WebKit/LayoutTests/transitions/cancel-transition.html
diff --git a/third_party/WebKit/LayoutTests/transitions/cancel-transition.html b/third_party/WebKit/LayoutTests/transitions/cancel-transition.html
index 7ff24f2b309f9bfca9ffc3b201020d1ae3345e72..e62bc81143a57c1bf01b5b40104de06e07a8911c 100644
--- a/third_party/WebKit/LayoutTests/transitions/cancel-transition.html
+++ b/third_party/WebKit/LayoutTests/transitions/cancel-transition.html
@@ -48,6 +48,21 @@
     <script>
         'use strict';
 
+        function waitForProgress() {
+          var initialLeft = getComputedStyle(left).left;
+          return new Promise(resolve => {
+            function poll() {
+              var currentLeft = getComputedStyle(left).left;
+              if (currentLeft === initialLeft) {

[alancutter (OOO until 2018), 2017/01/10 08:41:54]

Shouldn't we see a change in the value after a single RAF?

[suzyh_UTC10 (ex-contributor), 2017/01/10 22:43:30]

I don't see the harm in continuing to call rAF in the event that it doesn't
change after a single rAF. It's not clear to me what it would mean if it didn't
change after a single rAF - whether that's within bounds of acceptable
behaviour, or whether that would be a bug. But even in the latter case, I think
this test would want to continue checking on each frame until timeout, and leave
catching that bug for a separate test.

[Eric Willigers, 2017/01/11 03:07:42]

We occasionally have more than 10 frames with the same value.

+                requestAnimationFrame(poll);
+              } else {
+                resolve();
+              }
+            }
+            requestAnimationFrame(poll);
+          });
+        }
+
         function waitSeveralFrames() {
             return container.animate({opacity: ['1', '1']}, 100).finished;
         }
@@ -56,7 +71,7 @@
             getComputedStyle(container).height; // force style recalc
             container.className = 'run';
             getComputedStyle(container).height; // force style recalc - transition will start
-            waitSeveralFrames().then(t.step_func(() => {
+            waitForProgress().then(t.step_func(() => {
                 assert_greater_than(parseFloat(getComputedStyle(left).left), 50);
                 container.className = '';
                 getComputedStyle(container).height; // force style recalc - transition will cancel