test_save_restore_custom_elements.html

Enable keyboard shortcuts

<!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>