test_inputmode.html (6455B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Tests for inputmode attribute</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 <input id="a1" inputmode="none"> 14 <input id="a2" inputmode="text"> 15 <input id="a3" inputmode="tel"> 16 <input id="a4" inputmode="url"> 17 <input id="a5" inputmode="email"> 18 <input id="a6" inputmode="numeric"> 19 <input id="a7" inputmode="decimal"> 20 <input id="a8" inputmode="search"> 21 <input id="a9"> 22 <input id="a10" type="number" inputmode="numeric"> 23 <input id="a11" type="date" inputmode="numeric"> 24 <input id="a12" type="time" inputmode="numeric"> 25 <textarea id="b1" inputmode="none"></textarea> 26 <textarea id="b2" inputmode="text"></textarea> 27 <textarea id="b3" inputmode="tel"></textarea> 28 <textarea id="b4" inputmode="url"></textarea> 29 <textarea id="b5" inputmode="email"></textarea> 30 <textarea id="b6" inputmode="numeric"></textarea> 31 <textarea id="b7" inputmode="decimal"></textarea> 32 <textarea id="b8" inputmode="search"></textarea> 33 <textarea id="b9"></textarea> 34 <div contenteditable id="c1" inputmode="none"><span>c1</span></div> 35 <div contenteditable id="c2" inputmode="text"><span>c2</span></div> 36 <div contenteditable id="c3" inputmode="tel"><span>c3</span></div> 37 <div contenteditable id="c4" inputmode="url"><span>c4</span></div> 38 <div contenteditable id="c5" inputmode="email"><span>c5</span></div> 39 <div contenteditable id="c6" inputmode="numeric"><span>c6</span></div> 40 <div contenteditable id="c7" inputmode="decimal"><span>c7</span></div> 41 <div contenteditable id="c8" inputmode="search"><span>c8</span></div> 42 <div contenteditable id="c9"><span>c9</span></div> 43 <input id="d1" inputmode="URL"> <!-- no lowercase --> 44 </div> 45 <pre id="test"> 46 <script class=testbody" type="application/javascript"> 47 // eslint-disable-next-line mozilla/no-addtask-setup 48 add_task(async function setup() { 49 await new Promise(r => SimpleTest.waitForFocus(r)); 50 }); 51 52 add_task(async function basic() { 53 const tests = [ 54 { id: "a1", inputmode: "none", desc: "inputmode of input element is none" }, 55 { id: "a2", inputmode: "text", desc: "inputmode of input element is text" }, 56 { id: "a3", inputmode: "tel", desc: "inputmode of input element is tel" }, 57 { id: "a4", inputmode: "url", desc: "inputmode of input element is url" }, 58 { id: "a5", inputmode: "email", desc: "inputmode of input element is email" }, 59 { id: "a6", inputmode: "numeric", desc: "inputmode of input element is numeric" }, 60 { id: "a7", inputmode: "decimal", desc: "inputmode of input element is decimal" }, 61 { id: "a8", inputmode: "search", desc: "inputmode of input element is search" }, 62 { id: "a9", inputmode: "", desc: "no inputmode of input element" }, 63 { id: "a10", inputmode: "numeric", desc: "inputmode of input type=number is numeric" }, 64 { id: "a11", inputmode: "", desc: "no inputmode due to type=date" }, 65 { id: "a12", inputmode: "", desc: "no inputmode due to type=time" }, 66 { id: "b1", inputmode: "none", desc: "inputmode of textarea element is none" }, 67 { id: "b2", inputmode: "text", desc: "inputmode of textarea element is text" }, 68 { id: "b3", inputmode: "tel", desc: "inputmode of textarea element is tel" }, 69 { id: "b4", inputmode: "url", desc: "inputmode of textarea element is url" }, 70 { id: "b5", inputmode: "email", desc: "inputmode of textarea element is email" }, 71 { id: "b6", inputmode: "numeric", desc: "inputmode of textarea element is numeric" }, 72 { id: "b7", inputmode: "decimal", desc: "inputmode of textarea element is decimal" }, 73 { id: "b8", inputmode: "search", desc: "inputmode of textarea element is search" }, 74 { id: "b9", inputmode: "", desc: "no inputmode of textarea element" }, 75 { id: "c1", inputmode: "none", desc: "inputmode of contenteditable is none" }, 76 { id: "c2", inputmode: "text", desc: "inputmode of contenteditable is text" }, 77 { id: "c3", inputmode: "tel", desc: "inputmode of contentedtiable is tel" }, 78 { id: "c4", inputmode: "url", desc: "inputmode of contentedtiable is url" }, 79 { id: "c5", inputmode: "email", desc: "inputmode of contentedtable is email" }, 80 { id: "c6", inputmode: "numeric", desc: "inputmode of contenteditable is numeric" }, 81 { id: "c7", inputmode: "decimal", desc: "inputmode of contenteditable is decimal" }, 82 { id: "c8", inputmode: "search", desc: "inputmode of contenteditable is search" }, 83 { id: "c9", inputmode: "", desc: "no inputmode of contentedtiable" }, 84 { id: "d1", inputmode: "url", desc: "inputmode of input element is URL" }, 85 ]; 86 87 for (let test of tests) { 88 let element = document.getElementById(test.id); 89 if (element.tagName == "DIV") { 90 // Set caret to text node in contenteditable 91 window.getSelection().removeAllRanges(); 92 let range = document.createRange(); 93 range.setStart(element.firstChild.firstChild, 1); 94 range.setEnd(element.firstChild.firstChild, 1); 95 window.getSelection().addRange(range); 96 } else { 97 // input and textarea element 98 element.focus(); 99 } 100 is(SpecialPowers.DOMWindowUtils.focusedInputMode, test.inputmode, test.desc); 101 } 102 }); 103 104 add_task(async function dynamicChange() { 105 const tests = ["a3", "b3", "c3"]; 106 for (let test of tests) { 107 let element = document.getElementById(test); 108 element.focus(); 109 is(SpecialPowers.DOMWindowUtils.focusedInputMode, "tel", "Initial inputmode"); 110 element.inputMode = "url"; 111 is(SpecialPowers.DOMWindowUtils.focusedInputMode, "url", 112 "inputmode in InputContext has to sync with current inputMode property"); 113 element.setAttribute("inputmode", "decimal"); 114 is(SpecialPowers.DOMWindowUtils.focusedInputMode, "decimal", 115 "inputmode in InputContext has to sync with current inputmode attribute"); 116 // Storing the original value may be safer. 117 element.inputMode = "tel"; 118 } 119 120 let element = document.getElementById("a3"); 121 element.focus(); 122 is(SpecialPowers.DOMWindowUtils.focusedInputMode, "tel", "Initial inputmode"); 123 document.getElementById("a4").inputMode = "email"; 124 is(SpecialPowers.DOMWindowUtils.focusedInputMode, "tel", 125 "inputmode in InputContext keeps focused inputmode value"); 126 // Storing the original value may be safer. 127 document.getElementById("a4").inputMode = "url"; 128 }); 129 </script> 130 </pre> 131 </body> 132 </html>