<!DOCTYPE html>
<html>
<body>
<p id="description">This test setting a value clears suggested value.</p>
<pre><input id="test" type="text" value="initial value"><br>
<textarea id="textarea"></textarea><br>
<select id="select"><option>CA</option><option>TX</option></select></pre>
<script src="../../resources/dump-as-markup.js"></script>
<script>

var input = document.getElementById('test');
var textarea = document.getElementById('textarea');
textarea.value = 'initial value';
var select = document.getElementById('select');
select.selectedIndex = -1;
var result = document.getElementById('result');
if (!window.internals)
    testFailed('This test requires internals object');
else {
    input.focus();
    input.selectionStart = input.selectionEnd = 0;

    internals.setSuggestedValue(input, 'suggested value');
    internals.setSuggestedValue(textarea, 'suggested value');
    internals.setSuggestedValue(select, 'TX');

    Markup.description(document.getElementById('description').textContent)

    function addText(text) {
        input.parentNode.appendChild(document.createTextNode(text));
    }

    function log() {
        while (input.parentNode.firstChild != input.parentNode.lastChild)
            input.parentNode.removeChild(input.parentNode.lastChild);
        function addTextResult(value) { addText(value + ': ' + eval(value)); }
        addTextResult('input.value');
        addTextResult('internals.suggestedValue(input)');
        addTextResult('input.selectionStart');
        addTextResult('input.selectionEnd');
        addTextResult('textarea.value');
        addTextResult('internals.suggestedValue(textarea)');
        addTextResult('select.value');
        addTextResult('internals.suggestedValue(select)');
    }

    function getSelectedValues(select) {
        var selectedValues = [];
        for (var i = 0; i < select.options.length; i++) {
            var option = select.options[i];
            if (option.selected)
                selectedValues.push(option.value);
        }
        return selectedValues.join(',');
    }

    log();
    Markup.dump(input.parentNode, 'After setting suggestedValue');

    input.value = 'new value';
    textarea.value = 'new value';
    select.value = 'CA';

    log();
    // Make sure the InnerEditor value is set to the "new value". The
    // InnerEditor element is the second/last child of the shadow
    // input/textarea.
    var innerTextValue = internals.shadowRoot(input).lastChild.innerText;
    var innerTextAreaValue = internals.shadowRoot(textarea).lastChild.innerText;
    var selectedValues = getSelectedValues(select);
    addText(innerTextValue == 'new value' &&
            innerTextAreaValue == 'new value' &&
            selectedValues == 'CA' ? 'PASS' : 'FAIL');
    Markup.dump(input.parentNode, 'After setting value');
}

</script>
</body>
</html>