widget/tests/test_actionhint.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>Tests for action hint that is used by software keyboard</title>
   5 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   6 <script src="/tests/SimpleTest/SpecialPowers.js"></script>
   7 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
   8 </head>
   9 <body>
  10 <p id="display"></p>
  11 <div id="content" style="display: none"></div>
  12 <div>
  13 <form><input type="text" id="a1"><input type="text" id="a2"><input type="submit"></form>
  14 <form><input type="search" id="b1"><input type="submit"></form>
  15 <form><input type="text" id="c1"></form>
  16 <form><input type="text" id="d1"><textarea></textarea><input type="submit"></form>
  17 <form><input type="text" id="e1"><input type="number"><input type="submit"></form>
  18 <form><input type="text" id="f1"><input type="date"><input type="submit"></form>
  19 <form><input type="text" id="g1"><input type="radio"><input type="submit"></form>
  20 <form><input type="text" id="h1"><input type="text" readonly><input type="submit"></form>
  21 <form><input type="text" id="i1"><input type="text" disabled><input type="submit"></form>
  22 <input type="text" id="j1"><input type="text"><input type="button">
  23 <form><input type="text" id="k1"><a href="#foo">foo</a><input type="text"><input type="submit"></form>
  24 <form>
  25   <input id="l1" enterkeyhint="enter">
  26   <input id="l2" enterkeyhint="DONE">
  27   <input id="l3" enterkeyhint="go">
  28   <input id="l4" enterkeyhint="Next">
  29   <input id="l5" enterkeyhint="Previous">
  30   <input id="l6" enterkeyhint="search">
  31   <textarea id="l7" enterkeyhint="send"></textarea>
  32   <input id="l8" type="number" enterkeyhint="previous">
  33   <input id="l9" type="date" enterkeyhint="done">
  34   <input id="l10" type="time" enterkeyhint="done">
  35   <input id="l11" enterkeyhint="NONE">
  36 </form>
  37 </div>
  38 <pre id="test">
  39 <script class="testbody" type="application/javascript">
  40 add_task(async function setup() {
  41   await new Promise(r => SimpleTest.waitForFocus(r));
  42 });
  43
  44 add_task(async function basic() {
  45   const tests = [
  46     { id: "a1", hint: "maybenext", desc: "next element is type=text" },
  47     { id: "a2", hint: "go", desc: "next element is type=submit" },
  48     { id: "b1", hint: "search", desc: "current is type=search" },
  49     { id: "c1", hint: "go", desc: "only this element" },
  50     { id: "d1", hint: "maybenext", desc: "next element is textarea" },
  51     { id: "e1", hint: "maybenext", desc: "next element is type=number" },
  52     { id: "h1", hint: "go", desc: "next element is readonly" },
  53     // XXX Feel free to change this result if you get some bugs reports
  54     { id: "i1", hint: "go", desc: "next element is disabled" },
  55     { id: "j1", hint: "", desc: "no form element" },
  56     { id: "l1", hint: "enter", desc: "enterkeyhint=enter" },
  57     { id: "l2", hint: "done", desc: "enterkeyhint=DONE" },
  58     { id: "l3", hint: "go", desc: "enterkeyhint=go" },
  59     { id: "l4", hint: "next", desc: "enterkeyhint=Next" },
  60     { id: "l5", hint: "previous", desc: "enterkeyhint=Previous" },
  61     { id: "l6", hint: "search", desc: "enterkeyhint=search" },
  62     { id: "l7", hint: "send", desc: "enterkeyhint=send" },
  63     { id: "l8", hint: "previous", desc: "type=number enterkeyhint=previous" },
  64     // type=date is readonly content
  65     { id: "l9", hint: "", desc: "type=date enterkeyhint=done" },
  66     // type=time is readonly content
  67     { id: "l10", hint: "", desc: "type=time enterkeyhint=done" },
  68     // Since enterkeyhint is invalid, we infer action hint. So feel free to change this.
  69     { id: "l11", hint: "go", desc: "enterkeyhint is invalid" },
  70   ];
  71
  72   const todo_tests = [
  73     { id: "f1", hint: "maybenext", desc: "next element is type=date" },
  74     { id: "k1", hint: "", desc: "next is anchor link" },
  75   ];
  76
  77
  78   for (let test of tests) {
  79     document.getElementById(test.id).focus();
  80     is(SpecialPowers.DOMWindowUtils.focusedActionHint, test.hint, test.desc);
  81   }
  82
  83   for (let test of todo_tests) {
  84     document.getElementById(test.id).focus();
  85     todo_is(SpecialPowers.DOMWindowUtils.focusedActionHint, test.hint, test.desc);
  86   }
  87 });
  88
  89 add_task(async function dynamicChange() {
  90   let element = document.getElementById("l1");
  91   element.focus();
  92   is(SpecialPowers.DOMWindowUtils.focusedActionHint, "enter",
  93      "Initial enterKeyHint");
  94
  95   element.setAttribute("enterkeyhint", "next");
  96   is(SpecialPowers.DOMWindowUtils.focusedActionHint, "next",
  97      "enterKeyHint in InputContext has to sync with enterkeyhint attribute");
  98
  99   element.enterKeyHint = "search";
 100   is(SpecialPowers.DOMWindowUtils.focusedActionHint, "search",
 101      "enterKeyHint in InputContext has to sync with enterKeyHint setter");
 102
 103   document.getElementById("l2").setAttribute("enterkeyhint", "send");
 104   is(SpecialPowers.DOMWindowUtils.focusedActionHint, "search",
 105      "enterKeyHint in InputContext keeps focused enterKeyHint value");
 106
 107   // Storing the original value may be safer.
 108   element.enterkeyhint = "enter";
 109   document.getElementById("l2").enterKeyHint = "done";
 110 });
 111 </script>
 112 </pre>
 113 </body>
 114 </html>