test_input_search.html

Enable keyboard shortcuts

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8">

  <title>Test for &lt;input type='search'&gt; clear search button</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://mochikit/content/tests/SimpleTest/test.css"/>

</head>

<body>

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

<div id="content">

  <form>

    <input type="search" name="search" id="searchInput">

  </form>

</div>

<pre id="test">

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

  const { BrowserTestUtils } = ChromeUtils.importESModule(

    "resource://testing-common/BrowserTestUtils.sys.mjs");

  add_task(async function testClearSearchButton() {

    let input = document.getElementById("searchInput");

    let children = SpecialPowers.InspectorUtils.getChildrenForNode(input, true, false);

    let clearButton = children.find(e => e.localName == "button");

    is(searchInput.value, "",

      "Search input should be blank at the start of test");

    ok(!BrowserTestUtils.isVisible(clearButton),

      "Clear button is hidden when there is no value in the input");

    is(clearButton.getAttribute("tabindex"), "-1", "Clear button should not be focusable");

    is(clearButton.getAttribute("aria-hidden"), "true", "Clear button should be hidden from the accessibility tree");

    searchInput.value = "abc";

ok(

      BrowserTestUtils.isVisible(clearButton),

      "Clear button should be visible when text is present"

);

is(

      clearButton.getAttribute("tabindex"),

      "-1",

      "Clear button should not be focusable when visible"

);

is(

      clearButton.getAttribute("aria-hidden"),

      "true",

      "Clear button should be hidden from accessibilty tree when visible"

);

    // Clear text input by clicking the clear button

    synthesizeMouseAtCenter(clearButton, {});

ok(

      !BrowserTestUtils.isVisible(clearButton),

      "Clear button should be hidden after clicking the clear button"

);

is(

      searchInput.value,

"",

      "Search input should be blank after using the clear button"

);

is(

      clearButton.getAttribute("tabindex"),

      "-1",

      "Clear button should not be focusable when hidden again"

);

is(

      clearButton.getAttribute("aria-hidden"),

      "true",

      "Clear button should be hidden from accessibilty tree when button is hidden again"

);

    searchInput.value = "foo";

ok(

      BrowserTestUtils.isVisible(clearButton),

      "Clear button should be visible when text is present"

);

is(

      clearButton.getAttribute("tabindex"),

      "-1",

      "Clear button should not be focusable when visible"

);

is(

      clearButton.getAttribute("aria-hidden"),

      "true",

      "Clear button should be hidden from accessibilty tree when visible"

);

});

</script>

</pre>

</body>

</html>