Try again to deflake animations/play-state.html

Currently, we use runAnimationTest(), but this can't use the pause API because
it's incompatible with pausing animations through CSS. As a result, it's flaky.

This change re-writes the test to not use runAnimationTest() and to avoid the
need for precise timing,

R=dstockwell

Review URL: https://codereview.chromium.org/38303003

git-svn-id: svn://svn.chromium.org/blink/trunk@160403 bbb929c8-8fbe-4397-9dbb-9b2b20218538
diff --git a/LayoutTests/animations/play-state-expected.txt b/LayoutTests/animations/play-state-expected.txt
index 077a50c..df78df5 100644
--- a/LayoutTests/animations/play-state-expected.txt
+++ b/LayoutTests/animations/play-state-expected.txt
@@ -1,10 +1,8 @@
-Warning this test is running in real-time and may be flaky.
-PASS - "webkitTransform" property for "box1" element at 0.5s saw something close to: 1,0,0,1,25,0
-PASS - "left" property for "box2" element at 0.5s saw something close to: 25
-PASS - "webkitTransform" property for "box1" element at 1.1s saw something close to: 1,0,0,1,50,0
-PASS - "left" property for "box2" element at 1.1s saw something close to: 50
-PASS - "webkitTransform" property for "box1" element at 1.5s saw something close to: 1,0,0,1,50,0
-PASS - "left" property for "box2" element at 1.5s saw something close to: 50
-PASS - "webkitTransform" property for "box1" element at 2.5s saw something close to: 1,0,0,1,75,0
-PASS - "left" property for "box2" element at 2.5s saw something close to: 75
+This tests the operation of -webkit-animation-play-state. We test style while the animations are paused and once unpaused.
 
+transform
+left
+PASS: Element 'translate' had correct style when paused
+PASS: Element 'left' had correct style when paused
+PASS: Element 'translate' had correct style at end
+PASS: Element 'left' had correct style at end
diff --git a/LayoutTests/animations/play-state.html b/LayoutTests/animations/play-state.html
index fdc4a30..c13f460 100644
--- a/LayoutTests/animations/play-state.html
+++ b/LayoutTests/animations/play-state.html
@@ -2,76 +2,96 @@
 <head>
   <title>Test of -webkit-animation-play-state</title>
   <style>
-    #box1 {
+    .target {
       height: 100px;
       width: 100px;
-      background-color: blue;
-      margin: 0;
-      -webkit-animation-duration: 2s;
+      -webkit-animation-duration: 40ms;
       -webkit-animation-timing-function: linear;
+    }
+    #translate {
+      background-color: blue;
       -webkit-animation-name: "move1";
-      -webkit-animation-play-state: running;
     }
     @-webkit-keyframes "move1" {
-        from { -webkit-transform: translateX(0); }
-        to   { -webkit-transform: translateX(100px); }
+        from { -webkit-transform: translateX(100px); }
+        to   { -webkit-transform: translateX(200px); }
     }
-    #box2 {
-      position:absolute;
-      top: 260px;
-      height: 100px;
-      width: 100px;
+    #left {
+      position: relative;
       background-color: red;
-      -webkit-animation-duration: 2s;
-      -webkit-animation-timing-function: linear;
       -webkit-animation-name: "move2";
     }
     @-webkit-keyframes "move2" {
-        from { left: 0; }
-        to   { left: 100px; }
+        from { left: 100px; }
+        to   { left: 200px; }
+    }
+    .paused {
+      -webkit-animation-play-state: paused;
     }
   </style>
   <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
   <script type="text/javascript">
-
-    const expectedValues = [
-      // [time, element-id, property, expected-value, tolerance]
-      [0.5, "box1", "webkitTransform", [1,0,0,1,25,0], 24],
-      [1.1, "box1", "webkitTransform", [1,0,0,1,50,0], 5],
-      [1.5, "box1", "webkitTransform", [1,0,0,1,50,0], 5],
-      [2.5, "box1", "webkitTransform", [1,0,0,1,75,0], 24],
-      [0.5, "box2", "left", 25, 24],
-      [1.1, "box2", "left", 50, 5],
-      [1.5, "box2", "left", 50, 5],
-      [2.5, "box2", "left", 75, 24],
-    ];
-
-    function stop()
-    {
-        document.getElementById("box1").style.webkitAnimationPlayState = "paused";
-        document.getElementById("box2").style.webkitAnimationPlayState = "paused";
+    if (window.testRunner) {
+      testRunner.dumpAsText();
+      testRunner.waitUntilDone();
     }
 
-    function start()
-    {
-        document.getElementById("box1").style.webkitAnimationPlayState = "running";
-        document.getElementById("box2").style.webkitAnimationPlayState = "running";
+    function log(message) { 
+      var div = document.createElement('div'); 
+      div.textContent = message; 
+      document.body.appendChild(div);  
     }
 
-    setTimeout(stop, 1000);
-    setTimeout(start, 2000);
-    runAnimationTest(expectedValues, null, null, true);
+    function logPassFail(expected, actual, id, description) {
+      var didPass = expected === actual;
+      log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + '  style ' + description);
+    }
+
+    function togglePaused() {
+      var targets = document.getElementsByClassName('target');
+      for (var i = 0; i < targets.length; ++i) {
+        targets[i].classList.toggle('paused');
+      }
+    }
+
+    var start = function() {
+      document.removeEventListener('webkitAnimationStart', start, false);
+      setTimeout(pause, 20);
+    }
+
+    var transform;
+    var left;
+    function pause() {
+      togglePaused();
+      transform = getComputedStyle(document.getElementById('translate')).webkitTransform;
+      left = getComputedStyle(document.getElementById('left')).left;
+      setTimeout(resume, 20);
+    }
+
+    function resume() {
+      logPassFail(transform, getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'when paused');
+      logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
+      togglePaused();
+      setTimeout(end, 100);
+    }
+
+    function end() {
+      logPassFail('none', getComputedStyle(document.getElementById('translate')).webkitTransform, 'translate', 'at end');
+      logPassFail('auto', getComputedStyle(document.getElementById('left')).left, 'left', 'at end');
+      if (window.testRunner) {
+        testRunner.notifyDone();
+      }
+    }
+
+    document.addEventListener('webkitAnimationStart', start, false);
   </script>
 </head>
 <body>
 <p>
-This tests the operation of -webkit-animation-play-state. After 2 second the box should stop and after one
-more second it should start again. We test it both while in motion and when stopped.
-<div id="box1">
-</div>
-<div id="box2">
-</div>
-<div id="result">
-</div>
+  This tests the operation of -webkit-animation-play-state. We test style
+  while the animations are paused and once unpaused.
+</p>
+<div class="target" id="translate">transform</div>
+<div class="target" id="left">left</div>
 </body>
 </html>