@spectrum-web-components/overlay 0.36.0 → 0.37.0

package/test/index.js

@@ -1,22 +1,19 @@
 "use strict";
-import { escapeEvent, isVisible } from "../../../test/testing-helpers.js";
+import { fixture, isOnTopLayer } from "../../../test/testing-helpers.js";
 import {
   aTimeout,
   elementUpdated,
   expect,
-  fixture,
   html,
   nextFrame,
   oneEvent,
   waitUntil
 } from "@open-wc/testing";
-import {
-  OverlayTrigger
-} from "@spectrum-web-components/overlay";
 import "@spectrum-web-components/button/sp-button.js";
 import "@spectrum-web-components/popover/sp-popover.js";
-import { Popover } from "@spectrum-web-components/popover";
 import "@spectrum-web-components/theme/sp-theme.js";
+import { sendMouse } from "../../../test/plugins/browser.js";
+import { sendKeys } from "@web/test-runner-commands";
 function pressKey(code) {
   const up = new KeyboardEvent("keyup", {
     bubbles: true,
@@ -26,23 +23,12 @@ function pressKey(code) {
   });
   document.dispatchEvent(up);
 }
-const pressEscape = () => {
-  document.dispatchEvent(escapeEvent());
-};
 const pressSpace = () => pressKey("Space");
-export const runOverlayTriggerTests = () => {
-  describe("Overlay Trigger - sync", () => {
+export const runOverlayTriggerTests = (type) => {
+  describe(`Overlay Trigger - ${type}`, () => {
     describe("open/close", () => {
-      let testDiv;
-      let innerTrigger;
-      let outerTrigger;
-      let innerButton;
-      let outerButton;
-      let innerClickContent;
-      let outerClickContent;
-      let hoverContent;
-      beforeEach(async () => {
-        testDiv = await fixture(
+      beforeEach(async function() {
+        this.testDiv = await fixture(
           html`
                         <div>
                             <style>
@@ -65,8 +51,6 @@ export const runOverlayTriggerTests = () => {
                                     slot="click-content"
                                     direction="bottom"
                                     tip
-                                    open
-                                    tabindex="0"
                                 >
                                     <sp-dialog
                                         no-divider
@@ -87,8 +71,6 @@ export const runOverlayTriggerTests = () => {
                                                 slot="click-content"
                                                 direction="bottom"
                                                 tip
-                                                open
-                                                tabindex="0"
                                             >
                                                 <sp-dialog
                                                     no-divider
@@ -112,407 +94,495 @@ export const runOverlayTriggerTests = () => {
                         </div>
                     `
         );
-        innerTrigger = testDiv.querySelector(
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        this.innerTrigger = this.testDiv.querySelector(
           "#inner-trigger"
         );
-        outerTrigger = testDiv.querySelector(
+        this.outerTrigger = this.testDiv.querySelector(
           "#trigger"
         );
-        innerButton = testDiv.querySelector("#inner-button");
-        outerButton = testDiv.querySelector("#outer-button");
-        innerClickContent = testDiv.querySelector(
+        this.innerButton = this.testDiv.querySelector(
+          "#inner-button"
+        );
+        this.outerButton = this.testDiv.querySelector(
+          "#outer-button"
+        );
+        this.innerClickContent = this.testDiv.querySelector(
           "#inner-popover"
         );
-        outerClickContent = testDiv.querySelector(
+        this.outerClickContent = this.testDiv.querySelector(
           "#outer-popover"
         );
-        hoverContent = testDiv.querySelector(
+        this.hoverContent = this.testDiv.querySelector(
           "#hover-content"
         );
       });
-      afterEach(async () => {
-        if (outerTrigger.open) {
-          const closed = oneEvent(outerTrigger, "sp-closed");
-          outerTrigger.open = void 0;
-          await closed;
-        }
-        outerTrigger.removeAttribute("type");
-        if (innerTrigger.open) {
-          const closed = oneEvent(innerTrigger, "sp-closed");
-          innerTrigger.open = void 0;
-          await closed;
-        }
-        innerTrigger.removeAttribute("type");
-      });
-      it("loads", async () => {
-        if (!(outerClickContent instanceof Popover))
-          throw new Error("popover is not an instance of Popover");
-        expect(outerClickContent).to.exist;
-        expect(outerClickContent.shadowRoot).to.exist;
-        expect(outerClickContent.parentElement).to.be.an.instanceOf(
-          OverlayTrigger
-        );
-      });
-      it("opens a popover", async () => {
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(outerButton).to.exist;
-        const open = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
+      it("opens a popover", async function() {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point"
+        ).to.be.false;
+        expect(this.outerButton).to.exist;
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
         await open;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point"
+        ).to.be.true;
       });
-      it("[disabled] closes a popover", async () => {
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(outerTrigger.disabled).to.be.false;
-        expect(outerButton).to.exist;
-        const opened = oneEvent(outerButton, "sp-opened");
-        outerButton.click();
+      it("[disabled] closes a popover", async function() {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point"
+        ).to.be.false;
+        expect(this.outerTrigger.disabled).to.be.false;
+        expect(this.outerButton).to.exist;
+        const opened = oneEvent(this.outerButton, "sp-opened");
+        this.outerButton.click();
         await opened;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
-        const closed = oneEvent(outerButton, "sp-closed");
-        outerTrigger.disabled = true;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point"
+        ).to.be.true;
+        const closed = oneEvent(this.outerButton, "sp-closed");
+        this.outerTrigger.disabled = true;
         await closed;
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(outerTrigger.disabled).to.be.true;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point"
+        ).to.be.false;
       });
-      it("resizes a popover", async () => {
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(outerButton).to.exist;
-        const open = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
+      it("resizes a popover", async function() {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point"
+        ).to.be.false;
+        expect(this.outerButton).to.exist;
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
         await open;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point"
+        ).to.be.true;
         window.dispatchEvent(new Event("resize"));
         window.dispatchEvent(new Event("resize"));
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point"
+        ).to.be.true;
       });
-      ["modal", "replace", "inline"].map((type) => {
-        it(`opens a popover - [type="${type}"]`, async () => {
-          outerTrigger.type = type;
-          await elementUpdated(outerTrigger);
-          expect(isVisible(outerClickContent)).to.be.false;
-          expect(outerButton).to.exist;
-          const opened = oneEvent(outerTrigger, "sp-opened");
-          outerButton.click();
+      ["modal", "replace", "inline"].map((type2) => {
+        it(`opens a popover - [type="${type2}"]`, async function() {
+          this.outerTrigger.type = type2;
+          await elementUpdated(this.outerTrigger);
+          expect(
+            await isOnTopLayer(this.outerClickContent),
+            "popover not available at point"
+          ).to.be.false;
+          expect(this.outerButton).to.exist;
+          const opened = oneEvent(this.outerTrigger, "sp-opened");
+          this.outerButton.click();
           await opened;
           expect(
-            outerClickContent.parentElement
-          ).to.not.be.an.instanceOf(OverlayTrigger);
-          expect(isVisible(outerClickContent)).to.be.true;
+            await isOnTopLayer(this.outerClickContent),
+            "popover available at point"
+          ).to.be.true;
         });
       });
-      it("does not open a hover popover when a click popover is open", async () => {
+      it("does not open a hover popover when a click popover is open", async function() {
         expect(
-          isVisible(outerClickContent),
-          "outer popover not visible"
+          await isOnTopLayer(this.outerClickContent),
+          "popover not available at point"
         ).to.be.false;
-        expect(isVisible(hoverContent), "hover popover not visible").to.be.false;
-        expect(outerButton).to.exist;
-        const open = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover not available at point"
+        ).to.be.false;
+        expect(this.outerButton).to.exist;
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
         await open;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent), "outer popover visible").to.be.true;
         expect(
-          isVisible(hoverContent),
-          "hover popover still not visible"
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover not available at point"
         ).to.be.false;
-        outerButton.dispatchEvent(
+        this.outerButton.dispatchEvent(
           new Event("mouseenter", {
             bubbles: true,
             composed: true
           })
         );
         await nextFrame();
-        expect(hoverContent.parentElement).to.be.instanceOf(
-          OverlayTrigger
-        );
         expect(
-          isVisible(outerClickContent),
-          "outer popover visible again"
+          await isOnTopLayer(this.outerClickContent),
+          "popover available at point"
         ).to.be.true;
         expect(
-          isVisible(hoverContent),
-          "hover popover not visible again"
+          await isOnTopLayer(this.hoverContent),
+          "hover not available at point"
         ).to.be.false;
       });
-      it("does not open a popover when [disabled]", async () => {
-        var _a, _b, _c, _d, _e, _f;
-        const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-        const triggerZone = root.querySelector(
+      it("does not open a popover when [disabled]", async function() {
+        const triggerZone = this.outerTrigger.shadowRoot.querySelector(
           "#trigger"
         );
-        expect(outerTrigger.disabled).to.be.false;
-        let open = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
+        expect(this.outerTrigger.disabled).to.be.false;
+        let open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
         await open;
-        expect((_a = outerClickContent.parentElement) == null ? void 0 : _a.localName).to.equal(
-          "active-overlay"
-        );
-        let closed = oneEvent(outerTrigger, "sp-closed");
-        document.body.click();
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover available at point"
+        ).to.be.true;
+        let closed = oneEvent(this.outerTrigger, "sp-closed");
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1]
+            }
+          ]
+        });
         await closed;
-        expect((_b = outerClickContent.parentElement) == null ? void 0 : _b.localName).to.equal(
-          "overlay-trigger"
-        );
-        outerTrigger.disabled = true;
-        await elementUpdated(outerTrigger);
-        expect(outerTrigger.disabled).to.be.true;
-        expect(outerTrigger.hasAttribute("disabled")).to.be.true;
-        outerButton.click();
-        await aTimeout(200);
-        expect((_c = outerClickContent.parentElement) == null ? void 0 : _c.localName).to.equal(
-          "overlay-trigger"
-        );
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point"
+        ).to.be.false;
+        this.outerTrigger.disabled = true;
+        await elementUpdated(this.outerTrigger);
+        expect(this.outerTrigger.disabled).to.be.true;
+        expect(this.outerTrigger.hasAttribute("disabled")).to.be.true;
+        this.outerButton.click();
+        await aTimeout(150);
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point"
+        ).to.be.false;
         triggerZone.dispatchEvent(new Event("mouseenter"));
-        await aTimeout(200);
-        expect((_d = outerClickContent.parentElement) == null ? void 0 : _d.localName).to.equal(
-          "overlay-trigger"
-        );
-        outerTrigger.disabled = false;
-        await elementUpdated(outerTrigger);
-        expect(outerTrigger.disabled).to.be.false;
-        expect(outerTrigger.hasAttribute("disabled")).to.be.false;
-        open = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
+        await aTimeout(150);
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point"
+        ).to.be.false;
+        this.outerTrigger.disabled = false;
+        await elementUpdated(this.outerTrigger);
+        expect(this.outerTrigger.disabled).to.be.false;
+        expect(this.outerTrigger.hasAttribute("disabled")).to.be.false;
+        open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
         await open;
-        expect((_e = outerClickContent.parentElement) == null ? void 0 : _e.localName).to.equal(
-          "active-overlay"
-        );
-        closed = oneEvent(outerTrigger, "sp-closed");
-        outerButton.click();
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover available at point"
+        ).to.be.true;
+        closed = oneEvent(this.outerTrigger, "sp-closed");
+        this.outerButton.click();
         await closed;
-        expect((_f = outerClickContent.parentElement) == null ? void 0 : _f.localName).to.equal(
-          "overlay-trigger"
-        );
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point"
+        ).to.be.false;
       });
-      it("opens a nested popover", async () => {
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(isVisible(innerClickContent)).to.be.false;
-        expect(outerButton).to.exist;
-        let open = oneEvent(outerTrigger, "sp-opened");
-        outerButton.click();
+      it("opens a nested popover", async function() {
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover not available at point"
+        ).to.be.false;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "hover not available at point"
+        ).to.be.false;
+        expect(this.outerButton).to.exist;
+        let open = oneEvent(this.outerTrigger, "sp-opened");
+        this.outerButton.click();
         await open;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.false;
-        open = oneEvent(innerTrigger, "sp-opened");
-        innerButton.click();
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(await isOnTopLayer(this.innerClickContent)).to.be.false;
+        open = oneEvent(this.innerTrigger, "sp-opened");
+        this.innerButton.click();
         await open;
-        expect(innerClickContent.parentElement).to.not.be.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.true;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point"
+        ).to.be.true;
       });
-      it('focus previous "modal" when closing nested "modal"', async () => {
-        outerTrigger.type = "modal";
-        innerTrigger.type = "modal";
+      it('focus previous "modal" when closing nested "modal"', async function() {
+        this.outerTrigger.type = "modal";
+        this.innerTrigger.type = "modal";
         expect(
-          isVisible(outerClickContent),
-          "outer popover starts closed"
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content not available at point"
         ).to.be.false;
         expect(
-          isVisible(innerClickContent),
-          "inner popover starts closed"
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point"
         ).to.be.false;
-        expect(outerButton).to.exist;
-        const outerOpen = oneEvent(outerButton, "sp-opened");
-        outerButton.click();
+        const outerOpen = oneEvent(this.outerButton, "sp-opened");
+        this.outerButton.click();
         await outerOpen;
-        expect(outerClickContent.parentElement).to.not.be.an.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent), "outer popover opens").to.be.true;
         expect(
-          isVisible(innerClickContent),
-          "inner popover stays closed"
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point"
         ).to.be.false;
-        const innerOpen = oneEvent(innerButton, "sp-opened");
-        innerButton.click();
+        const innerOpen = oneEvent(this.innerButton, "sp-opened");
+        this.innerButton.click();
         await innerOpen;
-        expect(innerClickContent.parentElement).to.not.be.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(outerClickContent), "outer popover stays open").to.be.true;
-        expect(isVisible(innerClickContent), "inner popover opens").to.be.true;
-        const innerClose = oneEvent(innerButton, "sp-closed");
-        pressEscape();
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point"
+        ).to.be.true;
+        const innerClose = oneEvent(this.innerButton, "sp-closed");
+        await sendKeys({
+          press: "Escape"
+        });
         await innerClose;
-        expect(innerClickContent.parentElement).to.be.instanceOf(
-          OverlayTrigger
-        );
         expect(
-          document.activeElement === innerButton,
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point"
+        ).to.be.false;
+        expect(
+          document.activeElement === this.innerButton,
           "outer popover recieved focus"
         ).to.be.true;
       });
-      it("escape closes an open popover", async () => {
-        outerTrigger.type = "modal";
-        innerTrigger.type = "modal";
-        const outerOpen = oneEvent(outerButton, "sp-opened");
-        outerButton.click();
+      it("escape closes an open popover", async function() {
+        this.outerTrigger.type = "modal";
+        this.innerTrigger.type = "modal";
+        const outerOpen = oneEvent(this.outerButton, "sp-opened");
+        this.outerButton.click();
         await outerOpen;
         expect(
-          outerClickContent.parentElement instanceof OverlayTrigger,
-          "outer content stolen and reparented"
-        ).to.be.false;
-        const innerOpen = oneEvent(innerButton, "sp-opened");
-        innerButton.click();
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        const innerOpen = oneEvent(this.innerButton, "sp-opened");
+        this.innerButton.click();
         await innerOpen;
         expect(
-          innerClickContent.parentElement instanceof OverlayTrigger,
-          "inner content stolen and reparented"
-        ).to.be.false;
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.true;
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point"
+        ).to.be.true;
         pressSpace();
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.true;
-        const innerClose = oneEvent(innerButton, "sp-closed");
-        pressEscape();
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content available at point"
+        ).to.be.true;
+        const innerClose = oneEvent(this.innerButton, "sp-closed");
+        await sendKeys({
+          press: "Escape"
+        });
         await innerClose;
         expect(
-          innerClickContent.parentElement instanceof OverlayTrigger,
-          "inner content returned"
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content available at point"
         ).to.be.true;
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.false;
-        const outerClose = oneEvent(outerButton, "sp-closed");
-        pressEscape();
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point"
+        ).to.be.false;
+        const outerClose = oneEvent(this.outerButton, "sp-closed");
+        await sendKeys({
+          press: "Escape"
+        });
         await outerClose;
         expect(
-          outerClickContent.parentElement instanceof OverlayTrigger,
-          "outer content returned"
-        ).to.be.true;
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(isVisible(innerClickContent)).to.be.false;
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content not available at point"
+        ).to.be.false;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content not available at point"
+        ).to.be.false;
       });
-      it("click closes an open popover", async () => {
-        outerTrigger.type = "modal";
-        innerTrigger.type = "modal";
-        const outerOpen = oneEvent(outerButton, "sp-opened");
-        outerButton.click();
+      it("click closes an open popover", async function() {
+        this.outerTrigger.type = "auto";
+        this.innerTrigger.type = "auto";
+        const outerOpen = oneEvent(this.outerButton, "sp-opened");
+        this.outerButton.click();
         await outerOpen;
         expect(
-          outerClickContent.parentElement instanceof OverlayTrigger,
-          "outer content stolen and reparented"
-        ).to.be.false;
-        const innerOpen = oneEvent(innerButton, "sp-opened");
-        innerButton.click();
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is available at point"
+        ).to.be.true;
+        const innerOpen = oneEvent(this.innerButton, "sp-opened");
+        this.innerButton.click();
         await innerOpen;
         expect(
-          innerClickContent.parentElement instanceof OverlayTrigger,
-          "inner content stolen and reparented"
-        ).to.be.false;
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.true;
-        innerClickContent.click();
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is available at point"
+        ).to.be.true;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content is available at point"
+        ).to.be.true;
+        this.innerClickContent.click();
         await aTimeout(200);
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.true;
-        const innerClose = oneEvent(innerButton, "sp-closed");
-        document.body.click();
-        await innerClose;
         expect(
-          innerClickContent.parentElement instanceof OverlayTrigger,
-          "inner content returned"
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is available at point"
         ).to.be.true;
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(isVisible(innerClickContent)).to.be.false;
-        const outerClose = oneEvent(outerButton, "sp-closed");
-        document.body.click();
-        await outerClose;
         expect(
-          outerClickContent.parentElement instanceof OverlayTrigger,
-          "outer content returned"
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content is available at point"
         ).to.be.true;
-        expect(isVisible(outerClickContent)).to.be.false;
-        expect(isVisible(innerClickContent)).to.be.false;
+        const innerClose = oneEvent(this.innerButton, "sp-closed");
+        const outerClose = oneEvent(this.outerButton, "sp-closed");
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1]
+            }
+          ]
+        });
+        await innerClose;
+        await outerClose;
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "outer click content is not available at point"
+        ).to.be.not;
+        expect(
+          await isOnTopLayer(this.innerClickContent),
+          "inner click content is not available at point"
+        ).to.be.not;
       });
