@spectrum-web-components/overlay 0.16.4 → 0.16.6-devmode.7

package/test/overlay.test.js

@@ -1,29 +1,31 @@
-/*
-Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License. You may obtain a copy
-of the License at http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software distributed under
-the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-OF ANY KIND, either express or implied. See the License for the specific language
-governing permissions and limitations under the License.
-*/
-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 '../';
-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 `
+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 {
@@ -73,185 +75,165 @@ describe('Overlays', () => {
                     </div>
                 </div>
             `);
-        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,
-            }));
-            // Wait for the DOM node to be stolen and reparented into the overlay
-            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,
-        }));
-        // Wait for the DOM node to be stolen and reparented into the overlay
-        await waitForPredicate(() => !!(outerPopover.parentElement &&
-            outerPopover.parentElement.id !== 'overlay-content'));
-        expect(isVisible(outerPopover)).to.be.true;
-        Overlay.update();
-        expect(isVisible(outerPopover)).to.be.true;
+    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(`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,
-        }));
-        // Wait for the DOM node to be stolen and reparented into the overlay
-        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,
-        }));
-        // Wait for the DOM node to be stolen and reparented into the overlay
-        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;
-        // Opening click overlay should close the hover overlay
-        openOverlays.push(await Overlay.open(button, 'click', clickOverlay, {
-            delayed: false,
-            placement: 'bottom',
-            offset: 10,
-        }));
-        // Wait for the DOM node to be stolen and reparented into the overlay
-        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,
-        }));
-        // Wait for the DOM node to be stolen and reparented into the overlay
-        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;
-        // Opening click overlay should close the hover overlay
-        openOverlays.push(await Overlay.open(button, 'click', clickOverlay, {
-            delayed: false,
-            placement: 'bottom',
-            offset: 10,
-        }));
-        // Wait for the DOM node to be stolen and reparented into the overlay
-        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 `
+  });
+  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>
         `);
-        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 `
+    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">
@@ -260,33 +242,33 @@ describe('Overlays', () => {
                 <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',
-        });
-        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);
+    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"
     });
-    it('closes an inline overlay when tabbing before the trigger', async () => {
-        const el = await fixture(html `
+    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>
@@ -298,189 +280,188 @@ describe('Overlays', () => {
                 </div>
             </div>
         `);
-        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);
+    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"
     });
-    it('opens detached content', async () => {
-        const textContent = 'This is a detached element that has been overlaid';
-        const el = await fixture(html `
+    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>
             `);
-        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();
+    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(Object.assign(Object.assign({}, virtualElement.args), { offset: 6 }))}
+  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');
-        // Right click to open "context menu" overlay.
-        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');
-        // Right click to out of the "context menu" overlay to both close
-        // the first overlay and have the event passed to the surfacing page
-        // in order to open a subsequent "context menu" overlay.
-        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();
+    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]
+        }
+      ]
     });
-    it('does not open content off of the viewport', async () => {
-        await fixture(html `
-            ${virtualElement(Object.assign(Object.assign({}, virtualElement.args), { offset: 6 }))}
+    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 });
-        // Allow viewport update to propagate.
-        await nextFrame();
-        const opened = oneEvent(document, 'sp-opened');
-        // Right click to open "context menu" overlay.
-        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();
+    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"
     });
-    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;
+    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 `
+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>
@@ -499,87 +480,85 @@ describe('Overlay - timing', () => {
                 </overlay-trigger>
             </div>
         `);
-        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;
-        // sometimes safari needs to wait a few frames for the open attribute to update
-        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;
+    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
+//# sourceMappingURL=overlay.test.js.map