test_moz_box_group.html

Enable keyboard shortcuts

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>MozBoxGroup Tests</title>

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

    <link

      rel="stylesheet"

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

/>

    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />

    <script

      type="module"

      src="chrome://global/content/elements/moz-box-group.mjs"

    ></script>

    <script src="lit-test-helpers.js"></script>

    <script>

      let testHelpers = new LitTestHelpers();

      add_setup(async function setup() {

        let { html } = await testHelpers.setupLit();

        let templateFn = () => html`

          <moz-box-group>

            <moz-box-item label="item"></moz-box-item>

            <moz-box-button label="button"></moz-box-button>

          </moz-box-group>

`;

        testHelpers.setupTests({ templateFn });

});

      add_task(async function testMozBoxGroupStyles() {

        let {

          children: [boxGroup],

        } = await testHelpers.renderTemplate();

        let [boxItem, boxButton] = boxGroup.shadowRoot

          .querySelector("slot")

          .assignedElements();

        const normalizePx = pxVal => Math.round(parseFloat(pxVal));

        function verifyStyles(el, expectedStyles) {

          let styles = getComputedStyle(el);

          Object.entries(expectedStyles).forEach(([property, value]) => {

is(

              normalizePx(styles[property]),

              normalizePx(value),

              `${property} is ${value}.`

);

});

        const FIRST_ITEM_STYLES = {

          borderStartEndRadius: "8px",

          borderStartStartRadius: "8px",

          borderEndEndRadius: "0px",

          borderEndStartRadius: "0px",

          borderBottomWidth: "0px",

};

        const MIDDLE_ITEM_STYLES = {

          borderStartEndRadius: "0px",

          borderStartStartRadius: "0px",

          borderEndEndRadius: "0px",

          borderEndStartRadius: "0px",

          borderBottomWidth: "0px",

};

        const LAST_ITEM_STYLES = {

          borderStartEndRadius: "0px",

          borderStartStartRadius: "0px",

          borderEndEndRadius: "8px",

          borderEndStartRadius: "8px",

          borderBottomWidth: "1px",

};

        // Verify that two items use the first and last item styles.

        verifyStyles(boxItem, FIRST_ITEM_STYLES);

        verifyStyles(boxButton, LAST_ITEM_STYLES);

        // Change the last item and check that styles change accordingly.

        let slotChanged = BrowserTestUtils.waitForEvent(

          boxGroup.shadowRoot,

          "slotchange"

);

        let secondButton = document.createElement("moz-box-button");

        secondButton.label = "second button";

        boxGroup.append(secondButton);

        await slotChanged;

        verifyStyles(boxItem, FIRST_ITEM_STYLES);

        verifyStyles(boxButton, MIDDLE_ITEM_STYLES);

        verifyStyles(secondButton, LAST_ITEM_STYLES);

        // Change the first item and verify that styles change accordingly.

        slotChanged = BrowserTestUtils.waitForEvent(

          boxGroup.shadowRoot,

          "slotchange"

);

        let secondItem = document.createElement("moz-box-item");

        secondButton.label = "second item";

        boxGroup.prepend(secondItem);

        await slotChanged;

        verifyStyles(secondItem, FIRST_ITEM_STYLES);

        verifyStyles(boxItem, MIDDLE_ITEM_STYLES);

        verifyStyles(boxButton, MIDDLE_ITEM_STYLES);

        verifyStyles(secondButton, LAST_ITEM_STYLES);

});

    </script>

  </head>

  <body>

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

    <div id="content" style="display: none"></div>

    <pre id="test"></pre>

  </body>

</html>