| <html> |
| <head> |
| <style type="text/css" media="screen"> |
| html { |
| zoom: 120%; |
| } |
| </style> |
| <script> |
| function setup() { |
| var results = document.createElement('div'); |
| results.id = "res"; |
| results.appendChild(document.createTextNode("Results:")); |
| document.body.appendChild(results); |
| } |
| function test() { |
| setup(); |
| |
| mouseDownOnSelect("sl1", 1, false, false); |
| var expectedSelectionResults = new Array(false, true, false, false, false, false, false, false, false, false, false, false, false, false, false, false, false); |
| testResults("sl1", expectedSelectionResults, 1); |
| |
| mouseDownOnSelect("sl1", 6, false, false); |
| expectedSelectionResults = new Array(false, false, false, false, false, false, true, false, false, false, false, false, false, false, false, false, false); |
| testResults("sl1", expectedSelectionResults, 2); |
| } |
| |
| function mouseDownOnSelect(selId, index, shift, meta) { |
| var sl = document.getElementById(selId); |
| var itemHeight = 14 * 1.2; |
| var borderPaddingTop = 20 * 1.2; |
| var borderPaddingLeft = 20 * 1.2; |
| var y = index * itemHeight - window.pageYOffset + borderPaddingTop + itemHeight / 2; |
| |
| var clickX = sl.offsetLeft + borderPaddingLeft + 5; |
| var clickY = sl.offsetTop + y; |
| var event = document.createEvent("MouseEvent"); |
| event.initMouseEvent("mousedown", true, true, document.defaultView, 1, clickX, clickY, clickX, clickY, false, false, shift, meta, 0, document); |
| sl.dispatchEvent(event); |
| } |
| |
| function testResults(selId, expectedArr, testNum) { |
| var sl = document.getElementById(selId); |
| var res = document.getElementById('res'); |
| var resultsArr = new Array(sl.options.length); |
| |
| var i; |
| for (i=0; i < sl.options.length; i++) { |
| resultsArr[i] = sl.options[i].selected; |
| } |
| var successString = "Failed"; |
| var success = false; |
| if (expectedArr.join() == resultsArr.join()) { |
| success = true; |
| successString = "Passed"; |
| } |
| |
| log("Test " + testNum + " " + successString); |
| if (!success) { |
| log("<pre> Expected: " + expectedArr.join() + "<br>" + " Actual: " + resultsArr.join() + "</pre>"); |
| } |
| } |
| |
| function log(msg) { |
| var r = document.getElementById('res'); |
| r.innerHTML = r.innerHTML + "<br>" + msg; |
| } |
| </script> |
| </head> |
| <body onload="test()"> |
| |
| <select id="sl1" multiple style="height: 135px; border: 10px solid; padding: 10px;"> |
| <option>one</option> |
| <option>two</option> |
| <option>three</option> |
| <option>four</option> |
| <option>five</option> |
| <option>six</option> |
| <option>seven</option> |
| <option>eight</option> |
| <option>nine</option> |
| <option>ten</option> |
| <option>eleven</option> |
| <option>twelve</option> |
| <option>thirteen</option> |
| <option>fourteen</option> |
| <option>fifteen</option> |
| <option>sixteen</option> |
| <option>seventeen</option> |
| </select> |
| |
| </body> |
| </html> |
