@spectrum-web-components/overlay 0.18.0 → 0.18.2

package/test/overlay.test.js

@@ -1,4 +1,33 @@
-import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-components/dialog/sp-dialog.js";import"@spectrum-web-components/popover/sp-popover.js";import{setViewport as M}from"@web/test-runner-commands";import{Overlay as p}from"@spectrum-web-components/overlay";import{isVisible as s,waitForPredicate as b}from"../../../test/testing-helpers.js";import{elementUpdated as L,expect as t,fixture as v,html as y,nextFrame as u,oneEvent as c,waitUntil as f}from"@open-wc/testing";import{sendKeys as g}from"@web/test-runner-commands";import{definedOverlayElement as O,virtualElement as E}from"../stories/overlay.stories";import{sendMouse as d}from"../../../test/plugins/browser.js";describe("Overlays",()=>{let a,r=[];beforeEach(async()=>{a=await v(y`
+"use strict";
+import "@spectrum-web-components/button/sp-button.js";
+import "@spectrum-web-components/dialog/sp-dialog.js";
+import "@spectrum-web-components/popover/sp-popover.js";
+import { setViewport } from "@web/test-runner-commands";
+import {
+  Overlay
+} from "@spectrum-web-components/overlay";
+import { isVisible, waitForPredicate } from "../../../test/testing-helpers.js";
+import {
+  elementUpdated,
+  expect,
+  fixture,
+  html,
+  nextFrame,
+  oneEvent,
+  waitUntil
+} from "@open-wc/testing";
+import { sendKeys } from "@web/test-runner-commands";
+import {
+  definedOverlayElement,
+  virtualElement
+} from "../stories/overlay.stories";
+import { sendMouse } from "../../../test/plugins/browser.js";
+describe("Overlays", () => {
+  let testDiv;
+  let openOverlays = [];
+  beforeEach(async () => {
+    testDiv = await fixture(
+      html`
                 <div id="top">
                     <style>
                         body {
@@ -47,11 +76,222 @@ import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-compon
                         </div>
                     </div>
                 </div>
-            `),await L(a)}),afterEach(()=>{r.map(o=>o()),r=[]}),["bottom","bottom-start","bottom-end","top","top-start","top-end","left","left-start","left-end","right","right-start","right-end","none"].map(o=>{const e=o;it(`opens a popover - ${e}`,async()=>{const i=a.querySelector("#first-button"),n=a.querySelector("#outer-popover");t(n.parentElement).to.exist,n.parentElement&&t(n.parentElement.id).to.equal("overlay-content"),t(s(n)).to.be.false,t(i).to.exist,r.push(await p.open(i,"click",n,{delayed:!1,placement:e,offset:10})),await b(()=>!!(n.parentElement&&n.parentElement.id!=="overlay-content")),t(n.parentElement).to.exist,n.parentElement&&t(n.parentElement.id).not.to.equal("overlay-content"),t(s(n)).to.be.true})}),it("updates a popover",async()=>{const o=a.querySelector("#first-button"),e=a.querySelector("#outer-popover");t(e.parentElement).to.exist,e.parentElement&&t(e.parentElement.id).to.equal("overlay-content"),t(s(e)).to.be.false,t(o).to.exist,r.push(await p.open(o,"click",e,{delayed:!1,offset:10})),await b(()=>!!(e.parentElement&&e.parentElement.id!=="overlay-content")),t(s(e)).to.be.true,p.update(),t(s(e)).to.be.true}),it("opens a popover w/ delay",async()=>{const o=a.querySelector("#first-button"),e=a.querySelector("#outer-popover");t(e.parentElement).to.exist,e.parentElement&&t(e.parentElement.id).to.equal("overlay-content"),t(s(e)).to.be.false,t(o).to.exist,r.push(await p.open(o,"click",e,{delayed:!0,offset:10})),await f(()=>!!(e.parentElement&&e.parentElement.id!=="overlay-content"),"overlay opened"),t(e.parentElement).to.exist,e.parentElement&&t(e.parentElement.id).not.to.equal("overlay-content"),t(s(e)).to.be.true}),it("opens hover overlay",async()=>{const o=a.querySelector("#first-button"),e=a.querySelector("#hover-1"),i=a.querySelector("#outer-popover");t(o).to.exist,t(e).to.exist,t(s(e)).to.be.false,t(s(i)).to.be.false,r.push(await p.open(o,"hover",e,{delayed:!1,placement:"top",offset:10})),await b(()=>!!(e.parentElement&&e.parentElement.id!=="overlay-content")),t(e.parentElement).to.exist,e.parentElement&&t(e.parentElement.id).not.to.equal("overlay-content"),t(s(e)).to.be.true,r.push(await p.open(o,"click",i,{delayed:!1,placement:"bottom",offset:10})),await b(()=>!!(i.parentElement&&i.parentElement.id!=="overlay-content"&&e.parentElement&&e.parentElement.id==="overlay-content")),e.parentElement&&t(e.parentElement.id).to.equal("overlay-content"),t(s(e)).to.be.false,t(s(i)).to.be.true}),it("opens custom overlay",async()=>{const o=a.querySelector("#first-button"),e=a.querySelector("#hover-1"),i=a.querySelector("#outer-popover");t(o).to.exist,t(e).to.exist,t(s(e)).to.be.false,t(s(i)).to.be.false,r.push(await p.open(o,"custom",e,{delayed:!1,placement:"top",offset:10})),await b(()=>!!(e.parentElement&&e.parentElement.id!=="overlay-content")),t(e.parentElement).to.exist,e.parentElement&&t(e.parentElement.id).not.to.equal("overlay-content"),t(s(e)).to.be.true,r.push(await p.open(o,"click",i,{delayed:!1,placement:"bottom",offset:10})),await b(()=>!!(i.parentElement&&i.parentElement.id!=="overlay-content")),t(s(e)).to.be.true,t(s(i)).to.be.true}),it("closes via events",async()=>{const o=await v(y`
+            `
+    );
+    await elementUpdated(testDiv);
+  });
+  afterEach(() => {
+    openOverlays.map((close) => close());
+    openOverlays = [];
+  });
+  [
+    "bottom",
+    "bottom-start",
+    "bottom-end",
+    "top",
+    "top-start",
+    "top-end",
+    "left",
+    "left-start",
+    "left-end",
+    "right",
+    "right-start",
+    "right-end",
+    "none"
+  ].map((direction) => {
+    const placement = direction;
+    it(`opens a popover - ${placement}`, 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(button).to.exist;
+      openOverlays.push(
+        await Overlay.open(button, "click", outerPopover, {
+          delayed: false,
+          placement,
+          offset: 10
+        })
+      );
+      await waitForPredicate(
+        () => !!(outerPopover.parentElement && outerPopover.parentElement.id !== "overlay-content")
+      );
+      expect(outerPopover.parentElement).to.exist;
+      if (outerPopover.parentElement) {
+        expect(outerPopover.parentElement.id).not.to.equal(
+          "overlay-content"
+        );
+      }
+      expect(isVisible(outerPopover)).to.be.true;
+    });
+  });
+  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(button).to.exist;
+    openOverlays.push(
+      await Overlay.open(button, "click", outerPopover, {
+        delayed: false,
+        offset: 10
+      })
+    );
+    await waitForPredicate(
+      () => !!(outerPopover.parentElement && outerPopover.parentElement.id !== "overlay-content")
+    );
+    expect(isVisible(outerPopover)).to.be.true;
+    Overlay.update();
+    expect(isVisible(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(button).to.exist;
+    openOverlays.push(
+      await Overlay.open(button, "click", outerPopover, {
+        delayed: true,
+        offset: 10
+      })
+    );
+    await waitUntil(
+      () => !!(outerPopover.parentElement && outerPopover.parentElement.id !== "overlay-content"),
+      "overlay opened"
+    );
+    expect(outerPopover.parentElement).to.exist;
+    if (outerPopover.parentElement) {
+      expect(outerPopover.parentElement.id).not.to.equal(
+        "overlay-content"
+      );
+    }
+    expect(isVisible(outerPopover)).to.be.true;
+  });
+  it("opens hover overlay", async () => {
+    const button = testDiv.querySelector("#first-button");
+    const hoverOverlay = testDiv.querySelector("#hover-1");
+    const clickOverlay = testDiv.querySelector(
+      "#outer-popover"
+    );
+    expect(button).to.exist;
+    expect(hoverOverlay).to.exist;
+    expect(isVisible(hoverOverlay)).to.be.false;
+    expect(isVisible(clickOverlay)).to.be.false;
+    openOverlays.push(
+      await Overlay.open(button, "hover", hoverOverlay, {
+        delayed: false,
+        placement: "top",
+        offset: 10
+      })
+    );
+    await waitForPredicate(
+      () => !!(hoverOverlay.parentElement && hoverOverlay.parentElement.id !== "overlay-content")
+    );
+    expect(hoverOverlay.parentElement).to.exist;
+    if (hoverOverlay.parentElement) {
+      expect(hoverOverlay.parentElement.id).not.to.equal(
+        "overlay-content"
+      );
+    }
+    expect(isVisible(hoverOverlay)).to.be.true;
+    openOverlays.push(
+      await Overlay.open(button, "click", clickOverlay, {
+        delayed: false,
+        placement: "bottom",
+        offset: 10
+      })
+    );
+    await waitForPredicate(
+      () => !!(clickOverlay.parentElement && clickOverlay.parentElement.id !== "overlay-content" && hoverOverlay.parentElement && hoverOverlay.parentElement.id === "overlay-content")
+    );
+    if (hoverOverlay.parentElement) {
+      expect(hoverOverlay.parentElement.id).to.equal("overlay-content");
+    }
+    expect(isVisible(hoverOverlay)).to.be.false;
+    expect(isVisible(clickOverlay)).to.be.true;
+  });
+  it("opens custom overlay", async () => {
+    const button = testDiv.querySelector("#first-button");
+    const customOverlay = testDiv.querySelector("#hover-1");
+    const clickOverlay = testDiv.querySelector(
+      "#outer-popover"
+    );
+    expect(button).to.exist;
+    expect(customOverlay).to.exist;
+    expect(isVisible(customOverlay)).to.be.false;
+    expect(isVisible(clickOverlay)).to.be.false;
+    openOverlays.push(
+      await Overlay.open(button, "custom", customOverlay, {
+        delayed: false,
+        placement: "top",
+        offset: 10
+      })
+    );
+    await waitForPredicate(
+      () => !!(customOverlay.parentElement && customOverlay.parentElement.id !== "overlay-content")
+    );
+    expect(customOverlay.parentElement).to.exist;
+    if (customOverlay.parentElement) {
+      expect(customOverlay.parentElement.id).not.to.equal(
+        "overlay-content"
+      );
+    }
+    expect(isVisible(customOverlay)).to.be.true;
+    openOverlays.push(
+      await Overlay.open(button, "click", clickOverlay, {
+        delayed: false,
+        placement: "bottom",
+        offset: 10
+      })
+    );
+    await waitForPredicate(
+      () => !!(clickOverlay.parentElement && clickOverlay.parentElement.id !== "overlay-content")
+    );
+    expect(isVisible(customOverlay)).to.be.true;
+    expect(isVisible(clickOverlay)).to.be.true;
+  });
+  it("closes via events", async () => {
+    const el = await fixture(html`
             <div id="root">
                 <sp-dialog dismissable></sp-dialog>
             </div>
-        `),e=o.querySelector("sp-dialog");r.push(await p.open(o,"click",e,{delayed:!1,placement:"bottom",offset:10})),await f(()=>!!e.parentElement&&e.parentElement.tagName==="ACTIVE-OVERLAY","content is stolen"),e.close(),await f(()=>!!e.parentElement&&e.parentElement.tagName!=="ACTIVE-OVERLAY","content is returned")}),it("closes an inline overlay when tabbing past the content",async()=>{const o=await v(y`
+        `);
+    const dialog = el.querySelector("sp-dialog");
+    openOverlays.push(
+      await Overlay.open(el, "click", dialog, {
+        delayed: false,
+        placement: "bottom",
+        offset: 10
+      })
+    );
+    await waitUntil(
+      () => !!dialog.parentElement && dialog.parentElement.tagName === "ACTIVE-OVERLAY",
+      "content is stolen"
+    );
+    dialog.close();
+    await waitUntil(
+      () => !!dialog.parentElement && dialog.parentElement.tagName !== "ACTIVE-OVERLAY",
+      "content is returned"
+    );
+  });
+  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">
@@ -59,7 +299,36 @@ import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-compon
                 </div>
                 <input value="After" id="after" />
             </div>
-        `),e=o.querySelector(".trigger"),i=o.querySelector(".content"),n=o.querySelector("input"),l=o.querySelector("#after");r.push(await p.open(e,"inline",i,{})),e.focus(),await g({press:"Tab"}),t(document.activeElement).to.equal(n),t(n.closest("active-overlay")!==null),await g({press:"Shift+Tab"}),t(document.activeElement).to.equal(e),await g({press:"Tab"}),t(document.activeElement).to.equal(n),await g({press:"Tab"}),t(document.activeElement).to.equal(l),await f(()=>document.querySelector("active-overlay")===null)}),it("closes an inline overlay when tabbing before the trigger",async()=>{const o=await v(y`
+        `);
+    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"
+    });
+    expect(document.activeElement).to.equal(input);
+    expect(input.closest("active-overlay") !== null);
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    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
+    );
+  });
+  it("closes an inline overlay when tabbing before the trigger", async () => {
+    const el = await fixture(html`
             <div>
                 <input value="Before" id="before" />
                 <sp-button class="trigger">Trigger</sp-button>
@@ -70,13 +339,209 @@ import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-compon
                     </label>
                 </div>
             </div>
-        `),e=o.querySelector(".trigger"),i=o.querySelector(".content"),n=o.querySelector(".content input"),l=o.querySelector("#before");r.push(await p.open(e,"inline",i,{})),e.focus(),await g({press:"Tab"}),t(document.activeElement).to.equal(n),t(n.closest("active-overlay")!==null),await g({press:"Shift+Tab"}),t(document.activeElement).to.equal(e),await g({press:"Shift+Tab"}),t(document.activeElement).to.equal(l),await f(()=>document.querySelector("active-overlay")===null)}),it("opens detached content",async()=>{const o="This is a detached element that has been overlaid",e=await v(y`
+        `);
+    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"
+    });
+    expect(document.activeElement).to.equal(input);
+    expect(input.closest("active-overlay") !== null);
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    expect(document.activeElement).to.equal(trigger);
+    await sendKeys({
+      press: "Shift+Tab"
+    });
+    expect(document.activeElement).to.equal(before);
+    await waitUntil(
+      () => document.querySelector("active-overlay") === null
+    );
+  });
+  it("opens detached content", async () => {
+    const textContent = "This is a detached element that has been overlaid";
+    const el = await fixture(
+      html`
                 <button>Trigger</button>
-            `),i=document.createElement("div");i.textContent=o;const n=c(e,"sp-opened"),l=await p.open(e,"click",i,{placement:"bottom"});await n;let m=document.querySelector("active-overlay");m?t(m.textContent).to.equal(o):t(m).to.not.be.null;const w=c(e,"sp-closed");l(),await w,m=document.querySelector("active-overlay"),t(m).to.be.null,i.remove()})}),describe('Overlay - type="modal"',()=>{it("closes on `contextmenu` and passes that to the underlying page",async()=>{await v(y`
-            ${E({...E.args,offset:6})}
-        `);const a=window.innerWidth,r=window.innerHeight;let o=c(document,"sp-opened");d({steps:[{type:"move",position:[a/2+50,r/2]},{type:"click",options:{button:"right"},position:[a/2+50,r/2]}]}),await o;const e=document.querySelector("active-overlay"),i=e.querySelector('[slot="header"]');t(e,"first overlay").to.not.be.null,t(e.isConnected).to.be.true,t(i.textContent).to.equal("Menu source: end");let n=c(document,"sp-closed");o=c(document,"sp-opened"),d({steps:[{type:"move",position:[a/4,r/4]},{type:"click",options:{button:"right"},position:[a/4,r/4]}]}),await n,await o;const l=document.querySelector("active-overlay"),m=l.querySelector('[slot="header"]');t(l,"second overlay").to.not.be.null,t(l).to.not.equal(e),t(e.isConnected).to.be.false,t(l.isConnected).to.be.true,t(m.textContent).to.equal("Menu source: start"),n=c(document,"sp-closed"),d({steps:[{type:"move",position:[a/8,r/8]},{type:"click",position:[a/8,r/8]}]}),await n,await u()}),it("does not open content off of the viewport",async()=>{await v(y`
-            ${E({...E.args,offset:6})}
-        `),await M({width:360,height:640}),await u();const a=c(document,"sp-opened");d({steps:[{type:"move",position:[270,10]},{type:"click",options:{button:"right"},position:[270,10]}]}),await a;const r=document.querySelector("active-overlay");t(r.placement).to.equal("right-start"),t(r.getAttribute("actual-placement")).to.equal("bottom");const o=c(document,"sp-closed");g({press:"Escape"}),await o,await u()}),it("opens children in the modal stack through shadow roots",async()=>{const a=await v(O()),r=a.querySelector('[slot="trigger"]');let o=c(a,"sp-opened");r.click(),await o;const e=document.querySelector("popover-content");o=c(e,"sp-opened"),e.button.click(),await o,document.querySelectorAll("active-overlay").forEach(l=>{t(l.slot).to.equal("open")});let n=c(e,"sp-closed");e.trigger.removeAttribute("open"),await n,n=c(a,"sp-closed"),a.removeAttribute("open"),await n})}),describe("Overlay - timing",()=>{it("manages multiple modals in a row without preventing them from closing",async()=>{const a=await v(y`
+            `
+    );
+    const content = document.createElement("div");
+    content.textContent = textContent;
+    const opened = oneEvent(el, "sp-opened");
+    const closeOverlay = await Overlay.open(el, "click", content, {
+      placement: "bottom"
+    });
+    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();
+    await closed;
+    activeOverlay = document.querySelector("active-overlay");
+    expect(activeOverlay).to.be.null;
+    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]
+        }
+      ]
+    });
+    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"
+          },
+          position: [width / 4, height / 4]
+        }
+      ]
+    });
+    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]
+        }
+      ]
+    });
+    await closed;
+    await nextFrame();
+  });
+  it("does not open content off of the viewport", async () => {
+    await fixture(html`
+            ${virtualElement({
+      ...virtualElement.args,
+      offset: 6
+    })}
+        `);
+    await setViewport({ width: 360, height: 640 });
+    await nextFrame();
+    const opened = oneEvent(document, "sp-opened");
+    sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: [270, 10]
+        },
+        {
+          type: "click",
+          options: {
+            button: "right"
+          },
+          position: [270, 10]
+        }
+      ]
+    });
+    await opened;
+    const activeOverlay = document.querySelector(
+      "active-overlay"
+    );
+    expect(activeOverlay.placement).to.equal("right-start");
+    expect(activeOverlay.getAttribute("actual-placement")).to.equal(
+      "bottom"
+    );
+    const closed = oneEvent(document, "sp-closed");
+    sendKeys({
+      press: "Escape"
+    });
+    await closed;
+    await nextFrame();
+  });
+  it("opens children in the modal stack through shadow roots", async () => {
+    const el = await fixture(definedOverlayElement());
+    const trigger = el.querySelector(
+      '[slot="trigger"]'
+    );
+    let open = oneEvent(el, "sp-opened");
+    trigger.click();
+    await open;
+    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");
+    });
+    let close = oneEvent(content, "sp-closed");
+    content.trigger.removeAttribute("open");
+    await close;
+    close = oneEvent(el, "sp-closed");
+    el.removeAttribute("open");
+    await close;
+  });
+});
+describe("Overlay - timing", () => {
+  it("manages multiple modals in a row without preventing them from closing", async () => {
+    const test = await fixture(html`
             <div>
                 <overlay-trigger>
                     <sp-button slot="trigger">Trigger 1</sp-button>
@@ -94,5 +559,94 @@ import"@spectrum-web-components/button/sp-button.js";import"@spectrum-web-compon
                     </sp-popover>
                 </overlay-trigger>
             </div>
-        `),r=a.querySelector("overlay-trigger:first-child"),o=a.querySelector("overlay-trigger:last-child"),e=r.querySelector('[slot="trigger"]'),i=o.querySelector('[slot="trigger"]'),n=e.getBoundingClientRect(),l=i.getBoundingClientRect(),m=[n.left+n.width/2,n.top+n.height/2],w=[n.left+n.width*2,n.top+n.height*2],h=[l.left+l.width/2,l.top+l.height/2],T=[l.left+l.width*2,l.top+l.height/2];await d({steps:[{type:"move",position:m}]}),await u(),await u(),await d({steps:[{type:"move",position:w}]}),await u(),await u(),await d({steps:[{type:"move",position:h}]}),await u(),await u();const S=c(i,"sp-opened");d({steps:[{type:"click",position:h}]}),await S,t(r.hasAttribute("open")).to.be.false,t(o.hasAttribute("open")).to.be.true,t(o.getAttribute("open")).to.equal("click");const H=c(o,"sp-closed");d({steps:[{type:"click",position:T}]}),await H;for(let q=0;q<3;q++)await u();t(r.hasAttribute("open")).to.be.false,t(o.hasAttribute("open"),o.open).to.be.false})});
+        `);
+    const overlayTrigger1 = test.querySelector(
+      "overlay-trigger:first-child"
+    );
+    const overlayTrigger2 = test.querySelector(
+      "overlay-trigger:last-child"
+    );
+    const trigger1 = overlayTrigger1.querySelector(
+      '[slot="trigger"]'
+    );
+    const trigger2 = overlayTrigger2.querySelector(
+      '[slot="trigger"]'
+    );
+    const boundingRectTrigger1 = trigger1.getBoundingClientRect();
+    const boundingRectTrigger2 = trigger2.getBoundingClientRect();
+    const trigger1Position = [
+      boundingRectTrigger1.left + boundingRectTrigger1.width / 2,
+      boundingRectTrigger1.top + boundingRectTrigger1.height / 2
+    ];
+    const outsideTrigger1 = [
+      boundingRectTrigger1.left + boundingRectTrigger1.width * 2,
+      boundingRectTrigger1.top + boundingRectTrigger1.height * 2
+    ];
+    const trigger2Position = [
+      boundingRectTrigger2.left + boundingRectTrigger2.width / 2,
+      boundingRectTrigger2.top + boundingRectTrigger2.height / 2
+    ];
+    const outsideTrigger2 = [
+      boundingRectTrigger2.left + boundingRectTrigger2.width * 2,
+      boundingRectTrigger2.top + boundingRectTrigger2.height / 2
+    ];
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: trigger1Position
+        }
+      ]
+    });
+    await nextFrame();
+    await nextFrame();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: outsideTrigger1
+        }
+      ]
+    });
+    await nextFrame();
+    await nextFrame();
+    await sendMouse({
+      steps: [
+        {
+          type: "move",
+          position: trigger2Position
+        }
+      ]
+    });
+    await nextFrame();
+    await nextFrame();
+    const opened = oneEvent(trigger2, "sp-opened");
+    sendMouse({
+      steps: [
+        {
+          type: "click",
+          position: trigger2Position
+        }
+      ]
+    });
+    await opened;
+    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({
+      steps: [
+        {
+          type: "click",
+          position: outsideTrigger2
+        }
+      ]
+    });
+    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;
+  });
+});
 //# sourceMappingURL=overlay.test.js.map