| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> |
| <script src="../../../resources/ui-helper.js"></script> |
| <style> |
| input { |
| width: 300px; |
| height: 50px; |
| } |
| |
| body { |
| margin: 0; |
| } |
| </style> |
| <head> |
| <body onload="runTest()"> |
| <input id="input" list="fruits" type="text"/> |
| <datalist id="fruits"> |
| <option>Apple</option> |
| <option>Orange</option> |
| <option>Pear</option> |
| </datalist> |
| <pre>1. Is showing suggestions? <span id="before"></span></pre> |
| <pre>2. Is showing suggestions? <span id="after"></span></pre> |
| <br> |
| <div>This test verifies that datalist suggestions UI can be shown and hidden. To test manually:</div> |
| <ol> |
| <li>Focus the text field; on iOS, additionally tap the suggestions dropdown button.</li> |
| <li>Verify that a menu containing suggestions is shown.</li> |
| <li>On iOS, tap the input field; on macOS, blur the input.</li> |
| <li>Verify that the suggestions menu is no longer shown.</li> |
| </ol> |
| </body> |
| <script> |
| if (window.testRunner) { |
| testRunner.waitUntilDone(); |
| testRunner.dumpAsText(); |
| } |
| |
| function waitForDataListSuggestionsToChangeVisibility(visible) |
| { |
| return new Promise(async resolve => { |
| while (visible != await UIHelper.isShowingDataListSuggestions()) |
| continue; |
| resolve(); |
| }); |
| } |
| |
| async function runTest() { |
| await UIHelper.activateAndWaitForInputSessionAt(150, 25); |
| |
| if (UIHelper.isIOSFamily()) { |
| await UIHelper.tapAt(290, 30); |
| await waitForDataListSuggestionsToChangeVisibility(true); |
| } |
| |
| before.textContent = await UIHelper.isShowingDataListSuggestions(); |
| |
| if (UIHelper.isIOSFamily()) { |
| await UIHelper.tapAt(150, 25); |
| await waitForDataListSuggestionsToChangeVisibility(false); |
| } else |
| input.blur(); |
| |
| after.textContent = await UIHelper.isShowingDataListSuggestions(); |
| |
| testRunner.notifyDone(); |
| } |
| </script> |
| </html> |
