WebUI: fix flaky cr-action-menu test.

Bug: 812947
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: If2a653a7784b464d44bbde72d42df0ca719c2e90
Reviewed-on: https://chromium-review.googlesource.com/923580Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537477}

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

@@ -306,42 +306,45 @@ suite('CrActionMenu', function() {
   });
 
 
-  test('[auto-reposition] enables repositioning if content changes', function() {
-    menu.autoReposition = true;
-
-    dots.style.marginLeft = '800px';
-
-    let dotsRect = dots.getBoundingClientRect();
-
-    // Anchored at right-top by default.
-    menu.showAt(dots);
-    assertTrue(menu.open);
-    let menuRect = menu.getBoundingClientRect();
-    assertEquals(
-        Math.round(dotsRect.left + dotsRect.width),
-        Math.round(menuRect.left + menuRect.width));
-    assertEquals(dotsRect.top, menuRect.top);
-
-    const lastMenuLeft = menuRect.left;
-    const lastMenuWidth = menuRect.width;
-
-    // Still anchored at the right place after content size changes.
-    items[0].textContent = 'this is a long string to make menu wide';
-    // Flush to wait for resizeObeserver's cycle.
-    return PolymerTest.flushTasks().then(() => {
-      assertTrue(menu.open);
-      menuRect = menu.getBoundingClientRect();
-      // Test that menu width got larger.
-      assertTrue(menuRect.width > lastMenuWidth);
-      // Test that menu upper-left moved further left.
-      assertTrue(menuRect.left < lastMenuLeft);
-      // Test that right and top did not move since it is anchored there.
-      assertEquals(
-          Math.round(dotsRect.left + dotsRect.width),
-          Math.round(menuRect.left + menuRect.width));
-      assertEquals(dotsRect.top, menuRect.top);
-    });
-  });
+  test(
+      '[auto-reposition] enables repositioning if content changes',
+      function(done) {
+        menu.autoReposition = true;
+
+        dots.style.marginLeft = '800px';
+
+        let dotsRect = dots.getBoundingClientRect();
+
+        // Anchored at right-top by default.
+        menu.showAt(dots);
+        assertTrue(menu.open);
+        let menuRect = menu.getBoundingClientRect();
+        assertEquals(
+            Math.round(dotsRect.left + dotsRect.width),
+            Math.round(menuRect.left + menuRect.width));
+        assertEquals(dotsRect.top, menuRect.top);
+
+        const lastMenuLeft = menuRect.left;
+        const lastMenuWidth = menuRect.width;
+
+        menu.addEventListener('cr-action-menu-repositioned', () => {
+          assertTrue(menu.open);
+          menuRect = menu.getBoundingClientRect();
+          // Test that menu width got larger.
+          assertTrue(menuRect.width > lastMenuWidth);
+          // Test that menu upper-left moved further left.
+          assertTrue(menuRect.left < lastMenuLeft);
+          // Test that right and top did not move since it is anchored there.
+          assertEquals(
+              Math.round(dotsRect.left + dotsRect.width),
+              Math.round(menuRect.left + menuRect.width));
+          assertEquals(dotsRect.top, menuRect.top);
+          done();
+        });
+
+        // Still anchored at the right place after content size changes.
+        items[0].textContent = 'this is a long string to make menu wide';
+      });
 
   suite('offscreen scroll positioning', function() {
     const bodyHeight = 10000;

ui/webui/resources/cr_elements/cr_action_menu/cr_action_menu.js

@@ -440,8 +440,10 @@ Polymer({
 
     if (this.autoReposition) {
       this.resizeObserver_ = new ResizeObserver(() => {
-        if (this.lastConfig_)
+        if (this.lastConfig_) {
           this.positionDialog_(this.lastConfig_);
+          this.fire('cr-action-menu-repositioned');  // For easier testing.
+        }
       });
 
       this.resizeObserver_.observe(this);