test_panel_list_popover.html

<!doctype html>

<!-- Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/ -->

<html>

  <head>

    <meta charset="utf-8" />

    <title>Test Panel List Popover</title>

    <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

    <script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>

    <link

      rel="stylesheet"

      href="chrome://mochikit/content/tests/SimpleTest/test.css"

/>

  </head>

  <body>

    <p id="display"></p>

    <div id="content">

      <button id="anchor-button">Open</button>

      <panel-list id="panel-list">

        <panel-item>one</panel-item>

        <panel-item submenu="sub-panel-list" id="submenu-host">

two

        </panel-item>

        <panel-item>three</panel-item>

      </panel-list>

    </div>

    <script class="testbody" type="application/javascript">

      const { BrowserTestUtils } = ChromeUtils.importESModule(

        "resource://testing-common/BrowserTestUtils.sys.mjs"

);

      const { TestUtils } = ChromeUtils.importESModule(

        "resource://testing-common/TestUtils.sys.mjs"

);

      let anchorButton, panelList;

      add_setup(function setup() {

        panelList = document.getElementById("panel-list");

        anchorButton = document.getElementById("anchor-button");

        anchorButton.addEventListener("click", e => panelList.toggle(e));

});

      add_task(async function testPopoverAttributeSetOnConnect() {

is(

          panelList.getAttribute("popover"),

          "manual",

          "Panel list should have popover='manual' attribute set"

);

});

      add_task(async function testSupportsPopover() {

ok(

          panelList.supportsPopover(),

          "Panel list should support popover (not in XUL panel, not a submenu)"

);

});

      add_task(async function testSubmenuDoesNotSupportPopover() {

        await customElements.whenDefined("panel-list");

        await customElements.whenDefined("panel-item");

        let submenuHost = document.getElementById("submenu-host");

        let subPanelList = document.createElement("panel-list");

        subPanelList.setAttribute("slot", "submenu");

        subPanelList.setAttribute("id", "sub-panel-list");

        let subItem1 = document.createElement("panel-item");

        let subItem2 = document.createElement("panel-item");

        subPanelList.appendChild(subItem1);

        subPanelList.appendChild(subItem2);

        submenuHost.appendChild(subPanelList);

        await customElements.whenDefined("panel-list");

ok(

          !subPanelList.supportsPopover(),

          "Submenu panel list should not support popover"

);

ok(

          !subPanelList.hasAttribute("popover"),

          "Submenu panel list should not have popover attribute"

);

});

      add_task(async function testShowPopoverCalledOnShow() {

        let shown = BrowserTestUtils.waitForEvent(panelList, "shown");

        panelList.show();

        await shown;

ok(

          panelList.matches(":popover-open"),

          "Panel should match :popover-open after show()"

);

        let hidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

        panelList.hide();

        await hidden;

});

      add_task(async function testHidePopoverCalledOnHide() {

        let shown = BrowserTestUtils.waitForEvent(panelList, "shown");

        panelList.show();

        await shown;

ok(

          panelList.matches(":popover-open"),

          "Panel should be open before hiding"

);

        let hidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

        panelList.hide();

        await hidden;

ok(

          !panelList.matches(":popover-open"),

          "Panel should no longer match :popover-open after hide()"

);

});

      add_task(async function testNoRecursionOnShow() {

        let shownCount = 0;

        let shownListener = () => {

          shownCount++;

};

        panelList.addEventListener("shown", shownListener);

        let shown = BrowserTestUtils.waitForEvent(panelList, "shown");

        panelList.show();

        await shown;

is(

          shownCount,

1,

          "shown event should fire exactly once (no recursion)"

);

        panelList.removeEventListener("shown", shownListener);

        let hidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

        panelList.hide();

        await hidden;

});

      add_task(async function testPopoverPanelStaysOpenOnScroll() {

        let shown = BrowserTestUtils.waitForEvent(panelList, "shown");

        panelList.show();

        await shown;

ok(

          panelList.matches(":popover-open"),

          "Panel should be open before scroll"

);

        window.dispatchEvent(new Event("scroll"));

        await TestUtils.waitForTick();

ok(

          panelList.matches(":popover-open"),

          "Popover panel should remain open after scroll event"

);

        let hidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

        panelList.hide();

        await hidden;

});

      add_task(async function testPopoverPanelStaysOpenOnResize() {

        let shown = BrowserTestUtils.waitForEvent(panelList, "shown");

        panelList.show();

        await shown;

ok(

          panelList.matches(":popover-open"),

          "Panel should be open before resize"

);

        window.dispatchEvent(new Event("resize"));

        await TestUtils.waitForTick();

ok(

          panelList.matches(":popover-open"),

          "Popover panel should remain open after resize event"

);

        let hidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

        panelList.hide();

        await hidden;

});

      add_task(async function testToggleViaAnchorButtonClick() {

ok(

          !panelList.matches(":popover-open"),

          "Panel should be closed initially"

);

        let shown = BrowserTestUtils.waitForEvent(panelList, "shown");

        synthesizeMouseAtCenter(anchorButton, {});

        await shown;

ok(

          panelList.matches(":popover-open"),

          "Panel should open after clicking anchor button"

);

        let hidden = BrowserTestUtils.waitForEvent(panelList, "hidden");

        synthesizeMouseAtCenter(anchorButton, {});

        await hidden;

ok(

          !panelList.matches(":popover-open"),

          "Panel should close after clicking anchor button again"

);

});

    </script>

  </body>

</html>