Deflake virtual/threaded/animations/responsive-neutral-keyframes.html

LayoutTests/animations/responsive-neutral-keyframes.html

Index: LayoutTests/animations/responsive-neutral-keyframes.html
diff --git a/LayoutTests/animations/responsive-neutral-keyframes.html b/LayoutTests/animations/responsive-neutral-keyframes.html
index 1cec5030a3fcecb3e1275fbfcd27051a294622b7..61d99115815c1f7c13e90429e6085562bcc2e965 100644
--- a/LayoutTests/animations/responsive-neutral-keyframes.html
+++ b/LayoutTests/animations/responsive-neutral-keyframes.html
@@ -4,98 +4,84 @@
 <style>
   @keyframes anim-missing-from { to { width: 200px; height: 200px; } }
   @keyframes anim-missing-to { from { left: 100px; } }
-  @keyframes anim-missing-both { 50% { background-color: rgb(200, 100, 40); } }
+  @keyframes anim-missing-both { 50% { left: 100px; } }
   @keyframes anim-missing-compositor { 100% { opacity: 0.0; } }
   @keyframes anim-missing-ems { from { top: 1em; } }
 
-  .target-before {
+  .target {
+    visibility: hidden;
+    position: absolute;
     width: 100px;
     height: 100px;
     background-color: rgb(0, 0, 0);
     left: 20px;
-    top: 1em;
-    font-size: 12px;
+    top: 50px;
+    font-size: 10px;
     opacity: 1.0;
   }
 
-  .target-after {
+  .target.changed {
     width: 600px;
     height: 300px;
     background-color: rgb(120, 160, 200);
     left: 200px;
-    top: 2em;
     opacity: 0.5;
   }
 
   #target1 { animation: anim-missing-from 4s -1s linear paused; }
   #target2 { animation: anim-missing-to 4s -1s linear paused; }
   #target3 { animation: anim-missing-both 4s -1s linear paused; }
-  #target4 { animation: anim-missing-both 0.2s 2 linear paused forwards; }
+  #target4 { animation: anim-missing-ems 4s -1s linear paused; }
   #target5 { animation: anim-missing-compositor 2s -1s linear paused; }
-  #target6 { animation: anim-missing-ems 0.2s 2 linear paused forwards; }
+  #target6 { animation: anim-missing-from 1e10s linear; }
 
 </style>
-<div id="target1" class="target-before"></div>
-<div id="target2" class="target-before"></div>
-<div id="target3" class="target-before"></div>
-<div id="target4" class="target-before"></div>
-<div id="target5" class="target-before"></div>
-<div id="target6" class="target-before"></div>
+<div id="target1" class="target"></div>
+<div id="target2" class="target"></div>
+<div id="target3" class="target"></div>
+<div id="target4" class="target"></div>
+<div id="target5" class="target"></div>
+<div id="target6" class="target"></div>
 <script>
-  var async1 = async_test("Neutral keyframe updates during animation style update");
-  var async2 = async_test("Neutral keyframe specified with ems responds to changes in font size");
-
-  target4.addEventListener('animationiteration', function() {
-      target4.className = 'target-after';
-  });
-
-  target4.addEventListener('animationend', function() {
-    assert_equals(getComputedStyle(target4).backgroundColor, 'rgb(120, 160, 200)');
-    async1.done();
-  });
-
-  target6.addEventListener('animationiteration', function() {
-    target6.style.fontSize = '24px';
-    target6.className = 'target-after';
-  });
-
-  target6.addEventListener('animationend', function() {
-    assert_equals(parseInt(getComputedStyle(target6).top), 48); // 2em at 24px
-    async2.done();
-  });
-
   test(function() {
     assert_equals(parseInt(getComputedStyle(target1).width), 125);
     assert_equals(parseInt(getComputedStyle(target1).height), 125);
-    target1.className = 'target-after';
+    target1.classList.add('changed');
     assert_equals(parseInt(getComputedStyle(target1).width), 500);
     assert_equals(parseInt(getComputedStyle(target1).height), 275);
   }, "Check that animations missing 'from' keyframes are responsive to underlying style changes");
 
   test(function() {
     assert_equals(parseInt(getComputedStyle(target2).left), 80);
-    target2.className = 'target-after';
+    target2.classList.add('changed');
     assert_equals(parseInt(getComputedStyle(target2).left), 125);
   }, "Check that animations missing 'to' keyframes are responsive to underlying style changes");
 
   test(function() {
-    assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(100, 50, 20)');
-    target3.className = 'target-after';
-    assert_equals(getComputedStyle(target3).backgroundColor, 'rgb(160, 130, 120)');
+    assert_equals(parseInt(getComputedStyle(target3).left), 60);
+    target3.classList.add('changed');
+    assert_equals(parseInt(getComputedStyle(target3).left), 150);
   }, "Check that animations missing both 'from' and 'to' keyframes are responsive to underlying style changes");
 
   test(function() {
-    target4.style.animationPlayState = 'running';
-  }, "Check that running animations with neutral keyframes are responsive to underlying style changes");
+    assert_equals(parseInt(getComputedStyle(target4).top), 20);
+    target4.style.fontSize = '90px';
+    assert_equals(parseInt(getComputedStyle(target4).top), 80);
+  }, "Check that animations with neutral keyframes are responsive to font size changes");
 
   test(function() {
     assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.5, 0.001);
-    target5.className = 'target-after';
+    target5.classList.add('changed');
     assert_approx_equals(parseFloat(getComputedStyle(target5).opacity), 0.25, 0.001);
   }, "Check that composited animations with neutral keyframes are responsive to underlying style changes");
 
-  test(function() {
-    assert_equals(parseInt(getComputedStyle(target6).top), 12); // 1em at 12px
-    target6.style.animationPlayState = 'running';
-  }, "Check that running animations with neutral keyframes specified using ems are responsive to font size changes");
+  var async = async_test("Check that running animations with neutral keyframes are responsive to style changes");
+  requestAnimationFrame(function() {
+    assert_less_than(parseInt(getComputedStyle(target6).width), 200);
+    requestAnimationFrame(function() {
+      target6.classList.add('changed');
+      assert_greater_than(parseInt(getComputedStyle(target6).width), 200);
+      async.done();
+    });
+  });
 </script>