Title: [260513] trunk/LayoutTests
Revision
260513
Author
grao...@webkit.org
Date
2020-04-22 09:21:37 -0700 (Wed, 22 Apr 2020)

Log Message

[ Mojave wk1 Release ] animations/transition-and-animation-1.html is a flaky failure
https://bugs.webkit.org/show_bug.cgi?id=210051
<rdar://problem/61345177>

Reviewed by Simon Fraser.

The purpose of this test is to check that running an animation does not trigger a transition for the animated
property. The way this test was written is that it would use `setTimeout()` to set a timer at a time computed to
be 500ms after the completion of the animation. However, using a timer like this is flaky by design as the animation
could technically be still in flight if the system is under heavy load.

We rewrite this test to use an "animationend" event to determine the animation has really completed and then wait
another frame, using `requestAnimationFrame()` to check that the computed style is as expected.

* animations/transition-and-animation-1.html:
* resources/ui-helper.js:
(window.UIHelper.waitForEvent):

Modified Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (260512 => 260513)


--- trunk/LayoutTests/ChangeLog	2020-04-22 15:40:06 UTC (rev 260512)
+++ trunk/LayoutTests/ChangeLog	2020-04-22 16:21:37 UTC (rev 260513)
@@ -1,3 +1,23 @@
+2020-04-22  Antoine Quint  <grao...@apple.com>
+
+        [ Mojave wk1 Release ] animations/transition-and-animation-1.html is a flaky failure
+        https://bugs.webkit.org/show_bug.cgi?id=210051
+        <rdar://problem/61345177>
+
+        Reviewed by Simon Fraser.
+
+        The purpose of this test is to check that running an animation does not trigger a transition for the animated
+        property. The way this test was written is that it would use `setTimeout()` to set a timer at a time computed to
+        be 500ms after the completion of the animation. However, using a timer like this is flaky by design as the animation
+        could technically be still in flight if the system is under heavy load.
+
+        We rewrite this test to use an "animationend" event to determine the animation has really completed and then wait
+        another frame, using `requestAnimationFrame()` to check that the computed style is as expected.
+
+        * animations/transition-and-animation-1.html:
+        * resources/ui-helper.js:
+        (window.UIHelper.waitForEvent):
+
 2020-04-22  Jason Lawrence  <lawrenc...@apple.com>
 
         [ iPadOS wk2 Release ] fast/css-custom-paint/constructor.html is flaky timing out.

Modified: trunk/LayoutTests/animations/transition-and-animation-1.html (260512 => 260513)


--- trunk/LayoutTests/animations/transition-and-animation-1.html	2020-04-22 15:40:06 UTC (rev 260512)
+++ trunk/LayoutTests/animations/transition-and-animation-1.html	2020-04-22 16:21:37 UTC (rev 260513)
@@ -1,4 +1,4 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 
 <html lang="en">
 <head>
@@ -12,28 +12,37 @@
         height: 100px;
         width: 100px;
         background-color: blue;
-        -webkit-animation-duration: 0.5s;
-        -webkit-animation-timing-function: linear;
-        -webkit-animation-name: "anim";
-        -webkit-transition-property: -webkit-transform;
-        -webkit-transition-duration: 10s;
+        animation-duration: 0.5s;
+        animation-timing-function: linear;
+        animation-name: "anim";
+        transition-property: transform;
+        transition-duration: 10s;
     }
     @-webkit-keyframes "anim" {
-        from { -webkit-transform: translateX(200px); }
-        to   { -webkit-transform: translateX(300px); }
+        from { transform: translateX(200px); }
+        to   { transform: translateX(300px); }
     }
     </style>
-    <script src="" type="text/_javascript_" charset="utf-8"></script>
-    <script type="text/_javascript_" charset="utf-8">
-    
+    <script src=""
+    <script src=""
+    <script type="text/_javascript_">
+
+    if (window.testRunner)
+        testRunner.dumpAsText();
+
     const expectedValues = [
       // [animation-name, time, element-id, property, expected-value, tolerance]
-      [null, 0.55, "box", "webkitTransform", "none", null],
+      [null, 0.55, "box", "transform", "none", null],
     ];
-    
-    runAnimationTest(expectedValues);
-    
-  </script>
+
+    window.addEventListener("DOMContentLoaded", async event => {
+        await UIHelper.waitForEvent(document.getElementById("box"), "animationend");
+        await UIHelper.animationFrame();
+        checkExpectedValue(expectedValues, 0);
+        endTest();
+    });
+
+    </script>
 </head>
 <body>
 This test has a transition and animation on the same property (-webkit-transform). But the transition is never triggered,

Modified: trunk/LayoutTests/resources/ui-helper.js (260512 => 260513)


--- trunk/LayoutTests/resources/ui-helper.js	2020-04-22 15:40:06 UTC (rev 260512)
+++ trunk/LayoutTests/resources/ui-helper.js	2020-04-22 16:21:37 UTC (rev 260513)
@@ -1042,6 +1042,11 @@
             await this.activateAt(menuRect.left + menuRect.width / 2, menuRect.top + menuRect.height / 2);
     }
 
+    static waitForEvent(target, eventName)
+    {
+        return new Promise(resolve => target.addEventListener(eventName, resolve, { once: true }));
+    }
+
     static callFunctionAndWaitForEvent(functionToCall, target, eventName)
     {
         return new Promise((resolve) => {
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to