-      it("opens a hover popover", async () => {
-        const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-        const triggerZone = root.querySelector(
-          "#trigger"
-        );
-        expect(triggerZone).to.exist;
-        if (!triggerZone)
-          return;
-        expect(outerButton).to.exist;
-        expect(hoverContent).to.exist;
-        expect(isVisible(hoverContent)).to.be.false;
-        const open = oneEvent(outerTrigger, "sp-opened");
-        const mouseEnter = new MouseEvent("mouseenter");
-        triggerZone.dispatchEvent(mouseEnter);
+      it("opens a hover popover", async function() {
+        expect(await isOnTopLayer(this.hoverContent)).to.be.false;
+        const rect = this.outerTrigger.getBoundingClientRect();
+        const open = oneEvent(this.outerTrigger, "sp-opened");
+        sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width / 2,
+                rect.top + rect.height / 2
+              ]
+            }
+          ]
+        });
         await open;
-        expect(hoverContent.parentElement).to.not.be.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(hoverContent)).to.be.true;
-        const close = oneEvent(outerTrigger, "sp-closed");
-        const mouseLeave = new MouseEvent("mouseleave");
-        triggerZone.dispatchEvent(mouseLeave);
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is available at point"
+        ).to.be.true;
+        const close = oneEvent(this.outerTrigger, "sp-closed");
+        sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width * 2,
+                rect.top + rect.height / 2
+              ]
+            }
+          ]
+        });
         await close;
