72 lines
1.9 KiB
HTML
72 lines
1.9 KiB
HTML
<!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>
|