test_input_text_show_picker.html (2210B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>input.showPicker() with datalist shows the autocomplete popup</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 9 <script> 10 const controller = SpecialPowers.Cc["@mozilla.org/autocomplete/controller;1"].getService( 11 SpecialPowers.Ci.nsIAutoCompleteController 12 ); 13 14 async function testWithInputType(aType) { 15 const inp = document.getElementById("inp-showPicker"); 16 inp.type = aType; 17 18 ok(!controller.input?.popupOpen, `Initially no input popup`); 19 20 SpecialPowers.wrap(document).notifyUserGestureActivation(); 21 try { 22 inp.showPicker(); 23 } catch (e) { 24 if (e.name == "SecurityError" && isXOrigin) { 25 ok(true, "showPicker was blocked in xorigin document"); 26 return; 27 } 28 throw e; 29 } 30 is(isXOrigin, false, "showPicker should be blocked in xorigin document"); 31 32 await SimpleTest.promiseWaitForCondition( 33 () => controller.input?.popupOpen, 34 `input[type=${aType}] popup was not opened` 35 ); 36 ok(controller.input?.popupOpen, `input[type=${aType}] popup open`); 37 38 // focus a different element 39 synthesizeMouseAtCenter(document.getElementById("inp-blur"), {}); 40 await SimpleTest.promiseWaitForCondition( 41 () => !controller.input?.popupOpen, 42 `input[type=${aType}] popup was closed` 43 ); 44 } 45 46 SimpleTest.waitForExplicitFinish(); 47 window.onload = async function() { 48 await SpecialPowers.pushPrefEnv({ 49 set: [["dom.input.showPicker_datalist.enabled", true]], 50 }); 51 52 for (const type of ["text", "search", "email", "url", "tel", "number"]) { 53 await testWithInputType(type); 54 } 55 SimpleTest.finish(); 56 }; 57 </script> 58 </head> 59 <body> 60 <p id="display"></p> 61 <div id="content" style="display: none"></div> 62 <pre id="test"></pre> 63 64 <input list="id-list" id="inp-showPicker" /> 65 <datalist id="id-list"> 66 <option value="Chocolate"></option> 67 <option value="Coconut"></option> 68 </datalist> 69 70 <input id="inp-blur"> 71 72 </body> 73 </html>