third_party/WebKit/LayoutTests/fast/forms/listbox-scroll-after-options-removed.html

   1 <html>
   2     <head>
   3         <script>
   4         function test()
   5         {
   6             if (window.testRunner) {
   7                 testRunner.dumpAsText();
   8                 testRunner.waitUntilDone();
   9             }
  10
  11             setTimeout(test2, 0);
  12         }
  13
  14         function test2()
  15         {
  16             var select = document.getElementById("listbox");
  17             while (select.hasChildNodes())
  18                 select.removeChild(select.firstChild);
  19
  20             var option = document.createElement("option");
  21             option.innerText = "Test Passed";
  22             select.appendChild(option);
  23
  24             var scrollTop = select.scrollTop;
  25             if (scrollTop == 0)
  26                 log("Test Passed");
  27             else
  28                 log("Test Failed.  scrollTop = " + scrollTop + " even though there is only one option in the listbox");
  29
  30             if (window.testRunner)
  31                 testRunner.notifyDone();
  32         }
  33
  34         function log(msg)
  35         {
  36             document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
  37         }
  38         </script>
  39     </head>
  40     <body onload="test()">
  41         <a href="http://bugs.webkit.org/show_bug.cgi?id=15252">Bug 15252: &lt;select multiple&gt; doesn't scroll to top when old options are removed and new ones are added, leaving listbox empty-looking</a>
  42
  43         <p>When the test runs, all the &lt;option&gt;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>
  44
  45         <select id="listbox" size="4">
  46             <option>1</option>
  47             <option>2</option>
  48             <option>3</option>
  49             <option>4</option>
  50             <option>5</option>
  51             <option selected>6</option>
  52         </select>
  53         <pre id="console"></pre>
  54     </body>
  55 </html>