test_actionhint.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<head>

<title>Tests for action hint that is used by software keyboard</title>

<script src="/tests/SimpleTest/SimpleTest.js"></script>

<script src="/tests/SimpleTest/SpecialPowers.js"></script>

<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

</head>

<body>

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

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

<div>

<form><input type="text" id="a1"><input type="text" id="a2"><input type="submit"></form>

<form><input type="search" id="b1"><input type="submit"></form>

<form><input type="text" id="c1"></form>

<form><input type="text" id="d1"><textarea></textarea><input type="submit"></form>

<form><input type="text" id="e1"><input type="number"><input type="submit"></form>

<form><input type="text" id="f1"><input type="date"><input type="submit"></form>

<form><input type="text" id="g1"><input type="radio"><input type="submit"></form>

<form><input type="text" id="h1"><input type="text" readonly><input type="submit"></form>

<form><input type="text" id="i1"><input type="text" disabled><input type="submit"></form>

<input type="text" id="j1"><input type="text"><input type="button">

<form><input type="text" id="k1"><a href="#foo">foo</a><input type="text"><input type="submit"></form>

<form>

  <input id="l1" enterkeyhint="enter">

  <input id="l2" enterkeyhint="DONE">

  <input id="l3" enterkeyhint="go">

  <input id="l4" enterkeyhint="Next">

  <input id="l5" enterkeyhint="Previous">

  <input id="l6" enterkeyhint="search">

  <textarea id="l7" enterkeyhint="send"></textarea>

  <input id="l8" type="number" enterkeyhint="previous">

  <input id="l9" type="date" enterkeyhint="done">

  <input id="l10" type="time" enterkeyhint="done">

  <input id="l11" enterkeyhint="NONE">

</form>

</div>

<pre id="test">

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

add_task(async function setup() {

  await new Promise(r => SimpleTest.waitForFocus(r));

});

add_task(async function basic() {

  const tests = [

    { id: "a1", hint: "maybenext", desc: "next element is type=text" },

    { id: "a2", hint: "go", desc: "next element is type=submit" },

    { id: "b1", hint: "search", desc: "current is type=search" },

    { id: "c1", hint: "go", desc: "only this element" },

    { id: "d1", hint: "maybenext", desc: "next element is textarea" },

    { id: "e1", hint: "maybenext", desc: "next element is type=number" },

    { id: "h1", hint: "go", desc: "next element is readonly" },

    // XXX Feel free to change this result if you get some bugs reports

    { id: "i1", hint: "go", desc: "next element is disabled" },

    { id: "j1", hint: "", desc: "no form element" },

    { id: "l1", hint: "enter", desc: "enterkeyhint=enter" },

    { id: "l2", hint: "done", desc: "enterkeyhint=DONE" },

    { id: "l3", hint: "go", desc: "enterkeyhint=go" },

    { id: "l4", hint: "next", desc: "enterkeyhint=Next" },

    { id: "l5", hint: "previous", desc: "enterkeyhint=Previous" },

    { id: "l6", hint: "search", desc: "enterkeyhint=search" },

    { id: "l7", hint: "send", desc: "enterkeyhint=send" },

    { id: "l8", hint: "previous", desc: "type=number enterkeyhint=previous" },

    // type=date is readonly content

    { id: "l9", hint: "", desc: "type=date enterkeyhint=done" },

    // type=time is readonly content

    { id: "l10", hint: "", desc: "type=time enterkeyhint=done" },

    // Since enterkeyhint is invalid, we infer action hint. So feel free to change this.

    { id: "l11", hint: "go", desc: "enterkeyhint is invalid" },

];

  const todo_tests = [

    { id: "f1", hint: "maybenext", desc: "next element is type=date" },

    { id: "k1", hint: "", desc: "next is anchor link" },

];

  for (let test of tests) {

    document.getElementById(test.id).focus();

    is(SpecialPowers.DOMWindowUtils.focusedActionHint, test.hint, test.desc);

  for (let test of todo_tests) {

    document.getElementById(test.id).focus();

    todo_is(SpecialPowers.DOMWindowUtils.focusedActionHint, test.hint, test.desc);

});

add_task(async function dynamicChange() {

  let element = document.getElementById("l1");

  element.focus();

  is(SpecialPowers.DOMWindowUtils.focusedActionHint, "enter",

     "Initial enterKeyHint");

  element.setAttribute("enterkeyhint", "next");

  is(SpecialPowers.DOMWindowUtils.focusedActionHint, "next",

     "enterKeyHint in InputContext has to sync with enterkeyhint attribute");

  element.enterKeyHint = "search";

  is(SpecialPowers.DOMWindowUtils.focusedActionHint, "search",

     "enterKeyHint in InputContext has to sync with enterKeyHint setter");

  document.getElementById("l2").setAttribute("enterkeyhint", "send");

  is(SpecialPowers.DOMWindowUtils.focusedActionHint, "search",

     "enterKeyHint in InputContext keeps focused enterKeyHint value");

  // Storing the original value may be safer.

  element.enterkeyhint = "enter";

  document.getElementById("l2").enterKeyHint = "done";

});

</script>

</pre>

</body>

</html>