-        expect(hoverContent.parentElement).to.be.instanceOf(
-          OverlayTrigger
-        );
-        expect(isVisible(hoverContent)).to.be.false;
-      });
-      it("closes a hover popover", async () => {
-        const root = outerTrigger.shadowRoot ? outerTrigger.shadowRoot : outerTrigger;
-        const triggerZone = root.querySelector(
-          "#trigger"
-        );
-        expect(triggerZone).to.exist;
-        if (!triggerZone)
-          return;
-        expect(outerButton).to.exist;
-        expect(hoverContent).to.exist;
-        expect(
-          isVisible(hoverContent),
-          "hoverContent should not be visible"
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is not available at point"
         ).to.be.false;
-        const mouseEnter = new MouseEvent("mouseenter");
-        const mouseLeave = new MouseEvent("mouseleave");
-        triggerZone.dispatchEvent(mouseEnter);
+      });
+      it("closes a hover popover", async function() {
+        expect(await isOnTopLayer(this.hoverContent)).to.be.false;
+        const rect = this.outerTrigger.getBoundingClientRect();
+        const close = oneEvent(this.outerTrigger, "sp-closed");
+        await sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width / 2,
+                rect.top + rect.height / 2
+              ]
+            }
+          ]
+        });
         await nextFrame();
