De-flake some animation tests

https://bugs.webkit.org/show_bug.cgi?id=188356

Reviewed by Dean Jackson.

The tests in legacy-animation-engine were flakey because the animation can start before
we get a chance to register the event listener. Fix by starting the animation after the
load event fires. Make the non-legacy tests match.

* compositing/visible-rect/animated-from-none.html:
* compositing/visible-rect/animated.html:
* legacy-animation-engine/compositing/visible-rect/animated-from-none.html:
* legacy-animation-engine/compositing/visible-rect/animated.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@234641 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
index 20db8a5..c2fe212 100644 (file)
--- a/LayoutTests/ChangeLog
+++ b/LayoutTests/ChangeLog
@@ -1,3 +1,19 @@
+2018-08-06  Simon Fraser  <simon.fraser@apple.com>
+
+        De-flake some animation tests
+        https://bugs.webkit.org/show_bug.cgi?id=188356
+
+        Reviewed by Dean Jackson.
+        
+        The tests in legacy-animation-engine were flakey because the animation can start before
+        we get a chance to register the event listener. Fix by starting the animation after the
+        load event fires. Make the non-legacy tests match.
+
+        * compositing/visible-rect/animated-from-none.html:
+        * compositing/visible-rect/animated.html:
+        * legacy-animation-engine/compositing/visible-rect/animated-from-none.html:
+        * legacy-animation-engine/compositing/visible-rect/animated.html:
+
 2018-08-06  Alex Christensen  <achristensen@webkit.org>
 
         Check with SafeBrowsing during navigation in WKWebView

diff --git a/LayoutTests/compositing/visible-rect/animated-from-none.html b/LayoutTests/compositing/visible-rect/animated-from-none.html
index fccce78..464ec0c 100644 (file)
--- a/LayoutTests/compositing/visible-rect/animated-from-none.html
+++ b/LayoutTests/compositing/visible-rect/animated-from-none.html
@@ -34,13 +34,16 @@
 
         function doTest()
         {
-            document.getElementById('animated').addEventListener('webkitAnimationStart', function() {
+            let animated = document.getElementById('animated');
+            animated.addEventListener('webkitAnimationStart', function() {
                 if (window.internals)
                     document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
 
                 if (window.testRunner)
                     testRunner.notifyDone();
             }, false);
+            
+            animated.classList.add('animating');
         }
         window.addEventListener('load', doTest, false);
     </script>

diff --git a/LayoutTests/compositing/visible-rect/animated.html b/LayoutTests/compositing/visible-rect/animated.html
index 12a77bb..7160dac 100644 (file)
--- a/LayoutTests/compositing/visible-rect/animated.html
+++ b/LayoutTests/compositing/visible-rect/animated.html
@@ -17,6 +17,9 @@
             width: 200px;
             height: 200px;
             background-color: blue;
+        }
+        
+        .box.animating {
             -webkit-animation: move 20000000s linear;
         }
         
@@ -33,15 +36,16 @@
 
         function doTest()
         {
-            document.getElementById('animated').addEventListener('webkitAnimationStart', function() {
-                requestAnimationFrame(() => {
-                    if (window.internals)
-                        document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
+            let animated = document.getElementById('animated');
+            animated.addEventListener('webkitAnimationStart', function() {
+                if (window.internals)
+                    document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
 
-                    if (window.testRunner)
-                        testRunner.notifyDone();
-                });
+                if (window.testRunner)
+                    testRunner.notifyDone();
             }, false);
+
+            animated.classList.add('animating');
         }
         window.addEventListener('load', doTest, false);
     </script>

diff --git a/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated-from-none.html b/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated-from-none.html
index fccce78..aa96ef3 100644 (file)
--- a/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated-from-none.html
+++ b/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated-from-none.html
@@ -18,6 +18,9 @@
             width: 200px;
             height: 200px;
             background-color: blue;
+        }
+        
+        .box.animating {
             -webkit-animation: move 20000000s linear;
         }
         
@@ -34,13 +37,16 @@
 
         function doTest()
         {
-            document.getElementById('animated').addEventListener('webkitAnimationStart', function() {
+            let animated = document.getElementById('animated');
+            animated.addEventListener('webkitAnimationStart', function() {
                 if (window.internals)
                     document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
 
                 if (window.testRunner)
                     testRunner.notifyDone();
             }, false);
+            
+            animated.classList.add('animating');
         }
         window.addEventListener('load', doTest, false);
     </script>

diff --git a/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated.html b/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated.html
index bfbe32b..5c98842 100644 (file)
--- a/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated.html
+++ b/LayoutTests/legacy-animation-engine/compositing/visible-rect/animated.html
@@ -17,6 +17,9 @@
             width: 200px;
             height: 200px;
             background-color: blue;
+        }
+        
+        .box.animating {
             -webkit-animation: move 20000000s linear;
         }
         
@@ -33,13 +36,16 @@
 
         function doTest()
         {
-            document.getElementById('animated').addEventListener('webkitAnimationStart', function() {
+            let animated = document.getElementById('animated');
+            animated.addEventListener('webkitAnimationStart', function() {
                 if (window.internals)
                     document.getElementById('layers').innerText = internals.layerTreeAsText(document, internals.LAYER_TREE_INCLUDES_VISIBLE_RECTS)
 
                 if (window.testRunner)
                     testRunner.notifyDone();
             }, false);
+
+            animated.classList.add('animating');
         }
         window.addEventListener('load', doTest, false);
     </script>