test_formautofill_preview_highlight.html (3491B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Test form autofill - preview and highlight</title> 6 <script src="/tests/SimpleTest/SimpleTest.js"></script> 7 <script src="/tests/SimpleTest/EventUtils.js"></script> 8 <script type="text/javascript" src="formautofill_common.js"></script> 9 <script type="text/javascript" src="satchel_common.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 <body> 13 Form autofill test: preview and highlight 14 15 <script> 16 /* import-globals-from ../../../../../toolkit/components/satchel/test/satchel_common.js */ 17 18 "use strict"; 19 20 const MOCK_STORAGE = [ 21 { 22 organization: "Sesame Street", 23 country: "US", 24 "street-address": "123 Sesame Street.", 25 tel: "+13453453456", 26 }, 27 { 28 organization: "Mozilla", 29 country: "US", 30 "street-address": "331 E. Evelyn Avenue", 31 }, 32 { 33 organization: "Tel org", 34 country: "US", 35 tel: "+12223334444", 36 }, 37 { 38 organization: "Random Org", 39 country: "US", 40 "address-level1": "First Admin Level", 41 tel: "+13453453456", 42 }, 43 { 44 organization: "readonly Org", 45 country: "US", 46 "address-level1": "First Admin Level", 47 tel: "+13453453456", 48 name: "John Doe", 49 }, 50 { 51 organization: "test org", 52 country: "US", 53 "address-level2": "Not a Town", 54 tel: "+13453453456", 55 name: "John Doe", 56 } 57 ]; 58 59 60 initPopupListener(); 61 62 add_task(async function setup_storage() { 63 for (const storage of MOCK_STORAGE) { 64 await addAddress(storage); 65 } 66 }); 67 68 add_task(async function check_preview() { 69 const focusedInput = await setInput("#organization", ""); 70 71 synthesizeKey("KEY_ArrowDown"); 72 await expectPopup(); 73 await checkFormFieldsStyle(null); 74 75 for (let i = 0; i < MOCK_STORAGE.length; i++) { 76 info(`Checking organization: ${MOCK_STORAGE[i].organization} preview`); 77 synthesizeKey("KEY_ArrowDown"); 78 await notifySelectedIndex(i); 79 await checkFormFieldsStyle(MOCK_STORAGE[i]); 80 } 81 82 // Navigate to the footer 83 synthesizeKey("KEY_ArrowDown"); 84 await notifySelectedIndex(MOCK_STORAGE.length + 1); // skip over the status row 85 await checkFormFieldsStyle(null); 86 87 synthesizeKey("KEY_ArrowDown"); 88 await notifySelectedIndex(-1); 89 await checkFormFieldsStyle(null); 90 91 focusedInput.blur(); 92 }); 93 94 add_task(async function check_filled_highlight() { 95 await triggerPopupAndHoverItem("#organization", 0); 96 // filled 1st address 97 await triggerAutofillAndCheckProfile(MOCK_STORAGE[0]); 98 await checkFormFieldsStyle(MOCK_STORAGE[0], false); 99 }); 100 101 </script> 102 103 <p id="display"></p> 104 105 <div id="content"> 106 107 <form id="form1"> 108 <p>This is a basic form.</p> 109 <p><label>organization: <input id="organization" autocomplete="organization"></label></p> 110 <p><label>streetAddress: <textarea id="street-address" autocomplete="street-address"></textarea></label></p> 111 <p><label>tel: <input id="tel" autocomplete="tel"></label></p> 112 <p><label>country: <input id="country" autocomplete="country"></label></p> 113 <p><label>address-level1: 114 <select id="address-level1" autocomplete="address-level1"> 115 <option>First Admin Level</option> 116 <option>Second Admin Level</option> 117 </select> 118 </label></p> 119 <p><label>full name: <input id="name" autocomplete="name" readonly value="UNCHANGED"></label></p> 120 <p><label>address-level2: <input id="address-level2" autocomplete="address-level2" disabled value="Town"></label></p> 121 </form> 122 123 </div> 124 125 <pre id="test"></pre> 126 </body> 127 </html>