@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/test/overlay.test.js

@@ -1,20 +1,21 @@
 "use strict";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/overlay/sp-overlay.js";
+import "@spectrum-web-components/overlay/overlay-trigger.js";
+import "@spectrum-web-components/tooltip/sp-tooltip.js";
 import "@spectrum-web-components/popover/sp-popover.js";
 import { setViewport } from "@web/test-runner-commands";
 import {
-  Overlay
+  Overlay,
+  VirtualTrigger
 } from "@spectrum-web-components/overlay";
-import { isVisible } from "../../../test/testing-helpers.js";
 import {
   elementUpdated,
   expect,
-  fixture,
   html,
   nextFrame,
-  oneEvent,
-  waitUntil
+  oneEvent
 } from "@open-wc/testing";
 import { sendKeys } from "@web/test-runner-commands";
 import {
@@ -22,11 +23,28 @@ import {
   virtualElement
 } from "../stories/overlay.stories";
 import { sendMouse } from "../../../test/plugins/browser.js";
+import { spy } from "sinon";
+import "@spectrum-web-components/theme/sp-theme.js";
+import "@spectrum-web-components/theme/src/themes.js";
+import { render } from "@spectrum-web-components/base";
+import {
+  fixture,
+  isInteractive,
+  isOnTopLayer
+} from "../../../test/testing-helpers.js";
+async function styledFixture(story) {
+  const test = await fixture(html`
+        <sp-theme theme="spectrum" scale="medium" color="dark">
+            ${story}
+        </sp-theme>
+    `);
+  return test.children[0];
+}
 describe("Overlays", () => {
   let testDiv;
   let openOverlays = [];
   beforeEach(async () => {
-    testDiv = await fixture(
+    testDiv = await styledFixture(
       html`
                 <div id="top">
                     <style>
@@ -48,31 +66,28 @@ describe("Overlays", () => {
                             display: none;
                         }
                     </style>
-                    <sp-button
-                        id="first-button"
-                        variant="primary"
-                        slot="trigger"
-                    >
+                    <sp-button id="first-button" variant="primary">
                         Show Popover
                     </sp-button>
                     <div id="overlay-content">
-                        <sp-popover
-                            id="outer-popover"
-                            slot="click-content"
-                            direction="bottom"
-                            tip
-                            open
-                        >
-                            <sp-dialog class="options-popover-content">
-                                A popover message
+                        <sp-popover id="outer-popover" direction="bottom" tip>
+                            <sp-dialog no-divider>
+                                <div class="options-popover-content">
+                                    A popover message
+                                </div>
+                                <sp-button id="outer-focus-target">
+                                    Test 1
+                                </sp-button>
+                                <sp-button>Test 2</sp-button>
+                                <sp-button>Test 3</sp-button>
                             </sp-dialog>
                         </sp-popover>
-                        <div id="hover-1" class="hover-content">
+                        <sp-tooltip id="hover-1" class="hover-content">
                             Hover message
-                        </div>
-                        <div id="hover-2" class="hover-content">
+                        </sp-tooltip>
+                        <sp-tooltip id="hover-2" class="hover-content">
                             Other hover message
-                        </div>
+                        </sp-tooltip>
                     </div>
                 </div>
             `
@@ -80,7 +95,7 @@ describe("Overlays", () => {
     await elementUpdated(testDiv);
   });
   afterEach(() => {
-    openOverlays.map((close) => close());
+    openOverlays.map((overlay) => overlay.open = false);
     openOverlays = [];
   });
   [
@@ -95,88 +110,126 @@ describe("Overlays", () => {
     "left-end",
     "right",
     "right-start",
-    "right-end",
-    "none"
+    "right-end"
   ].map((direction) => {
     const placement = direction;
     it(`opens a popover - ${placement}`, async () => {
+      const clickSpy = spy();
       const button = testDiv.querySelector(
         "#first-button"
       );
       const outerPopover = testDiv.querySelector(
         "#outer-popover"
       );
-      expect(outerPopover.parentElement).to.exist;
-      if (outerPopover.parentElement) {
-        expect(outerPopover.parentElement.id).to.equal(
-          "overlay-content"
-        );
-      }
-      expect(isVisible(outerPopover)).to.be.false;
+      outerPopover.addEventListener("click", () => {
+        clickSpy();
+      });
+      expect(await isInteractive(outerPopover)).to.be.false;
       expect(button).to.exist;
-      const opened = oneEvent(button, "sp-opened");
+      const opened = oneEvent(outerPopover, "sp-opened");
       openOverlays.push(
-        await Overlay.open(button, "click", outerPopover, {
+        await Overlay.open(outerPopover, {
+          trigger: button,
+          type: "auto",
           delayed: false,
           placement,
           offset: 10
         })
       );
+      button.insertAdjacentElement(
+        "afterend",
+        openOverlays.at(-1)
+      );
       await opened;
-      expect(outerPopover.parentElement).to.exist;
-      if (outerPopover.parentElement) {
-        expect(outerPopover.parentElement.id).not.to.equal(
-          "overlay-content"
-        );
-      }
-      expect(isVisible(outerPopover)).to.be.true;
+      expect(await isInteractive(outerPopover)).to.be.true;
     });
   });
+  it(`opens a modal dialog`, async () => {
+    const button = testDiv.querySelector("#first-button");
+    const outerPopover = testDiv.querySelector("#outer-popover");
+    expect(await isInteractive(outerPopover)).to.be.false;
+    expect(button).to.exist;
+    const opened = oneEvent(outerPopover, "sp-opened");
+    openOverlays.push(
+      await Overlay.open(outerPopover, {
+        trigger: button
+      })
+    );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
+    await opened;
+    const firstFocused = outerPopover.querySelector(
+      "#outer-focus-target"
+    );
+    expect(document.activeElement === firstFocused).to.be.true;
+    await sendKeys({
+      press: "Tab"
+    });
+    expect(document.activeElement === button).to.be.false;
+    await sendKeys({
+      press: "Tab"
+    });
+    expect(document.activeElement === button).to.be.false;
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    expect(document.activeElement === button).to.be.false;
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    expect(document.activeElement === button).to.be.false;
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    expect(document.activeElement === button).to.be.false;
+  });
   it(`updates a popover`, async () => {
     const button = testDiv.querySelector("#first-button");
     const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(outerPopover.parentElement).to.exist;
-    if (outerPopover.parentElement) {
-      expect(outerPopover.parentElement.id).to.equal("overlay-content");
-    }
-    expect(isVisible(outerPopover)).to.be.false;
+    expect(await isInteractive(outerPopover)).to.be.false;
     expect(button).to.exist;
-    const opened = oneEvent(button, "sp-opened");
+    const opened = oneEvent(outerPopover, "sp-opened");
     openOverlays.push(
-      await Overlay.open(button, "click", outerPopover, {
-        delayed: false,
+      await Overlay.open(outerPopover, {
+        trigger: button,
+        type: "auto",
         offset: 10
       })
     );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
-    expect(isVisible(outerPopover)).to.be.true;
+    expect(await isInteractive(outerPopover)).to.be.true;
     Overlay.update();
-    expect(isVisible(outerPopover)).to.be.true;
+    expect(await isInteractive(outerPopover)).to.be.true;
   });
   it(`opens a popover w/ delay`, async () => {
     const button = testDiv.querySelector("#first-button");
     const outerPopover = testDiv.querySelector("#outer-popover");
-    expect(outerPopover.parentElement).to.exist;
-    if (outerPopover.parentElement) {
-      expect(outerPopover.parentElement.id).to.equal("overlay-content");
-    }
-    expect(isVisible(outerPopover)).to.be.false;
+    expect(await isInteractive(outerPopover)).to.be.false;
     expect(button).to.exist;
-    const opened = oneEvent(button, "sp-opened");
+    const opened = oneEvent(outerPopover, "sp-opened");
+    const start = performance.now();
     openOverlays.push(
-      await Overlay.open(button, "click", outerPopover, {
+      await Overlay.open(outerPopover, {
+        trigger: button,
+        type: "auto",
         delayed: true,
         offset: 10
       })
     );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
-    expect(outerPopover.parentElement).to.exist;
-    if (outerPopover.parentElement) {
-      expect(outerPopover.parentElement.id).not.to.equal(
-        "overlay-content"
-      );
-    }
-    expect(isVisible(outerPopover)).to.be.true;
+    const end = performance.now();
+    expect(await isInteractive(outerPopover)).to.be.true;
+    expect(end - start).to.be.greaterThan(1e3);
   });
   it("opens hover overlay", async () => {
     const button = testDiv.querySelector("#first-button");
@@ -184,38 +237,44 @@ describe("Overlays", () => {
     const clickOverlay = testDiv.querySelector(
       "#outer-popover"
     );
-    expect(isVisible(hoverOverlay)).to.be.false;
-    expect(isVisible(clickOverlay)).to.be.false;
-    let opened = oneEvent(button, "sp-opened");
+    expect(await isOnTopLayer(hoverOverlay)).to.be.false;
+    expect(await isOnTopLayer(clickOverlay)).to.be.false;
+    let opened = oneEvent(hoverOverlay, "sp-opened");
     openOverlays.push(
-      await Overlay.open(button, "hover", hoverOverlay, {
-        delayed: false,
+      await Overlay.open(hoverOverlay, {
+        trigger: button,
+        type: "hint",
         placement: "top",
         offset: 10
       })
     );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
-    expect(hoverOverlay.parentElement).to.exist;
-    if (hoverOverlay.parentElement) {
-      expect(hoverOverlay.parentElement.id).not.to.equal(
-        "overlay-content"
-      );
-    }
-    expect(isVisible(hoverOverlay)).to.be.true;
-    opened = oneEvent(button, "sp-opened");
+    expect(await isOnTopLayer(hoverOverlay)).to.be.true;
+    opened = oneEvent(clickOverlay, "sp-opened");
+    const closed = oneEvent(hoverOverlay, "sp-closed");
     openOverlays.push(
-      await Overlay.open(button, "click", clickOverlay, {
-        delayed: false,
+      await Overlay.open(clickOverlay, {
+        trigger: button,
+        type: "auto",
         placement: "bottom",
         offset: 10
       })
     );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
-    if (hoverOverlay.parentElement) {
-      expect(hoverOverlay.parentElement.id).to.equal("overlay-content");
-    }
-    expect(isVisible(hoverOverlay)).to.be.false;
-    expect(isVisible(clickOverlay)).to.be.true;
+    await closed;
+    expect(
+      await isInteractive(clickOverlay),
+      "click overlay not interactive"
+    ).to.be.true;
+    expect(await isOnTopLayer(hoverOverlay), "hover overlay interactive").to.be.false;
   });
   it("opens custom overlay", async () => {
     const button = testDiv.querySelector("#first-button");
@@ -225,94 +284,148 @@ describe("Overlays", () => {
     );
     expect(button).to.exist;
     expect(customOverlay).to.exist;
-    expect(isVisible(customOverlay)).to.be.false;
-    expect(isVisible(clickOverlay)).to.be.false;
-    let opened = oneEvent(button, "sp-opened");
+    expect(await isOnTopLayer(customOverlay)).to.be.false;
+    expect(await isOnTopLayer(clickOverlay)).to.be.false;
+    let opened = oneEvent(customOverlay, "sp-opened");
     openOverlays.push(
-      await Overlay.open(button, "custom", customOverlay, {
-        delayed: false,
+      await Overlay.open(customOverlay, {
+        trigger: button,
+        type: "auto",
         placement: "top",
         offset: 10
       })
     );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
-    expect(customOverlay.parentElement).to.exist;
-    if (customOverlay.parentElement) {
-      expect(customOverlay.parentElement.id).not.to.equal(
-        "overlay-content"
-      );
-    }
-    expect(isVisible(customOverlay)).to.be.true;
-    opened = oneEvent(button, "sp-opened");
+    expect(await isOnTopLayer(customOverlay)).to.be.true;
+    opened = oneEvent(clickOverlay, "sp-opened");
     openOverlays.push(
-      await Overlay.open(button, "click", clickOverlay, {
-        delayed: false,
+      await Overlay.open(clickOverlay, {
+        trigger: button,
+        type: "auto",
         placement: "bottom",
         offset: 10
       })
     );
+    button.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
-    expect(isVisible(customOverlay)).to.be.true;
-    expect(isVisible(clickOverlay)).to.be.true;
+    expect(await isOnTopLayer(clickOverlay), "click content open").to.be.true;
   });
   it("closes via events", async () => {
-    const el = await fixture(html`
-            <div id="root">
-                <sp-dialog dismissable></sp-dialog>
+    const test = await fixture(html`
+            <div>
+                <sp-popover id="root">
+                    <sp-dialog dismissable>
+                        Some Content for the Dialog.
+                    </sp-dialog>
+                </sp-popover>
             </div>
         `);
+    const el = test.querySelector("sp-popover");
     const dialog = el.querySelector("sp-dialog");
     const opened = oneEvent(el, "sp-opened");
     openOverlays.push(
-      await Overlay.open(el, "click", dialog, {
-        delayed: false,
+      await Overlay.open(el, {
+        trigger: test,
+        type: "auto",
         placement: "bottom",
         offset: 10
       })
     );
+    test.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
     await opened;
+    expect(await isInteractive(el)).to.be.true;
+    const closed = oneEvent(el, "sp-closed");
     dialog.close();
-    await waitUntil(
-      () => !!dialog.parentElement && dialog.parentElement.tagName !== "ACTIVE-OVERLAY",
-      "content is returned"
+    await closed;
+    expect(await isInteractive(el)).to.be.false;
+  });
+  it("positions with a VirtualTrigger", async () => {
+    const test = await fixture(html`
+            <div>
+                <sp-popover id="root" placement="right">
+                    <sp-dialog dismissable>
+                        Some Content for the Dialog.
+                    </sp-dialog>
+                </sp-popover>
+            </div>
+        `);
+    const el = test.querySelector("sp-popover");
+    const trigger = new VirtualTrigger(100, 100);
+    const opened = oneEvent(el, "sp-opened");
+    openOverlays.push(
+      await Overlay.open(el, {
+        trigger,
+        type: "auto",
+        placement: "right",
+        offset: 10
+      })
     );
+    test.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
+    await opened;
+    expect(await isInteractive(el)).to.be.true;
+    const initial = el.getBoundingClientRect();
+    trigger.updateBoundingClientRect(500, 500);
+    await nextFrame();
+    await nextFrame();
+    const final = el.getBoundingClientRect();
+    expect(initial.x).to.not.equal(8);
+    expect(initial.y).to.not.equal(8);
+    expect(initial.x).to.not.equal(final.x);
+    expect(initial.y).to.not.equal(final.y);
   });
   it("closes an inline overlay when tabbing past the content", async () => {
     const el = await fixture(html`
             <div>
                 <sp-button class="trigger">Trigger</sp-button>
-                <div class="content">
+                <sp-popover class="content">
                     <input />
-                </div>
+                </sp-popover>
                 <input value="After" id="after" />
             </div>
         `);
     const trigger = el.querySelector(".trigger");
     const content = el.querySelector(".content");
     const input = el.querySelector("input");
-    const after = el.querySelector("#after");
-    openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
-    trigger.focus();
-    await sendKeys({
-      press: "Tab"
-    });
+    const after2 = el.querySelector("#after");
+    const opened = oneEvent(content, "sp-opened");
+    openOverlays.push(
+      await Overlay.open(content, {
+        trigger,
+        type: "auto",
+        receivesFocus: "auto"
+      })
+    );
+    trigger.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
+    await opened;
+    expect(await isInteractive(content)).to.be.true;
     expect(document.activeElement).to.equal(input);
-    expect(input.closest("active-overlay") !== null);
+    const closed = oneEvent(content, "sp-closed");
     await sendKeys({
       press: "Shift+Tab"
     });
+    await closed;
     expect(document.activeElement).to.equal(trigger);
     await sendKeys({
       press: "Tab"
     });
-    expect(document.activeElement).to.equal(input);
-    await sendKeys({
-      press: "Tab"
-    });
-    expect(document.activeElement).to.equal(after);
-    await waitUntil(
-      () => document.querySelector("active-overlay") === null
-    );
+    expect(document.activeElement).to.equal(after2);
+    expect(await isInteractive(content)).to.be.false;
   });
   it("closes an inline overlay when tabbing before the trigger", async () => {
     const el = await fixture(html`
@@ -330,14 +443,20 @@ describe("Overlays", () => {
     const trigger = el.querySelector(".trigger");
     const content = el.querySelector(".content");
     const input = el.querySelector(".content input");
-    const before = el.querySelector("#before");
-    openOverlays.push(await Overlay.open(trigger, "inline", content, {}));
-    trigger.focus();
-    await sendKeys({
-      press: "Tab"
-    });
+    const before2 = el.querySelector("#before");
+    const open = oneEvent(trigger, "sp-opened");
+    openOverlays.push(
+      await Overlay.open(content, {
+        trigger,
+        type: "auto"
+      })
+    );
+    trigger.insertAdjacentElement(
+      "afterend",
+      openOverlays.at(-1)
+    );
+    await open;
     expect(document.activeElement).to.equal(input);
-    expect(input.closest("active-overlay") !== null);
     await sendKeys({
       press: "Shift+Tab"
     });
@@ -345,10 +464,7 @@ describe("Overlays", () => {
     await sendKeys({
       press: "Shift+Tab"
     });
-    expect(document.activeElement).to.equal(before);
-    await waitUntil(
-      () => document.querySelector("active-overlay") === null
-    );
+    expect(document.activeElement).to.equal(before2);
   });
   it("opens detached content", async () => {
     const textContent = "This is a detached element that has been overlaid";
@@ -357,118 +473,130 @@ describe("Overlays", () => {
                 <button>Trigger</button>
             `
     );
-    const content = document.createElement("div");
+    const content = document.createElement("sp-popover");
     content.textContent = textContent;
-    const opened = oneEvent(el, "sp-opened");
-    const closeOverlay = await Overlay.open(el, "click", content, {
+    const opened = oneEvent(content, "sp-opened");
+    const overlay = await Overlay.open(content, {
+      trigger: el,
+      type: "auto",
       placement: "bottom"
     });
+    el.insertAdjacentElement("afterend", overlay);
     await opened;
-    let activeOverlay = document.querySelector("active-overlay");
-    if (activeOverlay) {
-      expect(activeOverlay.textContent).to.equal(textContent);
-    } else {
-      expect(activeOverlay).to.not.be.null;
-    }
-    const closed = oneEvent(el, "sp-closed");
-    closeOverlay();
+    expect(await isInteractive(content)).to.be.true;
+    const closed = oneEvent(content, "sp-closed");
+    overlay.open = false;
     await closed;
-    activeOverlay = document.querySelector("active-overlay");
-    expect(activeOverlay).to.be.null;
+    expect(await isInteractive(content)).to.be.false;
     content.remove();
   });
 });
 describe('Overlay - type="modal"', () => {
-  it("closes on `contextmenu` and passes that to the underlying page", async () => {
-    await fixture(html`
-            ${virtualElement({
-      ...virtualElement.args,
-      offset: 6
-    })}
-        `);
-    const width = window.innerWidth;
-    const height = window.innerHeight;
-    let opened = oneEvent(document, "sp-opened");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [width / 2 + 50, height / 2]
-        },
-        {
-          type: "click",
-          options: {
-            button: "right"
-          },
-          position: [width / 2 + 50, height / 2]
-        }
-      ]
+  describe("handle multiple separate `contextmenu` events", async () => {
+    let width = 0;
+    let height = 0;
+    let firstMenu;
+    let firstRect;
+    let secondMenu;
+    let secondRect;
+    before(async () => {
+      render(
+        html`
+                    <sp-theme color="light" scale="large">
+                        ${virtualElement({
+          ...virtualElement.args,
+          offset: 6
+        })}
+                    </sp-theme>
+                `,
+        document.body
+      );
+      width = window.innerWidth;
+      height = window.innerHeight;
     });
-    await opened;
-    const firstOverlay = document.querySelector(
-      "active-overlay"
-    );
-    const firstHeadline = firstOverlay.querySelector(
-      '[slot="header"]'
-    );
-    expect(firstOverlay, "first overlay").to.not.be.null;
-    expect(firstOverlay.isConnected).to.be.true;
-    expect(firstHeadline.textContent).to.equal("Menu source: end");
-    let closed = oneEvent(document, "sp-closed");
-    opened = oneEvent(document, "sp-opened");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [width / 4, height / 4]
-        },
-        {
-          type: "click",
-          options: {
-            button: "right"
+    after(() => {
+      var _a;
+      (_a = document.querySelector("sp-theme")) == null ? void 0 : _a.remove();
+    });
+    it('opens the first "contextmenu" overlay', async () => {
+      const opened = oneEvent(document, "sp-opened");
+      await sendMouse({
+        steps: [
+          {
+            type: "move",
+            position: [width / 2 + 50, height / 2]
           },
-          position: [width / 4, height / 4]
-        }
-      ]
+          {
+            type: "click",
+            options: {
+              button: "right"
+            },
+            position: [width / 2 + 50, height / 2]
+          }
+        ]
+      });
+      await opened;
+      firstMenu = document.querySelector("sp-popover");
+      expect(firstMenu.textContent).to.include("Menu source: end");
+      firstRect = firstMenu.getBoundingClientRect();
+      expect(firstMenu).to.not.be.null;
     });
-    await closed;
-    await opened;
-    const secondOverlay = document.querySelector(
-      "active-overlay"
-    );
-    const secondHeadline = secondOverlay.querySelector(
-      '[slot="header"]'
-    );
-    expect(secondOverlay, "second overlay").to.not.be.null;
-    expect(secondOverlay).to.not.equal(firstOverlay);
-    expect(firstOverlay.isConnected).to.be.false;
-    expect(secondOverlay.isConnected).to.be.true;
-    expect(secondHeadline.textContent).to.equal("Menu source: start");
-    closed = oneEvent(document, "sp-closed");
-    sendMouse({
-      steps: [
-        {
-          type: "move",
-          position: [width / 8, height / 8]
-        },
-        {
-          type: "click",
-          position: [width / 8, height / 8]
-        }
-      ]
+    it('closes the first "contextmenu" when opening a second', async () => {
+      var _a, _b, _c, _d;
+      const closed = oneEvent(document, "sp-closed");
+      const opened = oneEvent(document, "sp-opened");
+      const trigger = document.querySelector(
+        "start-end-contextmenu"
+      );
+      (_b = (_a = trigger.shadowRoot) == null ? void 0 : _a.querySelector("#start")) == null ? void 0 : _b.dispatchEvent(
+        new Event("contextmenu", {
+          composed: true
+        })
+      );
+      await nextFrame();
+      (_d = (_c = trigger.shadowRoot) == null ? void 0 : _c.querySelector("#start")) == null ? void 0 : _d.dispatchEvent(
+        new Event("pointerup", {
+          composed: true,
+          bubbles: true
+        })
+      );
+      await closed;
+      await opened;
+      secondMenu = document.querySelector("sp-popover");
+      expect(secondMenu.textContent).to.include("Menu source: start");
+      secondRect = secondMenu.getBoundingClientRect();
+      expect(secondMenu).to.not.be.null;
+    });
+    it('closes the second "contextmenu" when clicking away', async () => {
+      const closed = oneEvent(document, "sp-closed");
+      sendMouse({
+        steps: [
+          {
+            type: "click",
+            position: [width - width / 8, height - height / 8]
+          }
+        ]
+      });
+      await closed;
+      expect(firstRect.top).to.not.equal(secondRect.top);
+      expect(firstRect.left).to.not.equal(secondRect.left);
     });
-    await closed;
-    await nextFrame();
   });
   it("does not open content off of the viewport", async () => {
+    before(async () => {
+      await setViewport({ width: 360, height: 640 });
+      await nextFrame();
+    });
+    after(async () => {
+      await setViewport({ width: 800, height: 600 });
+      await nextFrame();
+    });
     await fixture(html`
             ${virtualElement({
       ...virtualElement.args,
       offset: 6
     })}
         `);
-    await setViewport({ width: 360, height: 640 });
-    await nextFrame();
     const opened = oneEvent(document, "sp-opened");
     sendMouse({
       steps: [
@@ -486,19 +614,15 @@ describe('Overlay - type="modal"', () => {
       ]
     });
     await opened;
-    const activeOverlay = document.querySelector(
-      "active-overlay"
-    );
-    expect(activeOverlay.placement).to.equal("right-start");
-    expect(activeOverlay.getAttribute("actual-placement")).to.equal(
-      "bottom"
-    );
+    const firstMenu = document.querySelector("sp-menu");
+    expect(firstMenu).to.not.be.null;
+    expect(await isInteractive(firstMenu)).to.be.true;
     const closed = oneEvent(document, "sp-closed");
     sendKeys({
       press: "Escape"
     });
     await closed;
-    await nextFrame();
+    expect(await isInteractive(firstMenu)).to.be.false;
   });
   it("opens children in the modal stack through shadow roots", async () => {
     const el = await fixture(definedOverlayElement());
@@ -508,51 +632,47 @@ describe('Overlay - type="modal"', () => {
     let open = oneEvent(el, "sp-opened");
     trigger.click();
     await open;
+    expect(el.open).to.equal("click");
     const content = document.querySelector(
       "popover-content"
     );
     open = oneEvent(content, "sp-opened");
     content.button.click();
     await open;
-    const activeOverlays = document.querySelectorAll("active-overlay");
-    activeOverlays.forEach((overlay) => {
-      expect(overlay.slot).to.equal("open");
-    });
+    expect(content.trigger.open).to.equal("click");
     let close = oneEvent(content, "sp-closed");
     content.trigger.removeAttribute("open");
     await close;
+    expect(content.trigger.open).to.be.null;
     close = oneEvent(el, "sp-closed");
     el.removeAttribute("open");
     await close;
+    expect(el.open).to.be.null;
   });
 });
 describe("Overlay - timing", () => {
   it("manages multiple modals in a row without preventing them from closing", async () => {
     const test = await fixture(html`
             <div>
-                <overlay-trigger>
+                <overlay-trigger id="test-1" placement="right">
                     <sp-button slot="trigger">Trigger 1</sp-button>
                     <sp-popover slot="hover-content">
                         <p>Hover contentent for "Trigger 1".</p>
                     </sp-popover>
                 </overlay-trigger>
-                <overlay-trigger>
+                <overlay-trigger id="test-2" placement="right">
                     <sp-button slot="trigger">Trigger 2</sp-button>
-                    <sp-popover slot="hover-content">
-                        <p>Hover contentent for "Trigger 2".</p>
-                    </sp-popover>
                     <sp-popover slot="click-content">
                         <p>Click contentent for "Trigger 2".</p>
                     </sp-popover>
+                    <sp-popover slot="hover-content">
+                        <p>Hover contentent for "Trigger 2".</p>
+                    </sp-popover>
                 </overlay-trigger>
             </div>
         `);
-    const overlayTrigger1 = test.querySelector(
-      "overlay-trigger:first-child"
-    );
-    const overlayTrigger2 = test.querySelector(
-      "overlay-trigger:last-child"
-    );
+    const overlayTrigger1 = test.querySelector("#test-1");
+    const overlayTrigger2 = test.querySelector("#test-2");
     const trigger1 = overlayTrigger1.querySelector(
       '[slot="trigger"]'
     );
@@ -565,17 +685,13 @@ describe("Overlay - timing", () => {
       boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
       boundingRectTrigger1.top + boundingRectTrigger1.height / 2
     ];
-    const outsideTrigger1 = [
-      boundingRectTrigger1.left + boundingRectTrigger1.width * 2,
-      boundingRectTrigger1.top + boundingRectTrigger1.height * 2
+    const outsideTriggers = [
+      boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
+      300
     ];
     const trigger2Position = [
       boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
-      boundingRectTrigger2.top + boundingRectTrigger2.height / 2
-    ];
-    const outsideTrigger2 = [
-      boundingRectTrigger2.left + boundingRectTrigger2.width * 2,
-      boundingRectTrigger2.top + boundingRectTrigger2.height / 2
+      boundingRectTrigger2.top + boundingRectTrigger2.height / 4
     ];
     await sendMouse({
       steps: [
@@ -591,7 +707,7 @@ describe("Overlay - timing", () => {
       steps: [
         {
           type: "move",
-          position: outsideTrigger1
+          position: outsideTriggers
         }
       ]
     });
@@ -608,7 +724,7 @@ describe("Overlay - timing", () => {
     await nextFrame();
     await nextFrame();
     const opened = oneEvent(trigger2, "sp-opened");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "click",
@@ -617,23 +733,23 @@ describe("Overlay - timing", () => {
       ]
     });
     await opened;
+    await nextFrame();
+    await nextFrame();
     expect(overlayTrigger1.hasAttribute("open")).to.be.false;
     expect(overlayTrigger2.hasAttribute("open")).to.be.true;
     expect(overlayTrigger2.getAttribute("open")).to.equal("click");
     const closed = oneEvent(overlayTrigger2, "sp-closed");
-    sendMouse({
+    await sendMouse({
       steps: [
         {
           type: "click",
-          position: outsideTrigger2
+          position: outsideTriggers
         }
       ]
     });
     await closed;
-    for (let i = 0; i < 3; i++)
-      await nextFrame();
     expect(overlayTrigger1.hasAttribute("open")).to.be.false;
-    expect(overlayTrigger2.hasAttribute("open"), overlayTrigger2.open).to.be.false;
+    expect(overlayTrigger2.hasAttribute("open")).to.be.false;
   });
 });
 //# sourceMappingURL=overlay.test.js.map