test_custom_element_auto_import.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>Test for custom element auto import behavior</title>

  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>

  <link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>

  <script>

/*

    Note: once you import one of these custom elements, they stay on the window

    outside of the task that imported them. This can create issues if writing

    another test in this file.

*/

    add_task(async function test_custom_elements_auto_import() {

      let registry = SpecialPowers.wrap(customElements);

      // Ensure the custom elements from ESModules are not defined.

      is(registry.get("moz-button-group"), undefined, "moz-button-group should be undefined since we have not yet imported it");

      is(registry.get("moz-support-link"), undefined, "moz-support-link should be undefined since we have not yet imported it");

      is(registry.get("moz-toggle"), undefined, "moz-toggle should be undefined since we have not yet imported it");

      // Create a custom element and assert that it gets imported/defined.

      document.createElement("moz-support-link");

      ok(registry.get("moz-support-link"), "moz-support-link should be defined after creation");

      // Create multiple custom elements and assert they exist in the registry.

      is(registry.get("moz-button-group"), undefined, "moz-button-group should be undefined since we have not yet imported it");

      is(registry.get("moz-toggle"), undefined, "moz-toggle should be undefined since we have not yet imported it")

      document.createElement("moz-button-group");

      document.createElement("moz-toggle");

      ok(registry.get("moz-toggle"), "moz-toggle should be defined after importing it");

      ok(registry.get("moz-button-group"), "moz-button-group should be defined after importing it");

      // Ensure there are no errors if the imported elements are created again.

      document.createElement("moz-support-link");

      document.createElement("moz-button-group");

      document.createElement("moz-toggle");

      ok(true, "The custom elements should not throw an error if imported again");

})

  </script>

</head>

<body>

<p id="display"></p>

<div id="content" style="display: none"></div>

<pre id="test"></pre>

</body>

</html>