-        triggerZone.dispatchEvent(mouseLeave);
-        await waitUntil(
-          () => isVisible(hoverContent) === false,
-          "hoverContent should still not be visible"
-        );
+        await nextFrame();
+        await nextFrame();
+        await nextFrame();
+        await sendMouse({
+          steps: [
+            {
+              type: "move",
+              position: [
+                rect.left + rect.width * 2,
+                rect.top + rect.height / 2
+              ]
+            }
+          ]
+        });
+        await close;
+        expect(
+          await isOnTopLayer(this.hoverContent),
+          "hover content is not available at point"
+        ).to.be.false;
       });
-      it("dispatches events on open/close", async () => {
-        const opened = oneEvent(outerButton, "sp-opened");
-        outerButton.click();
+      it("dispatches events on open/close", async function() {
+        const opened = oneEvent(this.outerButton, "sp-opened");
+        this.outerButton.click();
         const openedEvent = await opened;
-        expect(isVisible(outerClickContent)).to.be.true;
-        expect(outerTrigger.open).to.equal("click");
-        expect(openedEvent.detail.interaction).to.equal("click");
-        const closed = oneEvent(outerButton, "sp-closed");
-        document.body.click();
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover content is available at point"
+        ).to.be.true;
+        expect(this.outerTrigger.open).to.equal("click");
+        expect(openedEvent.detail.interaction).to.equal("auto");
+        const closed = oneEvent(this.outerButton, "sp-closed");
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1]
+            }
+          ]
+        });
         const closedEvent = await closed;
