Fix flaky animations tests

The following tests relied on a callback occurring within a 2 second
window
while an animation was in progress. We now allow 10 seconds.

animations/3d/matrix-transform-type-animation.html
animations/3d/transform-perspective.html
animations/cascade-important-keyframe-properties.html
animations/cascade-important.html

BUG=248938

Change-Id: If33bae00d4da904a5520c83cc85f314e6f7f400b
Reviewed-on: https://chromium-review.googlesource.com/722824Reviewed-by: Darren Shen <shend@chromium.org>
Commit-Queue: Eric Willigers <ericwilligers@chromium.org>
Cr-Commit-Position: refs/heads/master@{#510025}

third_party/WebKit/LayoutTests/SlowTests

@@ -176,7 +176,6 @@ crbug.com/330389 [ Debug ] css-parser/color3_hsl.html [ Slow ]
 crbug.com/248938 [ Linux Win ] virtual/threaded/animations/combo-transform-rotate+scale.html [ Slow ]
 crbug.com/248938 virtual/threaded/animations/3d/change-transform-in-end-event.html [ Slow ]
 crbug.com/248938 virtual/threaded/animations/3d/state-at-end-event-transform.html [ Slow ]
-crbug.com/248938 virtual/threaded/animations/3d/transform-perspective.html [ Slow ]
 crbug.com/248938 virtual/threaded/animations/direction-and-fill/animation-direction-reverse-fill-mode-hardware.html [ Slow ]
 crbug.com/248938 virtual/threaded/animations/direction-and-fill/animation-direction-reverse-fill-mode.html [ Slow ]
 crbug.com/248938 virtual/threaded/animations/direction-and-fill/animation-direction-reverse-hardware.html [ Slow ]

third_party/WebKit/LayoutTests/animations/3d/matrix-transform-type-animation.html

@@ -23,12 +23,12 @@
     }
     
     #box {
-      -webkit-animation: anim 2s linear;
+      animation: anim 10s linear;
     }
     
-    @-webkit-keyframes anim {
+    @keyframes anim {
         from { transform: matrix(1, 0, 0, 1, 100, 0); }
-        to   { transform: matrix(1, 0, 0, 1, 0, 0); }
+        to   { transform: matrix(1, 0, 0, 1, -400, 0); }
     }
   </style>
   <script src="../resources/animation-test-helpers.js" type="text/javascript"></script>

third_party/WebKit/LayoutTests/animations/3d/transform-perspective-expected.txt

-PASS - "transform" property for "box" element at 0.5s saw something close to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0075, 0, 0, 0, 1)
-PASS - "transform" property for "box2" element at 0.5s saw something close to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00199, 0, 0, 0, 1)
+PASS - "transform" property for "box" element at 2.5s saw something close to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0075, 0, 0, 0, 1)
+PASS - "transform" property for "box2" element at 2.5s saw something close to: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00199, 0, 0, 0, 1)
 

third_party/WebKit/LayoutTests/animations/3d/transform-perspective.html

@@ -10,11 +10,11 @@
     }
     
     #box {
-      animation: anim 2s linear;
+      animation: anim 10s linear;
     }
     
     #box2 {
-      animation: anim2 2s linear;
+      animation: anim2 10s linear;
     }
 
     @keyframes anim {
@@ -31,8 +31,8 @@
   <script type="text/javascript">
     const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
-      [0.5, "box",  "transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0075, 0, 0, 0, 1)", 0.002],
-      [0.5, "box2", "transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00199, 0, 0, 0, 1)", 0.002],
+      [2.5, "box",  "transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.0075, 0, 0, 0, 1)", 0.002],
+      [2.5, "box2", "transform", "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, -0.00199, 0, 0, 0, 1)", 0.002],
     ];
     
     function setupTest()

third_party/WebKit/LayoutTests/animations/cascade-important-expected.txt

 FAIL - "background-color" property for "test" element at 0s expected: rgb(0, 128, 0) but saw: rgb(255, 0, 0)
-FAIL - "background-color" property for "test" element at 0.25s expected: rgb(0, 128, 0) but saw: rgb(255, 0, 0)
-PASS - "background-color" property for "test" element at 0.5s saw something close to: rgb(0, 128, 0)
+FAIL - "background-color" property for "test" element at 5s expected: rgb(0, 128, 0) but saw: rgb(255, 0, 0)
+PASS - "background-color" property for "test" element at 10s saw something close to: rgb(0, 128, 0)
 

third_party/WebKit/LayoutTests/animations/cascade-important-keyframe-properties-expected.txt

 PASS - "background-color" property for "test" element at 0s saw something close to: rgb(0, 128, 0)
-PASS - "background-color" property for "test" element at 0.25s saw something close to: rgb(0, 128, 0)
-PASS - "background-color" property for "test" element at 0.5s saw something close to: rgb(0, 128, 0)
+PASS - "background-color" property for "test" element at 5s saw something close to: rgb(0, 128, 0)
+PASS - "background-color" property for "test" element at 10s saw something close to: rgb(0, 128, 0)
 

third_party/WebKit/LayoutTests/animations/cascade-important-keyframe-properties.html

@@ -5,7 +5,7 @@
     #test {
       width: 100px;
       height: 100px;
-      animation: test 0.5s forwards;
+      animation: test 10s forwards;
     }
     @keyframes test {
         0% { background-color: green; }
@@ -18,8 +18,8 @@
     const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
       [0, "test", "background-color", "rgb(0, 128, 0)", 0],
-      [0.25, "test", "background-color", "rgb(0, 128, 0)", 0],
-      [0.5, "test", "background-color", "rgb(0, 128, 0)", 0],
+      [5, "test", "background-color", "rgb(0, 128, 0)", 0],
+      [10, "test", "background-color", "rgb(0, 128, 0)", 0],
     ];
     runAnimationTest(expectedValues);
   </script>

third_party/WebKit/LayoutTests/animations/cascade-important.html

@@ -6,7 +6,7 @@
       width: 100px;
       height: 100px;
       background-color: green !important;
-      animation: test 0.5s;
+      animation: test 10s;
     }
     @keyframes test {
         from { background-color: red; }
@@ -18,8 +18,8 @@
     const expectedValues = [
       // [time, element-id, property, expected-value, tolerance]
       [0, "test", "background-color", "rgb(0, 128, 0)", 0],
-      [0.25, "test", "background-color", "rgb(0, 128, 0)", 0],
-      [0.5, "test", "background-color", "rgb(0, 128, 0)", 0],
+      [5, "test", "background-color", "rgb(0, 128, 0)", 0],
+      [10, "test", "background-color", "rgb(0, 128, 0)", 0],
     ];
     runAnimationTest(expectedValues);
   </script>