Quelle test_moz_promo.html

Sprache: HTML

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>MozPromo 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"
    />
    <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
    <script
      type="module"
      src="chrome://global/content/elements/moz-promo.mjs"
    ></script>
  </head>

  <body>
    <p id="display"></p>
    <div id="content">
      <moz-promo
        id="promoMessage"
        heading="Heading"
        message="Test message"
      ></moz-promo>
      <moz-promo id="noProvidedHeadingOrMessage"></moz-promo>
      <moz-promo
        id="defaultType"
        heading="Default type"
        type="default"
      ></moz-promo>
      <moz-promo
        id="vibrantType"
        heading="Vibrant type"
        type="vibrant"
      ></moz-promo>
      <moz-promo id="actionsPromo" heading="Actions slot" type="default">
        <button slot="actions">Action button</button>
      </moz-promo>
      <moz-promo
        id="supportLinkPromo"
        heading="Support link slot"
        type="vibrant"
      >
        <a slot="support-link" href="#learn-more">Learn more</a>
      </moz-promo>
    </div>
    <pre id="test"></pre>
    <script class="testbody" type="application/javascript">
      function assertContainersAlignment(testPromo) {
        let imageAlignment = testPromo.imageAlignment;
        is(
          testPromo.imageSrc,
          "chrome://global/skin/illustrations/about-license.svg",
          "imageSrc should not change when modifying imageAlignment."
        );
        let container = testPromo.shadowRoot.querySelector(".container");
        let children = container.children;
        is(children.length, 2, "There should still be only two containers.");
        if (imageAlignment == "end" || imageAlignment == "center") {
          is(
            children[0].className,
            "text-container",
            `The text container should be before the image container when the image is aligned at the ${imageAlignment}.`
          );
          is(
            children[1].className,
            "image-container",
            `The image container should be after the text container when the image is aligned at the ${imageAlignment}.`
          );
        }
        if (imageAlignment == "start") {
          is(
            children[0].className,
            "image-container",
            "The image container should be before the text container when the image is aligned at the start."
          );
          is(
            children[1].className,
            "text-container",
            "The text container should be after the image container when the image is aligned at the start."
          );
        }
      }

      add_task(async function test_component_declaration() {
        const mozPromo = document.querySelector("#promoMessage");
        ok(mozPromo, "moz-promo component is rendered");

        const heading = mozPromo.shadowRoot.querySelector(".heading");
        is(
          heading.textContent.trim(),
          "Heading",
          "Heading is correctly rendered"
        );
        const message = mozPromo.shadowRoot.querySelector(".message");
        is(
          message.textContent.trim(),
          "Test message",
          "Message is correctly rendered"
        );
      });

      add_task(async function test_heading_and_message_display() {
        const mozPromo = document.querySelector("#noProvidedHeadingOrMessage");
        let heading = mozPromo.shadowRoot.querySelector(".heading");
        let message = mozPromo.shadowRoot.querySelector(".message");

        ok(
          !heading,
          "Heading element is not displayed if it hasn't been initialized"
        );
        ok(
          !message.textContent.trim(),
          "Message element has no text if it hasn't been initialized"
        );

        mozPromo.heading = "Dynamically added heading";
        await mozPromo.updateComplete;
        heading = mozPromo.shadowRoot.querySelector(".heading");
        is(
          heading.textContent.trim(),
          "Dynamically added heading",
          "New heading element is displayed"
        );

        mozPromo.message = "Dynamically added message";
        await mozPromo.updateComplete;
        message = mozPromo.shadowRoot.querySelector(".message");
        is(
          message.textContent.trim(),
          "Dynamically added message",
          "New message element is displayed"
        );
      });

      add_task(async function test_promo_types() {
        const defaultMozPromo = document.querySelector("#defaultType");
        const vibrantMozPromo = document.querySelector("#vibrantType");
        is(
          defaultMozPromo.getAttribute("type"),
          "default",
          "Assigned type should not change during initial lifecycle"
        );
        is(
          vibrantMozPromo.getAttribute("type"),
          "vibrant",
          "Assigned type should not change during initial lifecycle"
        );

        let defaultStyles = window.getComputedStyle(defaultMozPromo);
        let vibrantStyles = window.getComputedStyle(vibrantMozPromo);

        // We are not testing the validity of the values assigned to the
        // background-color. We are ensuring the colors change
        // appropriate when using the "default" or "vibrant" types of
        // moz-promo.

        let defaultBackgroundColor = defaultStyles.getPropertyValue(
          "--promo-background-color"
        );
        let vibrantBackgroundColor = vibrantStyles.getPropertyValue(
          "--promo-background-color"
        );

        isnot(
          defaultBackgroundColor,
          vibrantBackgroundColor,
          "Each type should have a unique background color"
        );

        // Now we are going to swap the types of the elements and assert
        // that the background colors correctly changed;
        defaultMozPromo.type = "vibrant";
        vibrantMozPromo.type = "default";
        await defaultMozPromo.updateComplete;
        await vibrantMozPromo.updateComplete;

        let newDefaultBackgroundColor = defaultStyles.getPropertyValue(
          "--promo-background-color"
        );
        let newVibrantBackgroundColor = vibrantStyles.getPropertyValue(
          "--promo-background-color"
        );
        is(
          newDefaultBackgroundColor,
          vibrantBackgroundColor,
          "The default promo was switched to the vibrant type, the background color should be updated"
        );
        is(
          newVibrantBackgroundColor,
          defaultBackgroundColor,
          "The vibrant promo was switched to the default type, the background color should be updated"
        );
      });

      add_task(async function test_image_alignment() {
        let testBody = document.getElementById("content");
        let testPromo = document.createElement("moz-promo");
        testPromo.id = "test-promo";
        testPromo.imageSrc =
          "chrome://global/skin/illustrations/about-license.svg";
        testBody.append(testPromo);
        await testPromo.updateComplete;

        ok(
          document.getElementById("test-promo"),
          "Generated moz-promo should be added to the DOM"
        );
        is(
          testPromo.imageSrc,
          "chrome://global/skin/illustrations/about-license.svg",
          "imageSrc should not change when moz-promo is added to the document"
        );
        is(
          testPromo.imageAlignment,
          "start",
          "imageAlignment should be set to 'start' by default"
        );

        // Assert that the logical ordering of the DOM nodes occurs when changing
        // iconAlignment
        assertContainersAlignment(testPromo);

        testPromo.imageAlignment = "end";
        await testPromo.updateComplete;
        assertContainersAlignment(testPromo);

        testPromo.imageAlignment = "center";
        await testPromo.updateComplete;
        assertContainersAlignment(testPromo);
      });

      add_task(async function test_actions_slot() {
        let actionsPromo = document.getElementById("actionsPromo");
        ok(
          actionsPromo,
          "Promo element should exist when using an element for the actions slot"
        );
        let actionsButton = actionsPromo.querySelector("button");
        is(
          actionsPromo.actionsSlot.assignedElements()[0],
          actionsButton,
          "Slotted button is correctly assigned"
        );

        actionsButton.remove();
        await actionsPromo.updateComplete;
        is(
          actionsPromo.actionsSlot.assignedElements().length,
          0,
          "The actions slot updates correctly when the slotted element is removed"
        );

        actionsPromo.append(actionsButton);
        await actionsPromo.updateComplete;
        is(
          actionsPromo.actionsSlot.assignedElements()[0],
          actionsButton,
          "Adding the actions button back to the promo element updates the slotted element correctly"
        );
      });

      add_task(async function test_support_link_slot() {
        let supportLinkPromo = document.getElementById("supportLinkPromo");
        ok(
          supportLinkPromo,
          "Promo element should exist when using an element for the support-link slot"
        );
        let supportLink = supportLinkPromo.querySelector("a");
        is(
          supportLinkPromo.supportLinkSlot.assignedElements()[0],
          supportLink,
          "Slotted support link is correctly assigned"
        );

        supportLink.remove();
        await supportLinkPromo.updateComplete;
        is(
          supportLinkPromo.supportLinkSlot.assignedElements().length,
          0,
          "The support-link slot updates correctly when the slotted element is removed"
        );

        supportLinkPromo.append(supportLink);
        await supportLinkPromo.updateComplete;
        is(
          supportLinkPromo.supportLinkSlot.assignedElements()[0],
          supportLink,
          "Adding the support link back to the promo element updates the slotted element correctly"
        );
      });
    </script>
  </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.