blob: 73a46b12ad99023610aa4b916d8e4afc28fb1a8c [file] [log] [blame]
<!DOCTYPE html> <!-- webkit-test-runner [ useFlexibleViewport=true ] -->
<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>
<input id="fruit" list="fruits" type="text"/>
<datalist id="fruits">
<option>Orange</option>
<option>Pear</option>
<option>Apple</option>
</datalist>
<pre>Top suggestion with empty text field: "<span id="first"></span>"</pre>
<pre>Top suggestion with "a" in text field: "<span id="second"></span>"</pre>
<br>
<div>This test verifies that datalist suggestions in a text field are ordered in a way that respects the order of option
elements in the document, as well as the contents of the text field. To test manually:</div>
<ol>
<li>Focus the text field.</li>
<li>Check that "Orange" is the top suggestion.</li>
<li>Type "a" and blur the text field.</li>
<li>Focus the text field again.</li>
<li>Check that "Apple" is the top suggestion.</li>
</ol>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
}
function waitForDataListSuggestionsToChangeVisibility(visible)
{
return new Promise(async resolve => {
while (visible != await UIHelper.isShowingDataListSuggestions())
continue;
resolve();
});
}
function focusInputFieldAndChooseFirstSuggestion()
{
return new Promise(async resolve => {
await UIHelper.activateAndWaitForInputSessionAt(100, 25);
if (UIHelper.isIOSFamily()) {
await UIHelper.tapAt(290, 30);
await waitForDataListSuggestionsToChangeVisibility(true);
await UIHelper.activateDataListSuggestion(0);
await UIHelper.resignFirstResponder();
} else {
await UIHelper.typeCharacter("downArrow");
await UIHelper.typeCharacter("\r");
}
resolve();
});
}
(async () => {
await focusInputFieldAndChooseFirstSuggestion();
first.textContent = fruit.value;
fruit.value = "a";
await focusInputFieldAndChooseFirstSuggestion();
second.textContent = fruit.value;
testRunner.notifyDone();
})();
</script>
</body>
</html>