| <html> |
| <head> |
| <script type="text/javascript"> |
| function print(message) |
| { |
| var paragraph = document.createElement("div"); |
| if (message == "") { |
| paragraph.appendChild(document.createElement("br")); |
| } else { |
| paragraph.appendChild(document.createTextNode(message)); |
| } |
| document.getElementById("console").appendChild(paragraph); |
| } |
| function test() |
| { |
| if (window.testRunner) { |
| testRunner.dumpAsText(); |
| } |
| var elt = document.getElementById("text"); |
| print("===textarea==="); |
| testElt(elt); |
| |
| elt = document.getElementById("input"); |
| print(""); |
| print("===input==="); |
| testElt(elt); |
| |
| print(""); |
| print("===button==="); |
| |
| // Make sure that accessing selectionStart and selectionEnd on |
| // the button throws exceptions. |
| elt = document.getElementById("button"); |
| testButtonSelectionAccess(elt, ".selectionStart"); |
| testButtonSelectionAccess(elt, ".selectionStart = 0"); |
| testButtonSelectionAccess(elt, ".selectionEnd"); |
| testButtonSelectionAccess(elt, ".selectionEnd = 0"); |
| // Make sure that setSelectionRange is defined on the button element, |
| // but throws an exception if called. |
| if (elt.setSelectionRange != undefined) { |
| print("button.setSelectionRange defined"); |
| testButtonSelectionAccess(elt, ".setSelectionRange(0,0)"); |
| } |
| } |
| function testElt(elt) |
| { |
| // make sure that setSelectionRange is defined |
| if (elt.setSelectionRange == undefined) { |
| print("Failed: no setSelectionRange"); |
| return; |
| } |
| elt.value = "This is a test value. Just filling in some text."; |
| // the value is 48 characters long |
| print("setSelectionRange():"); |
| elt.setSelectionRange(3,7); |
| display(elt); |
| elt.setSelectionRange(-2,5); |
| display(elt); |
| elt.setSelectionRange(42,54); |
| display(elt); |
| elt.setSelectionRange(5,2); |
| display(elt); |
| |
| print(""); |
| print("selectionStart:"); |
| elt.selectionStart = 3; |
| display(elt); |
| elt.selectionStart = 7; |
| display(elt); |
| elt.selectionStart = -1; |
| display(elt); |
| elt.selectionStart = 54; |
| display(elt); |
| elt.selectionStart = 3; |
| display(elt); |
| |
| print(""); |
| print("selectionEnd:"); |
| elt.selectionEnd = 5; |
| display(elt); |
| elt.selectionEnd = 2; |
| display(elt); |
| elt.selectionEnd = -1; |
| display(elt); |
| elt.selectionEnd = 54; |
| display(elt); |
| elt.selectionStart = 7; |
| elt.selectionEnd = 7; |
| display(elt); |
| |
| print(""); |
| print("selectionStart and selectionEnd in focus handler don't return wrong values 0,0:"); |
| elt.selectionStart = elt.selectionEnd = 7; |
| // Need to clear selection. Selection API calls above modified |
| // both of real selection and |elt|'s cached selection even |
| // though |elt| has no focus. |
| // We'd like to check the behavior in case that real selection |
| // and the cached selection are mismatched. |
| getSelection().removeAllRanges(); |
| // selectionStart and selectionEnd are still 7. |
| elt.onfocus = function() { display(elt); }; |
| elt.focus(); |
| |
| elt.value = ""; |
| } |
| function testButtonSelectionAccess(button, access) |
| { |
| var source = "button" + access; |
| try { |
| eval(source); |
| print(source + " did not throw exception"); |
| } catch(e) { |
| print(source + " threw exception"); |
| } |
| } |
| function display(elt) |
| { |
| var actStart = elt.selectionStart; |
| var actEnd = elt.selectionEnd; |
| var txt = actStart.toString() + ", " + actEnd.toString(); |
| print(txt); |
| } |
| </script> |
| </head> |
| <body onload="test();"> |
| <p>This test checks if setSelectionRange(), selectionStart, and selectionEnd on a textarea and input work as expected. This includes checking edge cases such as out-of-bound values.</p> |
| <p>If this test passed you'll see a bunch of correct selection ranges below. Check the expected file for the correct ranges.</p> |
| <hr /> |
| <form> |
| <textarea id="text"></textarea> |
| <input type="text" id="input" /> |
| <input type="button" id="button" /> |
| </form> |
| <hr /> |
| <p id="console"></p> |
| </body> |
| </html> |
