Make timing of play-state.html less likely to fail.

As a result of aligning the animation clock to raf, the animations in play-state.html start a bit earlier. This resulted in the test flaking regularly. By waiting for a render and relaxing the time allowed this test no longer flakes. I've added another test to ensure that animations which start with the initial document load are indeed caught by an animationstart event. Bug: 986019 Change-Id: Ib0dff60ddfef4f0395e422ac94bbdc78cc660017 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1727370Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#684335}

Make timing of play-state.html less likely to fail.
As a result of aligning the animation clock to raf, the animations in play-state.html start a bit earlier. This resulted in the test flaking regularly. By waiting for a render and relaxing the time allowed this test no longer flakes. I've added another test to ensure that animations which start with the initial document load are indeed caught by an animationstart event. Bug: 986019 Change-Id: Ib0dff60ddfef4f0395e422ac94bbdc78cc660017 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1727370Reviewed-by: Yi Gu <yigu@chromium.org> Commit-Queue: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#684335}
d96612c6 · Robert Flack · Commit Bot · c1ac4f71 · d96612c6 · d96612c6
Commit d96612c6 authored Aug 06, 2019 by Robert Flack Committed by Commit Bot Aug 06, 2019
4 changed files
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -6357,9 +6357,6 @@ crbug.com/986477 [ Win ] external/wpt/cookies/path/match.html [ Pass Timeout ]
 crbug.com/986477 [ Win ] virtual/samesite-by-default-cookies/external/wpt/cookies/path/match.html [ Pass Timeout ]
 # Sheriff 2019-07-24
-crbug.com/986019 animations/play-state.html [ Pass Timeout ]
-crbug.com/986019 virtual/threaded/animations/play-state.html [ Pass Timeout ]
-crbug.com/986019 virtual/disable-blink-gen-property-trees/animations/play-state.html [ Pass Timeout ]
 crbug.com/987108 [ Mac ] fast/forms/select/disabled-select-change-index.html [ Failure ]
 crbug.com/987132 [ Mac ] fast/forms/select/option-strip-whitespace.html [ Failure ]
 crbug.com/986282 external/wpt/client-hints/accept-ch-lifetime.tentative.https.html [ Pass Failure ]

--- a/third_party/blink/web_tests/animations/animation-start-expected.txt
+++ b/third_party/blink/web_tests/animations/animation-start-expected.txt
+This tests the order and firing of animationstart events for animations which started as soon as the document loads.
+transform
+left
+animationstart received for translate
+animationstart received for left
--- a/third_party/blink/web_tests/animations/animation-start.html
+++ b/third_party/blink/web_tests/animations/animation-start.html
+<!DOCTYPE html>
+<head>
+  <title>Test for animationstart event during initial rendering</title>
+  <style>
+    .target {
+      height: 100px;
+      width: 100px;
+      animation-duration: 40ms;
+    }
+    #translate {
+      background-color: blue;
+      animation-name: move1;
+    }
+    @keyframes move1 {
+        from { transform: translateX(100px); }
+        to   { transform: translateX(200px); }
+    }
+    #left {
+      position: relative;
+      background-color: red;
+      animation-name: move2;
+    }
+    @keyframes move2 {
+        from { left: 100px; }
+        to   { left: 200px; }
+    }
+  </style>
+  <script src="resources/animation-test-helpers.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    if (window.testRunner) {
+      testRunner.dumpAsText();
+      testRunner.waitUntilDone();
+    }
+    function log(message) {
+      var div = document.createElement('div');
+      div.textContent = message;
+      document.body.appendChild(div);
+    }
+    var startCount = 0;
+    var start = function(evt) {
+      log('animationstart received for ' + evt.target.id);
+      if (++startCount == 2 && window.testRunner)
+        testRunner.notifyDone();
+    }
+    document.addEventListener('animationstart', start, false);
+  </script>
+</head>
+<body>
+<p>
+  This tests the order and firing of animationstart events for
+  animations which started as soon as the document loads.
+</p>
+<!--
+  Test both composited and non-composited animations as they have different
+  start behavior but should both generate animationstart events.
+-->
+<div class="target" id="translate">transform</div>
+<div class="target" id="left">left</div>
+</body>
+</html>
--- a/third_party/blink/web_tests/animations/play-state.html
+++ b/third_party/blink/web_tests/animations/play-state.html
@@ -5,11 +5,13 @@
    .target {
      height: 100px;
      width: 100px;
-      animation-duration: 40ms;
+      animation-duration: 100ms;
      animation-timing-function: linear;
    }
    #translate {
      background-color: blue;
+    }
+    #translate.started {
      animation-name: move1;
    }
    @keyframes move1 {
@@ -19,6 +21,8 @@
    #left {
      position: relative;
      background-color: red;
+    }
+    #left.started {
      animation-name: move2;
    }
    @keyframes move2 {
@@ -36,10 +40,10 @@
      testRunner.waitUntilDone();
    }
-    function log(message) { 
+    function log(message) {
-      var div = document.createElement('div'); 
+      var div = document.createElement('div');
-      div.textContent = message; 
+      div.textContent = message;
-      document.body.appendChild(div);  
+      document.body.appendChild(div);
    }
    function logPassFail(expected, actual, id, description) {
@@ -47,36 +51,39 @@
      log((didPass ? 'PASS' : 'FAIL') + ': Element \'' + id + '\' had ' + (didPass ? 'correct' : 'incorrect') + '  style ' + description);
    }
-    function togglePaused() {
+    function toggleClass(className) {
      var targets = document.getElementsByClassName('target');
      for (var i = 0; i < targets.length; ++i) {
-        targets[i].classList.toggle('paused');
+        targets[i].classList.toggle(className);
      }
    }
    var start = function() {
      document.removeEventListener('animationstart', start, false);
-      setTimeout(pause, 20);
+      requestAnimationFrame(pause);
    }
    var transform;
    var left;
+    var paused = false;
    function pause() {
-      togglePaused();
+      paused = true;
+      toggleClass('paused');
      transform = getComputedStyle(document.getElementById('translate')).transform;
      left = getComputedStyle(document.getElementById('left')).left;
-      setTimeout(resume, 20);
+      requestAnimationFrame(resume);
    }
    function resume() {
      logPassFail(transform, getComputedStyle(document.getElementById('translate')).transform, 'translate', 'when paused');
      logPassFail(left, getComputedStyle(document.getElementById('left')).left, 'left', 'when paused');
-      togglePaused();
+      toggleClass('paused');
-      document.addEventListener('animationend', end, false);
    }
    function end() {
      document.removeEventListener('animationend', end, false);
+      if (!paused)
+        log('Missed frame in which to pause animation');
      logPassFail('none', getComputedStyle(document.getElementById('translate')).transform, 'translate', 'at end');
      logPassFail('0px', getComputedStyle(document.getElementById('left')).left, 'left', 'at end');
      if (window.testRunner) {
@@ -84,7 +91,15 @@
      }
    }
-    document.addEventListener('animationstart', start, false);
+    // Wait until the page has loaded and painted to start the animations to
+    // ensure we will have enough main frames to pause the animation.
+    requestAnimationFrame(function() {
+      requestAnimationFrame(function() {
+        document.addEventListener('animationstart', start, false);
+        document.addEventListener('animationend', end, false);
+        toggleClass('started');
+      });
+    });
  </script>
 </head>
 <body>