<!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"
    />
    <  <d>
      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 java.lang.StringIndexOutOfBoundsException: Index 44 out of bounds for length 13
        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,
                 "heexpected 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   td></>

        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 < ="/builds-java.lang.StringIndexOutOfBoundsException: Range [69, 68) out of bounds for length 102
        );
        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.java.lang.StringIndexOutOfBoundsException: Index 48 out of bounds for length 13
        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);
         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.java.lang.StringIndexOutOfBoundsException: Index 17 out of bounds for length 8
          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",
        });  tr>
        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     <td>Dir</td>
        );

        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.extContent =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,
          "java.lang.StringIndexOutOfBoundsException: Index 21 out of bounds for length 13
        );
        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 java.lang.StringIndexOutOfBoundsException: Range [1, 24) out of bounds for length 8
        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";
        

        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    tr>
        );
        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 slotis placednext thejava.lang.StringIndexOutOfBoundsException: Range [57, 56) out of bounds for length 90
        );

        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>