Flaky Test: http/wpt/css/css-animations/start-animation-001.html
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 4 Jan 2019 14:34:39 +0000 (14:34 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 4 Jan 2019 14:34:39 +0000 (14:34 +0000)
https://bugs.webkit.org/show_bug.cgi?id=190903

This patch modifies start-animation-001.html to rely on the square positions returned by the
Web Process in order to know when they are supposed to be rendered behind the covering rect.
This should make it more robust while still testing the original bug 186129.

Patch by Frederic Wang <fwang@igalia.com> on 2019-01-04
Reviewed by Antonio Gomes.

* http/wpt/css/css-animations/start-animation-001.html:

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

LayoutTests/ChangeLog
LayoutTests/http/wpt/css/css-animations/start-animation-001.html

index 893fd43..2d50423 100644 (file)
@@ -1,3 +1,16 @@
+2019-01-04  Frederic Wang  <fwang@igalia.com>
+
+        Flaky Test: http/wpt/css/css-animations/start-animation-001.html
+        https://bugs.webkit.org/show_bug.cgi?id=190903
+
+        This patch modifies start-animation-001.html to rely on the square positions returned by the
+        Web Process in order to know when they are supposed to be rendered behind the covering rect.
+        This should make it more robust while still testing the original bug 186129.
+
+        Reviewed by Antonio Gomes.
+
+        * http/wpt/css/css-animations/start-animation-001.html:
+
 2019-01-03  Zalan Bujtas  <zalan@apple.com>
 
         REGRESSION: -webkit-appearance test case crashes
index 116b4eb..fd058b9 100644 (file)
       }
     </style>
     <script>
-      function runTest() {
-        if (!window.testRunner)
-          return;
-        // We wait a bit after the squares are moved behind the blue rectangle. For discontinuous
-        // transforms we have 5000px / 100 steps = 5px/step. Hence this happens after 20 steps i.e.
-        // 20/100*10s = 200ms.
-        testRunner.waitUntilDone();
-        setTimeout(() => { testRunner.notifyDone(); }, 300);
+      function squareLeft(id) {
+          var element = document.getElementById(id);
+          if (id === "squareNonAccelerated")
+              return element.getBoundingClientRect().left;
+          var transform = window.getComputedStyle(element).getPropertyValue("transform");
+          var match = /matrix\(1, 0, 0, 1, (.*), 0\)/.exec(transform);
+          return match ? parseFloat(match[1]) : 0;
       }
+      function shouldBeHiddenByCoveringRect(id) {
+          var coveringRectLeft = document.getElementById("coveringRect").getBoundingClientRect().left;
+          return squareLeft(id) > coveringRectLeft;
+      }
+      // We wait until all the squares are moved behind the blue rectangle.
+      if (window.testRunner)
+          testRunner.waitUntilDone();
+      function step() {
+          if (["squareLinear", "squareSteps", "squareNonAccelerated"].every(shouldBeHiddenByCoveringRect)) {
+              if (window.testRunner)
+                  testRunner.notifyDone();
+              return;
+          }
+          window.requestAnimationFrame(step);
+      }
+      window.requestAnimationFrame(step);
     </script>
   </head>
-  <body onload="runTest()">
+  <body>
     <p>This test passes if green squares are moved behind the blue rectangle.</p>
     <div id="container">
       <div id="squareLinear"><tt>transform</tt> (linear)</div>