[ iOS wk2 ] animations/play-state-paused.html is flaky failing.

https://bugs.webkit.org/show_bug.cgi?id=212641 <rdar://problem/63879230> Reviewed by Dean Jackson. Rewrite this test to use the AnimationTest helper that will non-flakily check animated values while an animation is running. * animations/play-state-paused-expected.txt: * animations/play-state-paused.html: * platform/ios-wk2/TestExpectations: Canonical link: https://commits.webkit.org/225568@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@262548 268f45cc-cd09-0410-ab3c-d52691b4dbfc
WebKit · Jun 4, 2020 · ad03434 · ad03434
1 parent fa2bfff
commit ad03434
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 50 deletions.
diff --git a/LayoutTests/ChangeLog b/LayoutTests/ChangeLog
@@ -1,3 +1,17 @@
+2020-06-04  Antoine Quint  <graouts@webkit.org>
+
+        [ iOS wk2 ] animations/play-state-paused.html is flaky failing.
+        https://bugs.webkit.org/show_bug.cgi?id=212641
+        <rdar://problem/63879230>
+
+        Reviewed by Dean Jackson.
+
+        Rewrite this test to use the AnimationTest helper that will non-flakily check animated values while an animation is running.
+
+        * animations/play-state-paused-expected.txt:
+        * animations/play-state-paused.html:
+        * platform/ios-wk2/TestExpectations:
+
 2020-06-02  Chris Dumez  <cdumez@apple.com>
 
         Resync web-platform-tests/2dcontext from upstream

diff --git a/LayoutTests/animations/play-state-paused-expected.txt b/LayoutTests/animations/play-state-paused-expected.txt
@@ -1,4 +1,3 @@
-PASS - "margin-left" property for "box" element at 0.5s saw something close to: 75
-PASS - "margin-left" property for "box" element at 1s saw something close to: 150
-PASS - "margin-left" property for "box" element at 2.5s saw something close to: 150
+
+PASS Pausing an animation using the animation-play-state property stops animating styles. 
 
diff --git a/LayoutTests/animations/play-state-paused.html b/LayoutTests/animations/play-state-paused.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>Test of -webkit-animation-play-state</title>
-  <style type="text/css" media="screen">
+  <title>Test of animation-play-state</title>
+  <style>
     body {
       margin: 0;
     }
@@ -16,57 +16,52 @@
       width: 100px;
       background-color: red;
       margin: 0;
-      -webkit-animation-duration: 2s;
-      -webkit-animation-timing-function: linear;
-      -webkit-animation-name: "move1";
-      -webkit-animation-play-state: running;
+      animation-duration: 2s;
+      animation-timing-function: linear;
+      animation-name: move;
+      animation-play-state: running;
     }
-    #safezone {
-      position: absolute;
-      top: 100px;
-      height: 100px;
-      width: 200px;
-      left: 100px;
-      background-color: green;
-    }
-    @-webkit-keyframes "move1" {
+
+    @keyframes move {
       from { margin-left: 0px; }
       to   { margin-left: 300px; }
     }
-    #result {
-      color: white; /* hide from pixel results */
-    }
   </style>
-  <script src="resources/animation-test-helpers.js" type="text/javascript" charset="utf-8"></script>
-  <script type="text/javascript" charset="utf-8">
-    const expectedValues = [
-      // [animation-name, time, element-id, property, expected-value, tolerance]
-      ["move1", 0.5, "box", "margin-left", 75, 20],
-      ["move1", 1.0, "box", "margin-left", 150, 20],
-      ["move1", 2.5, "box", "margin-left", 150, 20],
-    ];
+  <script src="../resources/testharness.js"></script>
+  <script src="../resources/testharnessreport.js"></script>
+  <script src="resources/animation-test.js"></script>
+</head>
+<body>
+<div id="box"></div>
+<script>
 
-    function pauseAnimation()
-    {
-        const box = document.getElementById("box");
-        box.style.webkitAnimationPlayState = "paused";
-        box.getAnimations()[0].currentTime = 1000;
-    }
+async_test(async t => {
+    const delay = 100;
 
-    function setTimers()
-    {
-        setTimeout(pauseAnimation, 1000);
-    }
+    const test = new AnimationTest({
+        target: document.getElementById("box"),
+        styleExtractor: style => parseFloat(style.marginLeft)
+    });
 
-    runAnimationTest(expectedValues, setTimers, null, true);
+    // Record two computed values after the specified delay each.
+    await test.recordValueAfterRunningFor(delay);
+    await test.recordValueAfterRunningFor(delay);
 
-  </script>
-</head>
-<body>
-<!-- This tests the operation of -webkit-animation-play-state. After 1 second the red boxes should be hidden by the green boxes. You should see no red boxes. -->
-<div id="box"></div>
-<div id="safezone"></div>
-<div id="result"></div>
+    // We'll now pause the animation using the CSS property "animation-play-state".
+    box.style.animationPlayState = "paused";
+
+    // And now we'll record values after the specified delay each and check that those are the same.
+    const initialPausedValue = await test.valueAfterWaitingFor(delay);
+    const currentPausedValue = await test.valueAfterWaitingFor(delay);
+    assert_equals(initialPausedValue, currentPausedValue, "Values recorded while paused are the same.");
+
+    // Finally, check the values recorded earlier in the test.
+    test.checkRecordedValues();
+
+    t.done();
+}, `Pausing an animation using the animation-play-state property stops animating styles.`);
+
+</script>
 </div>
 </body>
 </html>
diff --git a/LayoutTests/platform/ios-wk2/TestExpectations b/LayoutTests/platform/ios-wk2/TestExpectations
@@ -1754,6 +1754,4 @@ webkit.org/b/186045 [ Release ] imported/w3c/web-platform-tests/css/css-display/
 webkit.org/b/212532 http/wpt/service-workers/service-worker-crashing-while-fetching.https.html [ Pass Failure ]
 webkit.org/b/212532 http/wpt/service-workers/service-worker-different-process.https.html [ Pass Failure ]
 
-webkit.org/b/212641 animations/play-state-paused.html [ Pass Failure ]
-
 webkit.org/b/212696 imported/w3c/web-platform-tests/service-workers/service-worker/fetch-request-no-freshness-headers.https.html [ Pass Failure ]