test_moz_button_group.html

<!DOCTYPE HTML>

<html>

  <head>

    <meta charset="utf-8">

    <title>moz-button-group tests</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"/>

    <!-- TODO: Bug 1798404 - in-content/common.css can be removed once we have a better

      solution for token variables for the new widgets -->

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

      <script type="module" src="chrome://global/content/elements/moz-button-group.mjs"></script>

      <script type="module" src="chrome://global/content/elements/moz-button.mjs"></script>

  </head>

  <body>

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

    <div id="content">

      <button id="before-button">Before</button>

      <div id="render"></div>

      <button id="after-button">After</button>

    </div>

    <!-- This is here to ensure the stylesheet is loaded. It gets removed in setup. -->

    <moz-button-group></moz-button-group>

    <moz-button>Test</moz-button>

    <pre id="test">

    </pre>

    <script>

      let html;

      let render;

      let renderArea = document.getElementById("render");

      let beforeButton = document.getElementById("before-button");

      let afterButton = document.getElementById("after-button");

      async function checkButtons(...buttons) {

        const checkOrder = (a, b) => {

          let firstBounds = a.getBoundingClientRect();

          let secondBounds = b.getBoundingClientRect();

          ok(firstBounds.right < secondBounds.left, `First button comes first`);

          let locationDiff = Math.abs(secondBounds.left - firstBounds.right - 8);

          ok(locationDiff < 1, `Second button is 8px after first (${locationDiff}, ${firstBounds.right}, ${secondBounds.left})`);

};

        ok(buttons.length >= 2, "There are at least 2 buttons to check");

        // Verify tab order is correct.

        beforeButton.focus();

        is(document.activeElement, beforeButton, "Before button is focused");

        synthesizeKey("VK_TAB");

        is(document.activeElement, buttons[0], "Next button is focused");

        for (let i = 1; i < buttons.length; i++) {

          // Confirm button order in DOM

          checkOrder(buttons[i - 1], buttons[i]);

          synthesizeKey("VK_TAB");

          is(document.activeElement, buttons[i], "Next button is focused");

        synthesizeKey("VK_TAB");

        is(document.activeElement, afterButton, "After button is at the end in tab order");

        // Verify light DOM order is correct, in case of manual tab management in JS.

        let { parentElement } = buttons[0];

        let parentChildren = parentElement.children;

        is(parentChildren.length, buttons.length, "Expected number of children");

        for (let i = 0; i < parentChildren.length; i++) {

          is(parentChildren[i], buttons[i], `Button ${i} is in correct light DOM spot`);

      add_setup(async function setup() {

        ({ html, render} = await import("chrome://global/content/vendor/lit.all.mjs"));

        document.querySelector("moz-button-group").remove();

        document.querySelector("moz-button").remove();

});

      add_task(async function testButtonOrderingSlot() {

        let markupOptions = [

          html`

            <moz-button-group>

              <button slot="primary" id="primary-button">Primary</button>

              <button id="secondary-button">Secondary</button>

            </moz-button-group>

`,

          html`

            <moz-button-group>

              <moz-button slot="primary" id="primary-button">Primary</moz-button>

              <moz-button id="secondary-button">Secondary</moz-button>

            </moz-button-group>

`,

];

        for (let markup of markupOptions) {

          render(markup, renderArea);

          let buttonGroup = document.querySelector("moz-button-group");

          let primaryButton = document.getElementById("primary-button");

          let secondaryButton = document.getElementById("secondary-button");

          buttonGroup.platform = "win";

          await buttonGroup.updateComplete;

          await checkButtons(primaryButton, secondaryButton);

          buttonGroup.platform = "macosx";

          await buttonGroup.updateComplete;

          await checkButtons(secondaryButton, primaryButton);

});

      add_task(async function testPrimaryButtonAutoSlotting() {

        let markupOptions = [

          html`

            <moz-button-group>

              <button class="primary">Primary</button>

              <button class="secondary">Secondary</button>

            </moz-button-group>

`,

          html`

            <moz-button-group>

              <moz-button type="primary">Primary</moz-button>

              <moz-button type="default">Secondary</moz-button>

            </moz-button-group>

`,

          html`

            <moz-button-group>

              <moz-button type="destructive">Delete</moz-button>

              <moz-button type="default">Secondary</moz-button>

            </moz-button-group>

`,

];

        for (let markup of markupOptions) {

          render(markup, renderArea);

          let buttonGroup = document.querySelector("moz-button-group");

          let primaryButton = buttonGroup.querySelector(

            ".primary, [type=primary], [type=destructive]"

);

          let secondaryButton = buttonGroup.querySelector(".secondary, [type=default]");

          buttonGroup.platform = "win";

          await buttonGroup.updateComplete;

          is(primaryButton.slot, "primary", "primary button was auto-slotted")

          await checkButtons(primaryButton, secondaryButton);

          buttonGroup.platform = "macosx";

          await buttonGroup.updateComplete;

          await checkButtons(secondaryButton, primaryButton);

});

      add_task(async function testSubmitButtonAutoSlotting() {

        render(

          html`

            <moz-button-group>

              <button type="submit">Submit</button>

              <button class="secondary">Secondary</button>

            </moz-button-group>

`,

          renderArea

);

        let buttonGroup = document.querySelector("moz-button-group");

        let submitButton = buttonGroup.querySelector("[type=submit]");

        let secondaryButton = buttonGroup.querySelector(".secondary");

        buttonGroup.platform = "win";

        await buttonGroup.updateComplete;

        is(submitButton.slot, "primary", "submit button was auto-slotted")

        await checkButtons(submitButton, secondaryButton);

        buttonGroup.platform = "macosx";

        await buttonGroup.updateComplete;

        await checkButtons(secondaryButton, submitButton);

});

      add_task(async function testAutofocusButtonAutoSlotting() {

        render(

          html`

            <moz-button-group>

              <button autofocus>First</button>

              <button class="secondary">Secondary</button>

            </moz-button-group>

`,

          renderArea

);

        let buttonGroup = document.querySelector("moz-button-group");

        let autofocusButton = buttonGroup.querySelector("[autofocus]");

        let secondaryButton = buttonGroup.querySelector(".secondary");

        buttonGroup.platform = "win";

        await buttonGroup.updateComplete;

        is(autofocusButton.slot, "primary", "autofocus button was auto-slotted")

        await checkButtons(autofocusButton, secondaryButton);

        buttonGroup.platform = "macosx";

        await buttonGroup.updateComplete;

        await checkButtons(secondaryButton, autofocusButton);

});

      add_task(async function testDefaultButtonAutoSlotting() {

        render(

          html`

            <moz-button-group>

              <button default>First</button>

              <button class="secondary">Secondary</button>

            </moz-button-group>

`,

          renderArea

);

        let buttonGroup = document.querySelector("moz-button-group");

        let defaultButton = buttonGroup.querySelector("[default]");

        let secondaryButton = buttonGroup.querySelector(".secondary");

        buttonGroup.platform = "win";

        await buttonGroup.updateComplete;

        is(defaultButton.slot, "primary", "default button was auto-slotted")

        await checkButtons(defaultButton, secondaryButton);

        buttonGroup.platform = "macosx";

        await buttonGroup.updateComplete;

        await checkButtons(secondaryButton, defaultButton);

});

      add_task(async function testInitialButtonLightDomReordering() {

        let markupOptions = [

          platform => html`

            <moz-button-group .platform=${platform}>

              <button class="primary">First</button>

              <button class="secondary">Secondary</button>

              <button default>Default</button>

            </moz-button-group>

`,

          platform => html`

            <moz-button-group .platform=${platform}>

              <moz-button type="primary" class="primary">First</moz-button>

              <moz-button class="secondary">Secondary</moz-button>

              <moz-button type="primary" default>Default</moz-button>

            </moz-button-group>

`,

];

        for (let markup of markupOptions) {

          const renderPlatform = platform => render(markup(platform), renderArea);

          renderPlatform("win");

          let buttonGroup = document.querySelector("moz-button-group");

          await buttonGroup.updateComplete;

          let primaryButton = buttonGroup.querySelector(".primary");

          let defaultButton = buttonGroup.querySelector("[default]");

          let secondaryButton = buttonGroup.querySelector(".secondary");

          is(primaryButton.slot, "primary", "primary button was auto-slotted");

          is(defaultButton.slot, "primary", "default button was auto-slotted");

          await checkButtons(primaryButton, defaultButton, secondaryButton);

          renderPlatform("macosx");

          buttonGroup = document.querySelector("moz-button-group");

          await buttonGroup.updateComplete;

          primaryButton = buttonGroup.querySelector(".primary");

          defaultButton = buttonGroup.querySelector("[default]");

          secondaryButton = buttonGroup.querySelector(".secondary");

          is(primaryButton.slot, "primary", "primary button was auto-slotted");

          is(defaultButton.slot, "primary", "default button was auto-slotted");

          await checkButtons(secondaryButton, primaryButton, defaultButton);

});

    </script>

  </body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings