<!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 focusInputFieldAndChooseFirstSuggestion()
{
    return new Promise(async resolve => {
        await UIHelper.activateAndWaitForInputSessionAt(100, 25);
        if (UIHelper.isIOSFamily()) {
            await UIHelper.tapAt(290, 30);
            await UIHelper.resignFirstResponder();
            await UIHelper.waitForKeyboardToHide();
        } 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>