Add <popup> light dismiss behavior when <popup> is resized

Per the explainer [1] a <popup> should hide itself if it gets resized.
This CL implements that behavior. The existing test had a few bugs,
so I also updated it.

Bug: 1168738
Change-Id: Id304737ef768d96509e3968c29fa76e0bd93acc8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2889473
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Ionel Popescu <[email protected]>
Reviewed-by: Ionel Popescu <[email protected]>
Cr-Commit-Position: refs/heads/master@{#882137}

html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html

@@ -58,6 +58,9 @@
       .pointerUp({button: actions.ButtonType.LEFT})
       .send();
   }
+  function eventLoop() {
+    return new Promise(resolve => setTimeout(resolve, 0));
+  }
 
   const popup1 = document.querySelector('#p1');
   const button1 = document.querySelector('#b1');
@@ -183,17 +186,27 @@
       popup6.hide();
     },'Scrolling within a popup should not close the popup');
 
+    popup1.show();
+    await eventLoop(); // Wait for initial resize observer to run
+    assert_true(popup1.open,'popup1 should be open');
+    popup1.style.width = "250px";
+    await eventLoop(); // Wait for style change resize to run
     test(t => {
-      popup1.show();
-      assert_true(popup1.open,'popup1 should be open');
-      popup1.style.width = "100px";
       assert_false(popup1.open,'popup1 should close when resized');
       popup1.style.width = "";
-      popup1.show();
-      assert_true(popup1.open);
-      popup1.querySelector('span').textContent = "This is a test, which is longer than original";
+    },'Popup should be closed by an explicit resize of the popup');
+
+    popup1.show();
+    await eventLoop(); // Wait for initial resize observer to run
+    assert_true(popup1.open);
+    const popup1Text = popup1.querySelector('span');
+    const originalText = popup1Text.textContent;
+    popup1Text.textContent = "This is a test, which is longer than the original";
+    await eventLoop(); // Wait for style change resize to run
+    test(t => {
       assert_false(popup1.open,'popup1 should close when text content forces its size to change');
-    },'Popup should be closed by a resize of the popup');
+      popup1Text.textContent = originalText;
+    },'Popup should be closed by an implicit resize of the popup');
 
     done();
   })();

lint.ignore

@@ -166,6 +166,7 @@ SET TIMEOUT: html/cross-origin-embedder-policy/credentialless/resources/dispatch
 SET TIMEOUT: html/editing/dnd/*
 SET TIMEOUT: html/semantics/embedded-content/the-iframe-element/*
 SET TIMEOUT: html/semantics/embedded-content/the-img-element/*
+SET TIMEOUT: html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html
 SET TIMEOUT: html/semantics/scripting-1/the-script-element/*
 SET TIMEOUT: html/webappapis/dynamic-markup-insertion/opening-the-input-stream/0*
 SET TIMEOUT: html/webappapis/dynamic-markup-insertion/opening-the-input-stream/resources/history-frame.html