Quelle test_moz_box_item.html

Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/toolkit/content/tests/widgets/test_moz_box_item.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MozBoxItem 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://global/skin/in-content/common.css" />
    <link
      rel="stylesheet"
      href="chrome://mochikit/content/tests/SimpleTest/test.css"
    />
    <script
      type="module"
      src="chrome://global/content/elements/moz-box-item.mjs"
    ></script>
    <script src="lit-test-helpers.js"></script>
    <script>
      let html;
      let testHelpers = new LitTestHelpers();

      add_setup(async function setup() {
        ({ html } = await testHelpers.setupLit());
        let templateFn = attrs => html`
          <moz-box-item ${attrs}></moz-box-item>
        `;
        testHelpers.setupTests({ templateFn });
      });

      add_task(async function testMozBoxItemProperties() {
        const TEST_LABEL = "this is a test";
        let labelledTemplate = testHelpers.templateFn({ label: TEST_LABEL });
        let renderTarget = await testHelpers.renderTemplate(labelledTemplate);
        let item = renderTarget.firstElementChild;

        ok(item, "The box item renders.");
        is(item.label, TEST_LABEL, "The box item has the expected label.");
        is(
          item.labelEl.textContent.trim(),
          TEST_LABEL,
          "The box item label is rendered."
        );

        const TEST_DESCRIPTION = "This is a description";
        item.description = TEST_DESCRIPTION;
        await item.updateComplete;

        is(
          item.descriptionEl.textContent.trim(),
          TEST_DESCRIPTION,
          "The item supports setting a description."
        );

        const ICON_SRC = "chrome://global/skin/icons/edit-copy.svg";
        item.iconSrc = ICON_SRC;
        await item.updateComplete;

        is(
          item.iconEl.getAttribute("src"),
          ICON_SRC,
          "The item supports setting an icon."
        );
      });

      add_task(async function testMozBoxItemContentSlot() {
        let slottedTemplate = testHelpers.templateFn();
        let renderTarget = await testHelpers.renderTemplate(slottedTemplate);
        let item = renderTarget.firstElementChild;

        const SLOTTED_MESSAGE = "This is slotted content";
        let slottedContent = document.createElement("p");
        slottedContent.textContent = SLOTTED_MESSAGE;

        item.append(slottedContent);
        await item.updateComplete;

        ok(item.defaultSlotEl, "Content slot exists.");
        is(
          item.defaultSlotEl.assignedElements()[0],
          slottedContent,
          "The expected element is slotted."
        );
        ok(
          !item.labelEl,
          "Label element is not rendered when slotted content is present."
        );
        ok(
          !item.descriptionEl,
          "Description element is not rendered when slotted content is present."
        );
      });

      add_task(async function testMozBoxItemLayouts() {
        let layoutTemplate = testHelpers.templateFn({
          label: "Testing layouts",
          description: "Some description",
          iconSrc: "chrome://global/skin/icons/info.svg",
        });
        let renderTarget = await testHelpers.renderTemplate(layoutTemplate);
        let item = renderTarget.firstElementChild;

        ok(item.iconEl, "Item displays an icon.");
        let iconStyles = window.getComputedStyle(item.iconEl);
        let defaultIconSize = iconStyles.getPropertyValue("--icon-size");
        is(
          iconStyles.height,
          defaultIconSize,
          "default layout uses the default icon height."
        );
        is(
          iconStyles.width,
          defaultIconSize,
          "default layout uses the default icon width."
        );

        item.layout = "large-icon";
        await item.updateComplete;

        ok(item.iconEl, "Item still displays an icon.");
        iconStyles = window.getComputedStyle(item.iconEl);
        let largeIconSize = iconStyles.getPropertyValue("--icon-size-xlarge");
        is(
          iconStyles.height,
          largeIconSize,
          "icon-start layout uses a larger icon height."
        );
        is(
          iconStyles.width,
          largeIconSize,
          "icon-star layout uses a larger icon width."
        );
      });

      add_task(async function testMozBoxItemActionsSlots() {
        let slottedTemplate = testHelpers.templateFn();
        let renderTarget = await testHelpers.renderTemplate(slottedTemplate);
        let item = renderTarget.firstElementChild;

        let slottedAction = document.createElement("moz-button");
        slottedAction.label = "Click me!";
        slottedAction.slot = "actions";

        item.append(slottedAction);
        await item.updateComplete;

        is(
          item.actionsSlotEl.assignedElements()[0],
          slottedAction,
          "The expected action is slotted."
        );

        slottedAction.remove();
        slottedAction = null;
        await item.updateComplete;

        is(
          item.actionsSlotEl.assignedElements().length,
          0,
          "The actions slot doesn't have assigned elements."
        );

        slottedAction = document.createElement("moz-button");
        slottedAction.iconSrc = "chrome://global/skin/icons/delete.svg";
        slottedAction.title = "Delete";
        slottedAction.slot = "actions-start";

        item.append(slottedAction);
        await item.updateComplete;

        is(
          item.actionsStartSlotEl.assignedElements()[0],
          slottedAction,
          "The expected action is slotted."
        );
      });

      add_task(async function testMozBoxItemSupportPage() {
        let supportPageTemplate = testHelpers.templateFn({
          label: "Testing support-page",
          "support-page": "test",
        });
        let renderTarget =
          await testHelpers.renderTemplate(supportPageTemplate);
        let item = renderTarget.firstElementChild;

        let supportLink = item.shadowRoot.querySelector(".support-page");
        ok(
          supportLink,
          "moz-box-item renders a support link when supportPage is provided."
        );

        let adjacentEl = supportLink.previousElementSibling;
        is(
          adjacentEl.id,
          "label",
          "support link is placed next to the label when no description is provided."
        );

        item.description = "now we have a description.";
        await item.updateComplete;

        supportLink = item.shadowRoot.querySelector(".support-page");
        adjacentEl = supportLink.previousElementSibling;
        is(
          adjacentEl.id,
          "description",
          "support link is placed next to the description when provided."
        );
      });

      add_task(async function testMozBoxItemSlottedDescription() {
        let slottedTemplate = testHelpers.templateFn({
          label: "Testing slotted description",
        });
        let renderTarget = await testHelpers.renderTemplate(slottedTemplate);
        let item = renderTarget.firstElementChild;

        ok(!item.hasDescription, "Item initially has no description.");

        const SLOTTED_DESCRIPTION = "This is a slotted description";
        let slottedDesc = document.createElement("span");
        slottedDesc.textContent = SLOTTED_DESCRIPTION;
        slottedDesc.slot = "description";

        item.append(slottedDesc);
        await item.updateComplete;

        let descriptionSlot = item.shadowRoot.querySelector(
          "slot[name='description']"
        );
        ok(descriptionSlot, "Description slot exists in shadow DOM");

        let slottedElements = descriptionSlot.assignedElements();
        is(
          slottedElements.length,
          1,
          "Description slot has one assigned element"
        );
        is(
          slottedElements[0],
          slottedDesc,
          "Slotted description is assigned to description slot"
        );
        ok(item.hasDescription, "Item has description after slotting content");
      });

      add_task(async function testMozBoxItemSlottedSupportLink() {
        let slottedTemplate = testHelpers.templateFn({
          label: "Testing slotted support link",
        });
        let renderTarget = await testHelpers.renderTemplate(slottedTemplate);
        let item = renderTarget.firstElementChild;

        ok(!item.hasSupportPage, "Item initially has no support page.");

        let slottedLink = document.createElement("a");
        slottedLink.href = "https://example.com/support";
        slottedLink.textContent = "Learn more";
        slottedLink.slot = "support-link";

        item.append(slottedLink);
        await item.updateComplete;

        let supportLinkSlot = item.shadowRoot.querySelector(
          "slot[name='support-link']"
        );
        ok(supportLinkSlot, "Support link slot exists in shadow DOM");

        let slottedElements = supportLinkSlot.assignedElements();
        is(
          slottedElements.length,
          1,
          "Support link slot has one assigned element"
        );
        is(
          slottedElements[0],
          slottedLink,
          "Slotted link is assigned to support-link slot"
        );
        ok(item.hasSupportPage, "Item has support page after slotting content");

        let adjacentEl = supportLinkSlot.previousElementSibling;
        is(
          adjacentEl.id,
          "label",
          "support link slot is placed next to the label when no description is provided."
        );

        item.description = "now we have a description.";
        await item.updateComplete;

        supportLinkSlot = item.shadowRoot.querySelector(
          "slot[name='support-link']"
        );
        adjacentEl = supportLinkSlot.previousElementSibling;
        is(
          adjacentEl.id,
          "description",
          "support link slot is placed next to the description when provided."
        );
      });
    </script>
  </head>
  <body>
    <p id="display"></p>
    <div id="content" style="display: none"></div>
    <pre id="test"></pre>
  </body>
</html>

Messung V0.5 in Prozent

¤ Dauer der Verarbeitung: 0.4 Sekunden ¤

Wurzel

Suchen

PVS Prover

Isabelle Prover

NIST Cobol Testsuite

Cephes Mathematical Library

Vienna Development Method

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.