Animations tests: shard zoom-responsive-transform-animation.html

The test has sometimes been timing out.
https://test-results.appspot.com/dashboards/flakiness_dashboard.html#testType=webkit_layout_tests&tests=virtual%2Fthreaded%2Fanimations%2Fresponsive%2Fzoom-responsive-transform-animation.html

BUG=750549

Change-Id: I66df550c126985f597ab391b16dd8f217f6955bc
Reviewed-on: https://chromium-review.googlesource.com/695421
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Reviewed-by: Robert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#505838}

third_party/WebKit/LayoutTests/SlowTests

@@ -194,7 +194,6 @@ crbug.com/311482 virtual/threaded/animations/prefixed/keyframes-unprefixed-03.ht
 crbug.com/243871 virtual/threaded/fast/scroll-behavior/ [ Slow ]
 crbug.com/243871 virtual/threaded/fast/idle-callback/idle_periods.html [ Slow ]
 crbug.com/664857 virtual/threaded/animations/responsive/transform-responsive-neutral-keyframe.html [ Slow ]
-crbug.com/669911 virtual/threaded/animations/responsive/zoom-responsive-transform-animation.html [ Slow ]
 
 crbug.com/258896 animations/direction-and-fill/animation-direction-reverse-fill-mode.html [ Slow ]
 

third_party/WebKit/LayoutTests/TestExpectations

@@ -1150,7 +1150,6 @@ crbug.com/528062 [ Win ] virtual/mojo-loading/http/tests/security/xssAuditor/chu
 crbug.com/392706 virtual/threaded/animations/play-state-initially-paused.html [ Failure ]
 
 # Added Linux in crbug.com/750549
-crbug.com/743009 [ Linux Win ] virtual/threaded/animations/responsive/zoom-responsive-transform-animation.html [ Pass Timeout ]
 
 # Part of a larger issue referenced in the bug. This specific issue will be fixed shortly.
 crbug.com/408159 accessibility/is-ignored-change-sends-notification.html [ Timeout ]

third_party/WebKit/LayoutTests/animations/responsive/resources/zoom-responsive.css

+#container {
+  position: absolute;
+  top: 0;
+  font-size: 10px;
+}
+.target {
+  width: 40px;
+  height: 40px;
+  border-top: solid;
+  border-left: solid;
+  margin-bottom: 20px;
+}

third_party/WebKit/LayoutTests/animations/responsive/resources/zoom-responsive.js

+'use strict';
+
+function populate(property, values) {
+  var container = document.querySelector('#container');
+  values.forEach(value => {
+    var text = document.createElement('div');
+    text.textContent = value;
+    container.appendChild(text);
+
+    var target = document.createElement('div');
+    target.classList.add('target');
+    container.appendChild(target);
+
+    var keyframe = {};
+    keyframe[property] = value;
+
+    target.animate([keyframe, keyframe], 1e8);
+  });
+}
+
+function zoomDuringAnimation(property, values) {
+  var footer = document.createElement('div');
+  document.body.appendChild(footer);
+  populate(property, values);
+
+  function waitForCompositor() {
+    return footer.animate({opacity: ['1', '1']}, 1).ready;
+  }
+
+  if (window.testRunner)
+    testRunner.waitUntilDone();
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      internals.setZoomFactor(2);
+      if (!window.testRunner)
+        return;
+
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          waitForCompositor().then(() => {
+            requestAnimationFrame(() => {
+              testRunner.notifyDone();
+            });
+          });
+        });
+      });
+    });
+  });
+}
+
+function zoomBeforeAnimation(property, values) {
+  internals.setZoomFactor(2);
+
+  var footer = document.createElement('div');
+  document.body.appendChild(footer);
+  populate(property, values);
+
+  function waitForCompositor() {
+    return footer.animate({opacity: ['1', '1']}, 1).ready;
+  }
+
+  if (!window.testRunner)
+    return;
+
+  testRunner.waitUntilDone();
+
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      waitForCompositor().then(() => {
+        requestAnimationFrame(() => {
+          testRunner.notifyDone();
+        });
+      });
+    });
+  });
+}

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-001-expected.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="resources/zoom-responsive.css">
+<script src="resources/zoom-responsive.js"></script>
+<div id="container"></div>
+<script>
+
+zoomBeforeAnimation('transform', [
+  'perspective(200px) translate3D(10px, 10px, 10px)',
+  'matrix(0, 1, 1, 0, 10, 10)'
+]);
+
+</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-001.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="resources/zoom-responsive.css">
+<script src="resources/zoom-responsive.js"></script>
+<div id="container"></div>
+<script>
+
+zoomDuringAnimation('transform', [
+  'perspective(200px) translate3D(10px, 10px, 10px)',
+  'matrix(0, 1, 1, 0, 10, 10)'
+]);
+
+</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-002-expected.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="resources/zoom-responsive.css">
+<script src="resources/zoom-responsive.js"></script>
+<div id="container"></div>
+<script>
+
+zoomBeforeAnimation('transform', [
+  'matrix3d(' +
+    '0, 1, 0, 0, ' +
+    '1, 0, 0, 0, ' +
+    '0, 0, 1, 0, ' +
+    '10, 10, 10, 1)',
+  'perspective(200px) rotateY(45deg)',
+]);
+
+</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-002.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="resources/zoom-responsive.css">
+<script src="resources/zoom-responsive.js"></script>
+<div id="container"></div>
+<script>
+
+zoomDuringAnimation('transform', [
+  'matrix3d(' +
+    '0, 1, 0, 0, ' +
+    '1, 0, 0, 0, ' +
+    '0, 0, 1, 0, ' +
+    '10, 10, 10, 1)',
+  'perspective(200px) rotateY(45deg)',
+]);
+
+</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-003-expected.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="resources/zoom-responsive.css">
+<script src="resources/zoom-responsive.js"></script>
+<div id="container"></div>
+<script>
+
+zoomBeforeAnimation('transform', [
+  'matrix3d(' +
+    '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933,' +
+    '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,' +
+    '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933,' +
+    '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)',
+  'none',
+]);
+
+</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-003.html

+<!DOCTYPE html>
+<link rel="stylesheet" href="resources/zoom-responsive.css">
+<script src="resources/zoom-responsive.js"></script>
+<div id="container"></div>
+<script>
+
+zoomDuringAnimation('transform', [
+  'matrix3d(' +
+    '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933,' +
+    '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,' +
+    '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933,' +
+    '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)',
+  'none',
+]);
+
+</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation-expected.html

-<!DOCTYPE html>
-<style>
-#container {
-  position: absolute;
-  top: 0;
-  font-size: 10px;
-}
-.target {
-  width: 40px;
-  height: 40px;
-  border-top: solid;
-  border-left: solid;
-  margin-bottom: 20px;
-}
-</style>
-<div id="container"></div>
-<div id="footer"></div>
-<script>
-'use strict';
-internals.setZoomFactor(2);
-
-[
-  'perspective(200px) translate3D(10px, 10px, 10px)',
-  'matrix(0, 1, 1, 0, 10, 10)',
-  'matrix3d(' +
-    '0, 1, 0, 0, ' +
-    '1, 0, 0, 0, ' +
-    '0, 0, 1, 0, ' +
-    '10, 10, 10, 1)',
-  'matrix3d(' +
-    '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933,' +
-    '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,' +
-    '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933,' +
-    '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)', // Equivalent to perspective(200px) rotateY(45deg)
-  'perspective(200px) rotateY(45deg)',
-  'none', // Composited animations fail to zoom the last expectation correctly. ):
-].forEach(transform => {
-  var text = document.createElement('div');
-  text.textContent = transform;
-  container.appendChild(text);
-
-  var target = document.createElement('div');
-  target.classList.add('target');
-  container.appendChild(target);
-  target.animate([
-    {transform: transform},
-    {transform: transform},
-  ], 1e8);
-});
-
-// We must wait a frame to let compositor animations render.
-if (window.testRunner)
-  testRunner.waitUntilDone();
-
-function waitForCompositor() {
-  return footer.animate({opacity: ['1', '1']}, 1).finished;
-}
-
-requestAnimationFrame(() => {
-  requestAnimationFrame(() => {
-    waitForCompositor().then(() => {
-      if (window.testRunner)
-        testRunner.notifyDone();
-    });
-  });
-});
-</script>

third_party/WebKit/LayoutTests/animations/responsive/zoom-responsive-transform-animation.html

-<!DOCTYPE html>
-<style>
-#container {
-  position: absolute;
-  top: 0;
-  font-size: 10px;
-}
-.target {
-  width: 40px;
-  height: 40px;
-  border-top: solid;
-  border-left: solid;
-  margin-bottom: 20px;
-}
-</style>
-<div id="container"></div>
-<div id="footer"></div>
-<script>
-'use strict';
-[
-  'perspective(200px) translate3D(10px, 10px, 10px)',
-  'matrix(0, 1, 1, 0, 10, 10)',
-  'matrix3d(' +
-    '0, 1, 0, 0, ' +
-    '1, 0, 0, 0, ' +
-    '0, 0, 1, 0, ' +
-    '10, 10, 10, 1)',
-  'matrix3d(' +
-    '0.707106781186548, 0.000000000000000, -0.707106781186547, 0.003535533905933,' +
-    '0.000000000000000, 1.000000000000000, 0.000000000000000, 0.000000000000000,' +
-    '0.707106781186547, 0.000000000000000, 0.707106781186548, -0.003535533905933,' +
-    '0.000000000000000, 0.000000000000000, 0.000000000000000, 1.000000000000000)',
-  'perspective(200px) rotateY(45deg)',
-  'none',
-].forEach(transform => {
-  var text = document.createElement('div');
-  text.textContent = transform;
-  container.appendChild(text);
-
-  var target = document.createElement('div');
-  target.classList.add('target');
-  container.appendChild(target);
-  target.animate([
-    {transform: transform},
-    {transform: transform},
-  ], 1e8);
-});
-
-if (window.testRunner)
-  testRunner.waitUntilDone();
-
-function waitForCompositor() {
-  return footer.animate({opacity: ['1', '1']}, 1).finished;
-}
-
-requestAnimationFrame(() => {
-  requestAnimationFrame(() => {
-    internals.setZoomFactor(2);
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        waitForCompositor().then(() => {
-          if (window.testRunner)
-            testRunner.notifyDone();
-        });
-      });
-    });
-  });
-});
-</script>