selection.html (4025B)
1 <!DOCTYPE HTML> 2 <title>Input element programmatic selection support</title> 3 <link rel="author" title="yaycmyk" href="mailto:evan@yaycmyk.com"> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#dom-textarea/input-select"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <div id="log"></div> 8 <script> 9 10 /* all textual, non-hidden inputs support .select() */ 11 test(function() { 12 var valid = [ 13 "text", 14 "search", 15 "url", 16 "tel", 17 "email", 18 "password", 19 "date", 20 "time", 21 "datetime-local", 22 "number", 23 "color", 24 "file", 25 ]; 26 27 var invalid = [ 28 "hidden", 29 "range", 30 "checkbox", 31 "radio", 32 "submit", 33 "image", 34 "reset", 35 "button" 36 ]; 37 38 valid.forEach(function(type) { 39 test(function() { 40 var input = document.createElement("input"); 41 var a; 42 43 input.type = type; 44 assert_equals(input.type, type, "the given input type is not supported"); 45 46 input.select(); 47 48 }, "input type " + type + " should support the select() method"); 49 }); 50 51 invalid.forEach(function(type) { 52 test(function() { 53 var input = document.createElement("input"); 54 55 input.type = type; 56 assert_equals(input.type, type, "the given input type is not supported"); 57 58 var selectionStartBefore = input.selectionStart; 59 var selectionEndBefore = input.selectionEnd; 60 var selectionDirectionBefore = input.selectionDirection; 61 62 // Does not throw; see https://github.com/whatwg/html/issues/2275 63 input.select(); 64 65 assert_equals(input.selectionStart, selectionStartBefore, "selectionStart must not change"); 66 assert_equals(input.selectionEnd, selectionEndBefore, "selectionEnd must not change"); 67 assert_equals(input.selectionDirection, selectionDirectionBefore, "selectionDirection must not change"); 68 69 }, "input type " + type + " should do nothing when the select() method is called (but, not throw)"); 70 }); 71 }); 72 73 /* only certain input types are allowed to have a variable-length selection */ 74 test(function() { 75 var valid = [ 76 "text", 77 "search", 78 "url", 79 "tel", 80 "password" 81 ]; 82 83 var invalid = [ 84 "hidden", 85 "email", 86 "date", 87 "time", 88 "datetime-local", 89 "number", 90 "range", 91 "color", 92 "checkbox", 93 "radio", 94 "file", 95 "submit", 96 "image", 97 "reset", 98 "button" 99 ]; 100 101 valid.forEach(function(type) { 102 test(function() { 103 var input = document.createElement("input"); 104 var a; 105 106 input.type = type; 107 assert_equals(input.type, type, "the given input type is not supported"); 108 109 a = input.selectionStart; 110 input.selectionStart = 0; 111 a = input.selectionEnd; 112 input.selectionEnd = 0; 113 a = input.selectionDirection; 114 input.selectionDirection = "none"; 115 input.setSelectionRange(0, 0); 116 input.setRangeText('', 0, 0); 117 118 }, "input type " + type + " should support all selection attributes and methods"); 119 }); 120 121 invalid.forEach(function(type) { 122 test(function() { 123 var input = document.createElement("input"); 124 125 input.type = type; 126 assert_equals(input.type, type, "the given input type is not supported"); 127 128 assert_equals(input.selectionStart, null, 'getting input.selectionStart'); 129 assert_throws_dom("INVALID_STATE_ERR", function() { input.selectionStart = 0; }); 130 assert_equals(input.selectionEnd, null, 'getting input.selectionEnd'); 131 assert_throws_dom("INVALID_STATE_ERR", function() { input.selectionEnd = 0; }); 132 assert_equals(input.selectionDirection, null, 'getting input.selectionDirection'); 133 assert_throws_dom("INVALID_STATE_ERR", function() { input.selectionDirection = "none"; }); 134 assert_throws_dom("INVALID_STATE_ERR", function() { input.setSelectionRange(0, 0); }); 135 assert_throws_dom("INVALID_STATE_ERR", function() { input.setRangeText('', 0, 0); }); 136 137 }, "input type " + type + " should not support variable-length selections"); 138 }); 139 }); 140 </script>