-        expect(outerClickContent.parentElement).to.be.instanceOf(
-          OverlayTrigger
-        );
-        expect(closedEvent.detail.interaction).to.equal("click");
-        expect(isVisible(outerClickContent)).to.be.false;
+        expect(closedEvent.detail.interaction).to.equal("auto");
+        expect(
+          await isOnTopLayer(this.outerClickContent),
+          "hover content is not available at point"
+        ).to.be.false;
       });
     });
     describe("System interactions", () => {
@@ -528,50 +598,10 @@ export const runOverlayTriggerTests = () => {
         });
         await Promise.all(closes);
       });
-      it("acquires a `color` and `size` from `sp-theme`", async () => {
-        const el = await fixture(html`
-                    <sp-theme color="dark">
-                        <sp-theme color="light">
-                            <overlay-trigger id="trigger" placement="top">
-                                <sp-button
-                                    id="outer-button"
-                                    variant="primary"
-                                    slot="trigger"
-                                >
-                                    Show Popover
-                                </sp-button>
-                                <sp-popover
-                                    id="outer-popover"
-                                    dialog
-                                    slot="click-content"
-                                    direction="bottom"
-                                    tip
-                                    open
-                                >
-                                    Popover content!
-                                </sp-popover>
-                            </overlay-trigger>
-                        </sp-theme>
-                    </sp-theme>
-                `);
-        await elementUpdated(el);
-        expect(document.querySelector("active-overlay")).to.be.null;
-        const button = el.querySelector("sp-button");
-        const opened = oneEvent(button, "sp-opened");
-        button.click();
-        await opened;
-        await elementUpdated(el);
-        const overlay = document.querySelector(
-          "active-overlay"
-        );
-        expect(overlay).to.exist;
-        expect(overlay.theme.color).to.not.equal("dark");
-        expect(overlay.theme.color).to.equal("light");
-      });
-      it('manages multiple layers of `type="modal"', async () => {
+      it.skip('manages multiple layers of `type="modal"', async () => {
         var _a, _b, _c;
         const el = await fixture(html`
-                    <overlay-trigger type="modal" placement="none">
+                    <overlay-trigger type="modal">
                         <sp-button slot="trigger" variant="accent">
                             Toggle Dialog
                         </sp-button>
@@ -694,7 +724,14 @@ export const runOverlayTriggerTests = () => {
         ).to.equal("open");
         await nextFrame();
         const closed = oneEvent(triggers[2], "sp-closed");
-        document.body.click();
+        sendMouse({
+          steps: [
+            {
+              type: "click",
+              position: [1, 1]
+            }
+          ]
+        });
         await closed;
         await elementUpdated(overlayTriggers[2]);
         activeOverlays = [