<html>
<head>
<script>
function test()
{
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.waitUntilDone();
}
setTimeout(test2, 0);
}
function test2()
{
var select = document.getElementById("listbox");
while (select.hasChildNodes())
select.removeChild(select.firstChild);
var option = document.createElement("option");
option.innerText = "Test Passed";
select.appendChild(option);
var scrollTop = select.scrollTop;
if (scrollTop == 0)
log("Test Passed");
else
log("Test Failed. scrollTop = " + scrollTop + " even though there is only one option in the listbox");
if (window.testRunner)
testRunner.notifyDone();
}
function log(msg)
{
document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
}
</script>
</head>
<body onload="test()">
<a href="http://bugs.webkit.org/show_bug.cgi?id=15252">Bug 15252: <select multiple> doesn't scroll to top when old options are removed and new ones are added, leaving listbox empty-looking</a>
<p>When the test runs, all the <option>s in the select are removed and replaced with 1 new option. If the bug is present, the select will appear empty until you scroll up with the mousewheel.</p>
<select id="listbox" size="4">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option selected>6</option>
</select>
<pre id="console"></pre>
</body>
</html>