[webui] Re-Enable cr-lottie tests

It's not clear if these tests will still be flaky on the CI or not. We
made some changes that may have deflaked them.

Bug: 1103865, 1021474b
Change-Id: Icfe7ed6637868fc29e30c0d182f985a6b38aa000
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2311144
Commit-Queue: Nina Satragno <nsatragno@chromium.org>
Auto-Submit: Nina Satragno <nsatragno@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#791463}

chrome/test/data/webui/cr_elements/cr_lottie_tests.js

@@ -118,9 +118,6 @@ suite('cr_lottie_test', function() {
   /** @type {Promise} */
   let waitForPlayingEvent;
 
-  /** @type {Promise} */
-  let waitForResizeEvent;
-
   setup(function(done) {
     mockController = new MockController();
 
@@ -151,8 +148,6 @@ suite('cr_lottie_test', function() {
         test_util.eventToPromise('cr-lottie-initialized', crLottieElement);
     waitForPlayingEvent =
         test_util.eventToPromise('cr-lottie-playing', crLottieElement);
-    waitForResizeEvent =
-        test_util.eventToPromise('cr-lottie-resized', crLottieElement);
 
     container = document.createElement('div');
     container.style.width = '300px';
@@ -173,16 +168,14 @@ suite('cr_lottie_test', function() {
     await waitForPlayingEvent;
   });
 
-  // TODO(crbug.com/1021474): flaky.
-  test.skip('TestResize', async () => {
+  test('TestResize', async () => {
     createLottieElement();
     await waitForInitializeEvent;
     await waitForPlayingEvent;
-    await waitForResizeEvent;
 
     const newHeight = 300;
     const newWidth = 400;
-    waitForResizeEvent =
+    const waitForResizeEvent =
         test_util.eventToPromise('cr-lottie-resized', crLottieElement)
             .then(function(e) {
               assertEquals(e.detail.height, newHeight);
@@ -225,27 +218,58 @@ suite('cr_lottie_test', function() {
     await waitForPlayingEvent;
   });
 
-  // TODO(crbug.com/1021474): flaky.
-  test.skip('TestRenderFrame', async () => {
+  test('TestRenderFrame', async () => {
+    // TODO(crbug.com/1108915): Offscreen canvas has a race issue when used in
+    // this test framework. To ensure that we capture a frame from the animation
+    // and not an empty frame, we delay the capture by 2 seconds.
+    // Note: This issue is only observed in tests.
+    const kRaceTimeout = 2000;
+
     createLottieElement();
-    // Offscreen canvas has a race issue when used in this test framework. To
-    // ensure that we capture a frame from the animation and not an empty frame,
-    // we delay the capture by 2 seconds.
+    await waitForInitializeEvent;
+    await waitForPlayingEvent;
+
+    const waitForFrameRender = new Promise(function(resolve) {
+      setTimeout(resolve, kRaceTimeout);
+    });
+
+    await waitForFrameRender;
+
+    const actualFrame =
+        crLottieElement.canvasElement_.toDataURL('image/jpeg', 0.5);
+    assertEquals(actualFrame, EXPECTED_FRAME_GREEN);
+  });
+
+  test('TestChangeAnimationUrl', async () => {
+    // TODO(crbug.com/1108915): Offscreen canvas has a race issue when used in
+    // this test framework. To ensure that we capture a frame from the animation
+    // and not an empty frame, we delay the capture by 2 seconds.
     // Note: This issue is only observed in tests.
     const kRaceTimeout = 2000;
 
+    createLottieElement();
+    await waitForInitializeEvent;
+    await waitForPlayingEvent;
+
+    waitForInitializeEvent =
+        test_util.eventToPromise('cr-lottie-initialized', crLottieElement);
+    waitForPlayingEvent =
+        test_util.eventToPromise('cr-lottie-playing', crLottieElement);
+
+    crLottieElement.animationUrl = SAMPLE_LOTTIE_BLUE;
+
     await waitForInitializeEvent;
     await waitForPlayingEvent;
 
     const waitForFrameRender = new Promise(function(resolve) {
-                                 setTimeout(resolve, kRaceTimeout);
-                               }).then(function() {
-      const actualFrame =
-          crLottieElement.canvasElement_.toDataURL('image/jpeg', 0.5);
-      assertEquals(actualFrame, EXPECTED_FRAME_GREEN);
+      setTimeout(resolve, kRaceTimeout);
     });
 
     await waitForFrameRender;
+
+    const actualFrame =
+        crLottieElement.canvasElement_.toDataURL('image/jpeg', 0.5);
+    assertEquals(actualFrame, EXPECTED_FRAME_BLUE);
   });
 
   test('TestHidden', async () => {