chore(dialog): adds screenshot tests

PiperOrigin-RevId: 511353583

README.md

@@ -38,7 +38,7 @@ FAB                           | 🟢     | 🔴    | 🔴
 Icon button                   | 🟢     | 🔴    | 🔴
 Checkbox                      | 🟢     | 🟢    | 🔴
 Chips                         | 🔴     | 🔴    | 🔴
-Dialog                        | 🟢     | 🔴    | 🔴
+Dialog                        | 🟢     | 🟢    | 🔴
 Divider                       | 🟢     | 🟢    | 🟡
 Elevation                     | 🟢     | 🔴    | 🔴
 Focus ring                    | 🟢     | 🔴    | 🔴

dialog/harness.ts

@@ -19,26 +19,29 @@ export class DialogHarness extends Harness<Dialog> {
         HTMLDialogElement;
   }
 
-  async isOpening() {
-    await this.element.updateComplete;
-    return Boolean(this.element.open && this.element.hasAttribute('opening'));
+  isOpening() {
+    // Test access to state
+    // tslint:disable-next-line:no-dict-access-on-struct-type
+    return Boolean(this.element.open && this.element['opening']);
   }
 
-  async isClosing() {
-    await this.element.updateComplete;
-    return Boolean(!this.element.open && this.element.hasAttribute('closing'));
+  isClosing() {
+    // Test access to state
+    // tslint:disable-next-line:no-dict-access-on-struct-type
+    return Boolean(!this.element.open && this.element['closing']);
   }
 
   async transitionComplete() {
+    await this.element.updateComplete;
     let resolve = () => {};
     const doneTransitioning = new Promise<void>(resolver => {
       resolve = () => {
         resolver();
       };
     });
-    if (await this.isOpening()) {
+    if (this.isOpening()) {
       this.element.addEventListener('opened', resolve, {once: true});
-    } else if (await this.isClosing()) {
+    } else if (this.isClosing()) {
       this.element.addEventListener('closed', resolve, {once: true});
     } else {
       resolve();

dialog/lib/dialog.ts

@@ -384,9 +384,13 @@ export class Dialog extends LitElement {
     // Compute desired transition duration.
     const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(
         this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));
-    await new Promise(r => {
-      setTimeout(r, duration);
-    });
+    let promise = this.updateComplete;
+    if (duration > 0) {
+      promise = new Promise((r) => {
+        setTimeout(r, duration);
+      });
+    }
+    await promise;
     this.opening = false;
     this.closing = false;
     if (!this.open && this.dialogElement.open) {

dialog/test/window_size.json

@@ -0,0 +1,13 @@
+{
+  "capabilities": {
+    "goog:chromeOptions": {
+      "args": ["--window-position=0,0", "--window-size=599,800"]
+    },
+    "moz:firefoxOptions": {
+      "args": ["-width=599","-height=800"]
+    }
+  },
+  "extension": {
+    "xvfbResolution": "599x800x24"
+  }
+}