number-appearance-datalist-dynamic.html

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<html>
<body>
<script src="../resources/common.js"></script>
<style>
input::-webkit-calendar-picker-indicator,
input::-webkit-inner-spin-button {
    opacity: 1;
}
</style>
<dl>
<dt>Datalist follows:
<dd><input type="number" list="dl1">
<dt>Empty datalist:
<dd><input type="number" list="dl-empty">
<dt>Datalist without valid options:
<dd><input type="number" list="dl-invalid">
<dt>Empty datalist becomes non-empty:
<dd><input type="number" list="dl-empty-valid">
<dt>Datalist becomes empty:
<dd><input type="number" list="dl-valid-empty">
<dt>Datalist disappears:
<dd><input type="number" list="dl-disappear">
<dt>No datalist with the speicified ID:
<dd><input type="number" list="dl-no-id">
<dt>No datalist with the speicified ID, then it appears:
<dd><input type="number" list="dl-no-id-then-added">
</dl>

<datalist id="dl1">
<option>2</option>
</datalist>
<datalist id="dl-empty">
</datalist>
<datalist id="dl-invalid">
<option>Suggestion</option>
</datalist>
<datalist id="dl-empty-valid">
</datalist>
<datalist id="dl-valid-empty">
<option>3</option>
</datalist>
<datalist id="dl-disappear">
<option>4</option>
</datalist>
<datalist id="dl-no-id-then-added-pre">
<option>5</option>
</datalist>

<script>
function change() {
    $('dl-empty-valid').innerHTML = '<option>6</option>';
    $('dl-valid-empty').innerHTML = '';
    $('dl-disappear').remove();
    $('dl-no-id-then-added-pre').id = 'dl-no-id-then-added';
    document.body.offsetLeft;
    testRunner.notifyDone();
}

window.onload = function() {
    document.body.offsetLeft;
    setTimeout(change, 0);
};
testRunner.waitUntilDone();
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/number/number-appearance-datalist-dynamic.html
