test_moz_input_search.html

Enable keyboard shortcuts

<!doctype html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>MozInputSearch 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"

/>

    <script

      type="module"

      src="chrome://global/content/elements/moz-input-search.mjs"

    ></script>

    <script src="lit-test-helpers.js"></script>

    <script class="testbody" type="application/javascript">

      let testHelpers = new InputTestHelpers();

      let html;

      add_setup(async function setup() {

        ({ html } = await testHelpers.setupLit());

        testHelpers.setupTests({

          templateFn: (attrs, children) =>

            html`<moz-input-search ${attrs}>${children}</moz-input-search>`,

});

});

      add_task(async function testMozInputSearchProperties() {

        await testHelpers.testCommonInputProperties("moz-input-search");

});

      add_task(async function testMozInputSearchEvents() {

        await testHelpers.testTextBasedInputEvents("moz-input-search");

});

      add_task(async function testSearchIconPresence() {

        const mozInputSearch = document.querySelector("moz-input-search");

        const inputElement = mozInputSearch.shadowRoot.querySelector("#input");

        const backgroundImage =

          window.getComputedStyle(inputElement).backgroundImage;

        const searchIcon =

          'url("chrome://global/skin/icons/search-textbox.svg")';

is(

          backgroundImage,

          searchIcon,

          "Search icon is set as a background-image of Input element."

);

});

      add_task(async function testMozInputSearchAriaLabel() {

        await testHelpers.verifyAriaLabel("moz-input-search");

});

    </script>

  </head>

  <body>

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

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

  </body>

</html>