<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1556358
-->

<head>
  <title>Test for Bug 1556358</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>

<body>
  <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556358">Mozilla Bug 1556358</a>
  <p id="display"></p>
  <div id="content">
    <iframe src="save_restore_custom_elements_sample.html"></iframe>
  </div>
  <script type="application/javascript">
    /** Test for Bug 1556358 **/

    function formDataWith(...entries) {
      const formData = new FormData();
      for (let [key, value] of entries) {
        formData.append(key, value);
      }
      return formData;
    }

    const states = [
      "test state",
      new File(["state"], "state.txt"),
      formDataWith(["1", "state"], ["2", new Blob(["state_blob"])]),
      null,
      undefined,
    ];
    const values = [
      "test value",
      new File(["value"], "value.txt"),
      formDataWith(["1", "value"], ["2", new Blob(["value_blob"])]),
      "null state",
      "both value and state",
    ];

    add_task(async () => {
      const frame = document.querySelector("iframe");
      const elementTags = ["c-e", "upgraded-ce"];

      // Set the custom element values.
      for (const tags of elementTags) {
        [...frame.contentDocument.querySelectorAll(tags)]
          .forEach((e, i) => {
            e.set(states[i], values[i]);
          });
      }

      await new Promise(resolve => {
        frame.addEventListener("load", resolve);
        frame.contentWindow.location.reload();
      });

      for (const tag of elementTags) {
        // Retrieve the restored values.
        const ceStates =
          [...frame.contentDocument.querySelectorAll(tag)].map((e) => e.state);
        is(ceStates.length, 5, "Should have 5 custom element states");

        const [restored, original] = [ceStates, states];
        is(restored[0], original[0], "Value should be restored");

        const file = restored[1];
        isnot(file, original[1], "Restored file object differs from original object.");
        is(file.name, original[1].name, "File name should be restored");
        is(await file.text(), await original[1].text(), "File text should be restored");

        const formData = restored[2];
        isnot(formData, original[2], "Restored formdata object differs from original object.");
        is(formData.get("1"), original[2].get("1"), "Form data string should be restored");
        is(await formData.get("2").text(), await original[2].get("2").text(), "Form data blob should be restored");

        isnot(restored[3], original[3], "Null values don't get restored");
        is(restored[3], undefined, "Null values don't get restored");

        is(restored[4], "both value and state", "Undefined state should be set to value");
      }
    });
  </script>
</body>

</html>
